title: how to show some markers on a static image using openlayers 3
body: <p>I am trying to show some marker on the static image ie</p>
  
  <p>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 openlayers3</p>
  
  <p>I understand we have a provision in  openlayer3 to use the static image as the base layer of the map</p>
  
  <p>I am not getting how to show the marker on the static image(base layer)for given certain plots on the image</p>
  
  <p>Any help would be more thank you please suggest a war to do it</p>
  
  <p>I am show the static image as the map as shown below</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Static image example&lt;/title&gt;
      &lt;script src="https://code.jquery.com/jquery-1.11.2.min.js"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"&gt;
      &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.6.0/ol.css" type="text/css"&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.6.0/ol.js"&gt;&lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="container-fluid"&gt;
  
      &lt;div class="row-fluid"&gt;
          &lt;div class="span12"&gt;
              &lt;div id="map" class="map"&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;
  &lt;script&gt;
      // 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: '&amp;copy; &lt;a href="http://xkcd.com/license.html"&gt;xkcd&lt;/a&gt;'
                          })
                      ],
                      url: 'colorful-triangles-background.jpg',
                      projection: projection,
                      imageExtent: extent
                  })
              })
          ],
          target: 'map',
          view: new ol.View({
              projection: projection,
              center: ol.extent.getCenter(extent),
              zoom: 2
          })
      });
  
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>But i have no idea how to plot the markers the plots are json given to plot is some thing like below</p>
  
  <p>[{
  x:1.234,
  y:3.34,
  units:feet
  },
  {
  x:2.234,
  y:4.34,
  units:feet
  },
  {
  x:7.234,
  y:9.34,
  units:feet
  }]</p>