[GIS] how to show some markers on a static image using openlayers 3

iconimagemarkersopenlayers

I am trying to show some marker on the static image ie.

Given a static image of certain size in feet and set of point in feets how mark some image or a marker on the static image using OpenLayers 3.

I understand we have a provision in OpenLayers 3 to use the static image as the base layer of the map.

I am not getting how to show the marker on the static image (base layer) for given certain plots on the image.

I am showing the static image as the map as shown below:

<!DOCTYPE html>
<html>
<head>
    <title>Static image example</title>
    <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.6.0/ol.css" type="text/css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.6.0/ol.js"></script>

</head>
<body>
<div class="container-fluid">

    <div class="row-fluid">
        <div class="span12">
            <div id="map" class="map"></div>
        </div>
    </div>

</div>
<script>
    // Map views always need a projection.  Here we just want to map image
    // coordinates directly to map coordinates, so we create a projection that uses
    // the image extent in pixels.
    var extent = [0, 0, 1024, 968];
    var projection = new ol.proj.Projection({
        code: 'xkcd-image',
        units: 'pixels',
        extent: extent
    });

    var map = new ol.Map({
        layers: [
            new ol.layer.Image({
                source: new ol.source.ImageStatic({
                    attributions: [
                        new ol.Attribution({
                            html: '&copy; <a href="http://xkcd.com/license.html">xkcd</a>'
                        })
                    ],
                    url: 'colorful-triangles-background.jpg',
                    projection: projection,
                    imageExtent: extent
                })
            })
        ],
        target: 'map',
        view: new ol.View({
            projection: projection,
            center: ol.extent.getCenter(extent),
            zoom: 2
        })
    });

</script>
</body>
</html>

But I have no idea how to plot the markers the plots are JSON given to plot is some thing like below:

[{
   x:1.234,
   y:3.34,
   units:feet
},
{
   x:2.234,
   y:4.34,
   units:feet
},
{
   x:7.234,
   y:9.34,
   units:feet
}]

Best Answer

You need to stop thinking in feets. Your image is maybe using feets in first but you are using pixels with images. So you need to convert feets to pixels using the "rule of three" (You have the image width and height in feets and you have the same image with pixel units)

Then you can use the below sample to put a point on the top of the static image. The axis coordinates start from the bottom left corner.

<!DOCTYPE html>
<html>
  <head>
    <title>Static Image</title>
    <link rel="stylesheet" href="http://openlayers.org/en/v3.12.1/css/ol.css" type="text/css">
    <script src="http://openlayers.org/en/v3.12.1/build/ol.js"></script>
  </head>
  <body>
    <div id="map" class="map"></div>
    <script>
      // Map views always need a projection.  Here we just want to map image
      // coordinates directly to map coordinates, so we create a projection that uses
      // the image extent in pixels.
      var extent = [0, 0, 1024, 968];
      var projection = new ol.proj.Projection({
        code: 'xkcd-image',
        units: 'pixels',
        extent: extent
      });

      var iconFeature = new ol.Feature({
        geometry: new ol.geom.Point([200, 200]),
        name: 'Null Island',
        population: 4000,
        rainfall: 500
      });

      var vectorSource = new ol.source.Vector({
        features: [iconFeature]
        // ,projection: projection
      });

      var vectorLayer = new ol.layer.Vector({
        source: vectorSource
      });

      var map = new ol.Map({
        layers: [
          new ol.layer.Image({
            source: new ol.source.ImageStatic({
              attributions: [
                new ol.Attribution({
                  html: '&copy; <a href="http://xkcd.com/license.html">xkcd</a>'
                })
              ],
              url: 'http://imgs.xkcd.com/comics/online_communities.png',
              projection: projection,
              imageExtent: extent
            })
          }),
          vectorLayer
        ],
        target: 'map',
        view: new ol.View({
          projection: projection,
          center: ol.extent.getCenter(extent),
          zoom: 2,
          maxZoom: 8
        })
      });
    </script>
  </body>
</html>
Related Question