D3 Examples - d3.geo with d3.geo.zoom

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>
<script src="d3.geo.zoom.js"></script>
<style>
.land {
  fill: green;
​
}
.graticule {
  fill-opacity: 0;
  stroke: gray;
  stroke-opacity: 0.5;
}
.point {
  stroke: red;
  fill-opacity: 0.2;
  fill: white;
}
</style>
</head>
​
<body>
<svg class="myworld"></svg>
​
<script>
​
d3.json("world110.json", function(err, world) {
  var countries = topojson.feature(world, world.objects.land);
​
  var width = 420
  var height = 400
  var projection = d3.geo.orthographic()
  //var projection = d3.geo.albers()
  //var projection = d3.geo.mercator()
    .scale(170)
    .rotate([100,0,0])
    .translate([width/2, height/2])
    .clipAngle(90);
​
  var path = d3.geo.path()
  .projection(projection);
​
  var svg = d3.select(".myworld");
​
  var graticule = d3.geo.graticule()
  svg.append("path")
    .datum(graticule)
    .attr("class", "graticule")
    .attr("d", path);
​
  svg.append("path")
    .datum(countries)
    .attr("d", path)
    .classed("land", true);
​
​
  var zoom = d3.geo.zoom()
    .projection(projection)
    //.scaleExtent([projection.scale() * .7, projection.scale() * 10])
    .on("zoom.redraw", function() {
      d3.event.sourceEvent.preventDefault();
      svg.selectAll("path").attr("d", path);
      svg.selectAll("circle")
      .attr({
        cx: function(d) { return projection(d)[0] },
        cy: function(d) { return projection(d)[1] },
      })
​
    })
  d3.selectAll("path").call(zoom);
​
  var lonlat = [-109, 37.7833];
​
  var xy = projection(lonlat)
  svg.append("circle")
  .datum(lonlat)
  .classed("point", true)
  .attr({
    cx: function(d) { return projection(d)[0] },
    cy: function(d) { return projection(d)[1] },
    r: 10
  })
​
  navigator.geolocation.getCurrentPosition(function(pos){
    console.log(pos);
    var coords = [pos.coords.longitude, pos.coords.latitude]
    svg.append("circle")
    .datum(coords)
    .attr({
      cx: function(d) { return projection(d)[0] },
      cy: function(d) { return projection(d)[1] },
      r: 15,
    })
    .classed("point", true)
    .style("stroke", "blue");
  })
​
})
​
</script>
</body>
</html>
    