d3.geo with d3.geo.zoom

<!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>

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>

Modified http://d3js.org/d3.v3.min.js to a secure url

Modified http://d3js.org/topojson.v1.min.js to a secure url

https://d3js.org/d3.v3.min.js

https://d3js.org/topojson.v1.min.js