title: Rendering geoJSON using D3 and Leaflet using imageOverlay
body: <p><strong>Quick version:</strong> I’m having trouble displaying a d3 element on a static image displayed by Leaflet. It works if I use d3noob’s (<a href="http://bl.ocks.org/d3noob/9211665" rel="nofollow noreferrer">http://bl.ocks.org/d3noob/9211665</a>) example…but I’m having trouble extending it. I’m guessing it’s because of the lang and long translation or the projection but I’m not sure what I need to change. I’m trying to display the geoJSON in the centre of the image (my code on JSFiddle: <a href="https://jsfiddle.net/g_at_work/qyhf0qz0/12/" rel="nofollow noreferrer">https://jsfiddle.net/g_at_work/qyhf0qz0/12/</a>) </p>
  
  <p><strong>Longer version:</strong> 
  I'm trying to extend d3noob’s example so that I can display geoJSON on static images using Leaflet and D3 (an requirement from my boss unfortunately). I was able to reproduce d3noob’s tile based example but I've had trouble with the static version.</p>
  
  <p>I've been able to display the static image but I've not been able to display the blue rectangle on the image. I'm not sure what I need to do to manipulate the position of the blue rectangle described in the JSON.</p>
  
  <p>I've tried playing around with setting the coordinates in the projectPoint function but no luck: </p>
  
  <pre><code>function projectPoint(x, y) {
  var point = map.latLngToLayerPoint(new L.LatLng(y, x));
  this.stream.point(point.x, point.y);
  }
  </code></pre>
  
  <p>At this stage I’m thinking I need to describe a new projection but I’m not sure what.
  Here is the code which I’m using to display the static image:</p>
  
  <pre><code>var map = new L.Map("map", {maxZoom:1,center: [0,0], zoom: 3,crs:L.CRS.Simple});
  var southWest = map.unproject([0,882],map.getMaxZoom());
  var northEast = map.unproject([1085,0],map.getMaxZoom());
  var imageBounds = new L.LatLngBounds(southWest,northEast);
  L.imageOverlay('http://www.w3schools.com/css/trolltunga.jpg',imageBounds).addTo(map);
  map.fitBounds(imageBounds);
  </code></pre>
  
  <p>It would be great if someone could suggest a strategy for maniuplating the position of the rectangle (I’m new to d3 and leaflet) 
  Thanks a bunch
  G</p>