Zooming and Panning a Mercator Map centered on the Pacific using d3.js
d3.js, pan, zooming
Solution
I ended up working on the same problem. Here's an example (see code) where you pan left/right to rotate the projection (with wraparound), and up/down to translate (clamped by max absolute latitude), with zoom as well. Ensures that projection always fits within viewbox.
I learned a lot about zoom behavior, and projection center() and rotate() interaction.
Problem
Apologies if this is a simple case of me being blind to the obvious, but I am trying to put together a page that shows a map of the world (data sourced from a TopoJSON file) in Mercator projection centered on the Pacific. I.e. Europe on the left, America on the right and Australia in the middle. A bit like this... From this point I want to be able to zoom and pan the map to my hearts desire, but when I pan east or west, I want the map to scroll 'around' and not come to the end of the World (I hope that makes sense). The code I am currently working on is here (or at the following Gist (https://gist.github.com/d3noob/4966228) or block (http://bl.ocks.org/d3noob/4966228)); ``` <!DOCTYPE html> <meta charset="utf-8"> <style> body {font-size:11px;} path { stroke: black; stroke-width: 0.25px; } </style> <body> <script src="http://d3js.org/d3.v3.min.js"></script> <script src="http://d3js.org/topojson.v0.min.js"></script> <script> var width = 960, velocity = .005, then = Date.now() height = 475; var projection = d3.geo.mercator() .center([0, 0 ]) .scale(1000); var svg = d3.select("body").append("svg") .attr("width", width) .attr("height", height); var path = d3.geo.path() .projection(projection); var g = svg.append("g"); d3.json("world-110m.json", function(error, topology) { g.selectAll("path") .data(topojson.object(topology, topology.objects.countries).geometries) .enter() .append("path") .attr("d", path) .style("fill","black") d3.timer(function() { var angle = velocity * (Date.now() - then); projection.rotate([angle,0,0]); svg.selectAll("path") .attr("d", path.projection(projection)); }); var zoom = d3.behavior.zoom() .on("zoom",function() { g.attr("transform","translate("+d3.event.translate.join(",")+")scale("+d3.event.scale+")") }); svg.call(zoom) }); </script> </body> </html> ``` The code is an amalgam of examples and as a result I can see a map that can rotate west to east automatically, and I can pan and zoom using the mouse, but when panning and zooming, from what I can tell, I am affecting the internal "g" element and not the map within the "svg" element. There are plenty of good examples of being able to pan and zoom a map centered on the meridian. But none on the anti-meridian that I have discovered. Any help would be greatly appreciated.