title: Openlayers 3: Drawing grid lines (graticule) with predefined units on the custom static image
body: <p>I am trying to draw custom x-y axes grid lines on top of a static image, i.e. image pixels rather than lattitude and longitudes. Ideally, the grid lines should be redrawn dynamically when I drag/zoom/scroll the image, just like the x-y ruler bars in Photoshop.</p>
  
  <p>I came across the following code example, which provides a custom projection function to directly map image pixel coordinates to map coordinates.</p>
  
  <p><a href="http://openlayers.org/en/latest/examples/static-image.html" rel="nofollow">http://openlayers.org/en/latest/examples/static-image.html</a></p>
  
  <pre><code>// 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
        });
  </code></pre>
  
  <p>I tried to append the following code to the script. However, the <code>ol.Graticule</code> class seems to be incompatible with the custom <code>ol.proj.Projection</code> definition.</p>
  
  <p><a href="http://openlayers.org/en/latest/examples/graticule.html" rel="nofollow">http://openlayers.org/en/latest/examples/graticule.html</a></p>
  
  <pre><code>// Create the graticule component
  var graticule = new ol.Graticule({
  // the style to use for the lines, optional.
  strokeStyle: new ol.style.Stroke({
    color: 'rgba(255,120,0,0.9)',
    width: 2,
    lineDash: [0.5, 4]
    })
  });
  graticule.setMap(map);
  </code></pre>
  
  <p>What's wrong with the above code?</p>
  
  <p>P.S. I am aware of the Openseadragon API which provides a dynamic scalebar. However, I wish to stick to Openlayers API because I also have an extra map layer of anchor points at predefined locations on the static image.</p>