Rolling pan and zoom with Mercator projection

Example illustrating zoom and pan with a "rolling" Mercator projection. Drag left-right to rotate projection cylinder, and up-down to translate, clamped by max absolute latitude. Ensures projection always fits properly in viewbox.

forked from patricksurry's block: Rolling pan and zoom with Mercator projection

<!DOCTYPE html>
<meta charset="utf-8">
<style>

svg {
  background-color: lavender;
  border: 1px solid black;
}

path {
  fill: oldlace;
  stroke: #666;
  stroke-width: .5px;
}

</style>
<body>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script src="https://d3js.org/topojson.v1.min.js"></script>
<script>

var width = 600,
    height = 400,
    rotate = 60,        // so that [-60, 0] becomes initial center of projection
    maxlat = 83;        // clip northern and southern poles (infinite in mercator)
    
var projection = d3.geoMercator()
    .rotate([rotate,0])
    .scale(1)           // we'll scale up to match viewport shortly.
    .translate([width/2, height/2]);

// find the top left and bottom right of current projection
function mercatorBounds(projection, maxlat) {
    var yaw = projection.rotate()[0],
        xymax = projection([-yaw+180-1e-6,-maxlat]),
        xymin = projection([-yaw-180+1e-6, maxlat]);
    
    return [xymin,xymax];
}

// set up the scale extent and initial scale for the projection
var b = mercatorBounds(projection, maxlat),
    s = width/(b[1][0]-b[0][0]),
    scaleExtent = [s, 10*s];

projection
    .scale(scaleExtent[0]);

var zoom = d3.zoom()
    .scaleExtent(scaleExtent)
    .on("zoom", redraw);
    
var path = d3.geoPath()
    .projection(projection);

var svg = d3.selectAll('body')
    .append('svg')
        .attr('width',width)
        .attr('height',height)
        .call(zoom);

d3.json("world-50m.json", function ready(error, world) {

svg.selectAll('path')
        .data(topojson.feature(world, world.objects.countries).features)
      .enter().append('path')
    
    redraw();       // update path data
});

// track last translation and scale event we processed
var tlast = [0,0], 
    slast = null;

</script>

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

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

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

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