// code adapted from amazing d3 sample: http://mbostock.github.com/d3/talk/20111018/azimuthal.html
$(document).ready(function () {
 var m0, o0, features,
 // see: https://github.com/mbostock/d3/wiki/Geo-Projections
 projection = d3.geo.azimuthal()
 .scale(200000)
 .origin([-74.00, 40.70])
 .mode('orthographic')
 .translate([250, 650]),
 circle = d3.geo.circle()
 .origin(projection.origin()),
 path = d3.geo.path()
 .projection(projection),
 svg = d3.select('#map').append('svg:svg')
 .attr('width', 1280)
 .attr('height', 800)
 .on("mousedown", function () {
 m0 = [d3.event.pageX, d3.event.pageY];
 o0 = projection.origin();
 d3.event.preventDefault();
 }),
 clip, mousemove;

 d3.json('/json.ashx?MAP_TYPE=DEF&LAYERS=poly_landmarks&BBOX=40,-74,41,-73', function (coll) {
 features = svg.selectAll('path')
 .data(coll.features)
 .enter()
 .append('svg:path')
 .attr('d', clip);
 features
 .append('svg:title')
 .text(function (d) {
 return d.properties.LANAME;
 });
 });

 clip = function (d) {
 var c = circle.clip(d);
 return path(c);
 };
 mousemove = function () {
 if (!m0) {
 return;
 }

 var m1 = [d3.event.pageX, d3.event.pageY],
 o1 = [o0[0] + (m0[0] - m1[0]) / 4000, o0[1] + (m1[1] - m0[1]) / 4000];
 projection.origin(o1);
 circle.origin(o1);
 features.attr('d', clip);
 };
 
 d3.select(window)
 .on("mousemove", mousemove)
 .on("mouseup", function () {
 if (m0) {
 mousemove();
 m0 = null; 
 }
 });
});