I'm trying to overlay a map onto Google Maps using d3.geo and GeoJson. I've managed to force d3 to use the Google Map's projection for drawing the paths, which was surprisingly easy. Here's what I have so far:
http://www.caudillweb.com/temp/d3_choropleth.html
This works well as I zoom in and out:
But when I pan, the SVG overlay moves too, and since its size is fixed, the shapes get truncated:
Has anyone gotten something like this to work? Any ideas where I could go from here? The above example is a single self-contained HTML file if anyone wants to play with it.
Overlays are objects on the map that are tied to latitude/longitude coordinates, so they move when you drag or zoom the map. For information on predefined overlay types, see Drawing on the map.
In this example the width and height of the svg are set to 8000 x 8000, which seemed to be OK up to about zoom level 9-10. The top and left are set to -4000 x -4000 to center it. Finally, the projection is shifted/offset so that it draws in the center of the svg:
Enlarge and center the svg:
.SvgOverlay svg { position: absolute; top: -4000px; left: -4000px; width: 8000px; height: 8000px; }
Offset the projection:
return [pixelCoordinates.x + 4000, pixelCoordinates.y + 4000];
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With