title: Matching leaflet zoom level with d3 geo scale
body: <p><strong>What do I want to do?</strong></p>
  
  <ul>
  <li>Overlay an SVG layer on top of leaflet (or any map framework).</li>
  <li>Using d3js and d3.geo.mercator position elements in my SVG layer so they are positioned correctly over leaflet.</li>
  <li>I only have access to the zoom level, the center of the map (lat/long), the width and height of the map SVG element.</li>
  <li>I should only have to listen to changes to zoom level and map center in order to know when to reposition my SVG elements.</li>
  </ul>
  
  <p>I've already made the SVG element the same size as the leaflet layer; and have it as an overlay.</p>
  
  <p><strong>How am I doing it now?</strong></p>
  
  <p>I have some globals that line up with leaflet's values (Map.zoom, Map.width, Map.height, Map.center).</p>
  
  <pre><code>Map.center = [43, -72];
  Map.zoom = 3;
  
  Map.projection = d3.geo.mercator()
              .center([Map.center[1], Map.center[0]])
               // I think this is the problem. I don't really understand this.
              .scale(256 * Math.pow(2, Map.zoom))
              .translate([Map.width / 2, Map.height / 2])
  
  Map.lt = new L.Map...(center is Map.center, zoom is Map.zoom)
  </code></pre>
  
  <p>Any time leaflet changes I update the global values and recalculate Map.projection.</p>
  
  <p>I have a function:</p>
  
  <pre><code>function transform(d) {
      d = Map.projection(d.value.geometry.coordinates[0], d.value.geometry.coordinates[1]);
  
      return "translate(" + d[0] + "," + d[1] + ")";
  }
  </code></pre>
  
  <p>Then on objects and elements I need to position I call:</p>
  
  <pre><code>object.attr("transform", transform);
  </code></pre>
  
  <p>My problem is that the layers are not in sync.</p>
  
  <p>When I center my map on [43, -72] and I look at the x,y value returned (from Map.projection) it is exactly in the middle of my SVG layer, so I am guessing there is something wrong with my scale. I am not sure how I can make these values line up correctly.</p>
  
  <p>I don't want to use d3.geo.tile, or d3.geo.path() as I need more flexibility in control over the positioning and animation of my elements.</p>
  
  <p>I just want to know how I can line up leaflets positioning with my SVG layer, only by utilizing d3 functions. I dont wish to rely on leaflet for positioning my items as I might not use leaflet in the future; I just need to be able to scale/translate my d3.geo.mercator projection so it lines up with leaflet. How can I do this?</p>
  
  <p>Thanks!</p>
  
  <p><img src="https://i.stack.imgur.com/VOvLd.png" alt="Example"></p>