This example shows the county boundaries for Illinois. In red we see the google.maps.Data() layer in blue a D3.geo.path() with mercator projection.
The google data layer is an object which displays in the same canvas as any google overlay (polygons, markers, polylines, etc) while the D3.geo.path() shows up in an SVG container I overlap on top of the google container.
| <!DOCTYPE html> | |
| <html> | |
| <meta charset="utf-8"> | |
| <head> | |
| <style> | |
| .counties { | |
| fill: none; | |
| stroke: #00c; | |
| } | |
| .states { | |
| fill: none; | |
| stroke: #fff; | |
| stroke-linejoin: round; | |
| } | |
| #thissvg { | |
| position:absolute; | |
| left:0; | |
| top:0; | |
| z-index: 50; | |
| } | |
| #map-canvas { | |
| position:absolute; | |
| left:0; | |
| top:0; | |
| z-index: 30; | |
| } | |
| .q0-9 { fill:rgb(247,251,255); } | |
| .q1-9 { fill:rgb(222,235,247); } | |
| .q2-9 { fill:rgb(198,219,239); } | |
| .q3-9 { fill:rgb(158,202,225); } | |
| .q4-9 { fill:rgb(107,174,214); } | |
| .q5-9 { fill:rgb(66,146,198); } | |
| .q6-9 { fill:rgb(33,113,181); } | |
| .q7-9 { fill:rgb(8,81,156); } | |
| .q8-9 { fill:rgb(8,48,107); } | |
| </style> | |
| <body> | |
| <script src="http://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> | |
| <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> | |
| <script src="http://d3js.org/d3.v3.min.js"></script> | |
| <script src="http://d3js.org/queue.v1.min.js"></script> | |
| <script> | |
| var width = 900, | |
| height = 600, | |
| globalOverlay = null, | |
| map = null; | |
| var url = 'illinois.json'; | |
| jQuery(document).ready(function() { | |
| jQuery('#map-canvas').width(width); | |
| jQuery('#map-canvas').height(height); | |
| }); | |
| function initialize() { | |
| map = new google.maps.Map(document.getElementById('map-canvas'), { | |
| zoom: 9, | |
| maxZoom:9, | |
| minZoom:9, | |
| center: {lat: 41, lng: -89.5} | |
| }); | |
| map.data.loadGeoJson(url); | |
| var featureStyle = { | |
| fillColor: 'transparent', | |
| strokeWeight: 2, | |
| strokeColor: 'red' | |
| }; | |
| map.data.setStyle(featureStyle); | |
| var projection=projection=d3.geo.mercator() | |
| .scale(40.5 * Math.pow(2, map.getZoom())) | |
| .translate([0,0]); | |
| var path = d3.geo.path().projection(projection); | |
| var g_= d3.select('#thissvg') | |
| .attr("width", 900) | |
| .attr("height", 600) | |
| .append("g") | |
| .attr("class", "counties") | |
| .attr("id","pathgroup"); | |
| function ready(error, us) { | |
| console.log(us); | |
| g_.selectAll("path") | |
| .data(us.features) | |
| .enter().append("path") | |
| .attr("d", path); | |
| var centerPixel = projection([map.getCenter().lng(), map.getCenter().lat()]); | |
| var translate = [(width / 2 - centerPixel[0]), (height / 2 - centerPixel[1])]; | |
| d3.select("#pathgroup").attr("transform", "translate(" + translate + ")scale(1)"); | |
| } | |
| queue() | |
| .defer(d3.json, url) | |
| .await(ready); | |
| } | |
| google.maps.event.addDomListener(window, 'load', initialize); | |
| </script> | |
| </head> | |
| <body> | |
| <svg id="thissvg"/> | |
| <div id="map-canvas"></div> | |
| </body> | |
| </html> | |