Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Overlay d3 paths onto Google Maps?

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:

Map zoomed outMap zoomed in

But when I pan, the SVG overlay moves too, and since its size is fixed, the shapes get truncated:

Map panned down

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.

like image 880
Herb Caudill Avatar asked Aug 10 '12 20:08

Herb Caudill


People also ask

What is overlay on Google Maps?

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.


1 Answers

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]; 
like image 128
Derek Hunziker Avatar answered Oct 05 '22 20:10

Derek Hunziker