score:8

Accepted answer

Ok I think I understand. For your first question about centering the map, you can translate the zoom using the projection of the San Francisco coordinates:

var projection = d3.geo.mercator()
        .scale((1 << 18) / 2 / Math.PI)
        .translate([width / 2, height / 2]);    

var center = projection(sf);

var zoom = d3.behavior.zoom()
  .scale(projection.scale() * 2 * Math.PI)
  .translate([width - center[0], height - center[1]]);

Once you have set the center, you then need to update your projection to align with the zoom in order to get the correct coordinates showing on the screen:

projection
     .scale(zoom.scale() / 2 / Math.PI)
     .translate(zoom.translate());

This is what I get when the map loads which seems to me the coordinates you are looking for:

enter image description here

I also modified the ZoomTo function to account for the above changes when transitioning:

function zoomTo(place) {
      // project back to main projection
      projection = d3.geo.mercator()
        .scale((1 << 18) / 2 / Math.PI)
        .translate([width / 2, height / 2])
      // set new center
      center = projection(place);
      // set zoom with new center
      return zoom
        .scale(projection.scale() * 2 * Math.PI)
        .translate([width - center[0], height - center[1]]);



    }

Full code: http://plnkr.co/edit/eE0XZQPHB6rAc9cg4LMH?p=preview


Related Query

More Query from same tag