score:5
Accepted answer
i combined the excellent answer here with your data structures. the key you are missing is the conversion of a google maps projection to one that d3
can use. note, i also rewrote your map path code to use d3 data binding instead of loops. here it is in all it's runnable glory:
<!doctype html>
<html>
<head>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>
<style>
#map {
height: 400px;
width: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var map = new google.maps.map(d3.select("#map").node(), {
zoom: 8,
center: new google.maps.latlng(43.469740, 10.946157),
maptypeid: google.maps.maptypeid.roadmap,
styles: [{
"stylers": [{
"saturation": -75
}, {
"lightness": 10
}]
}]
});
d3.json("https://jsonblob.com/api/1e7c9245-e4b6-11e6-90ab-914a66f2a924", function(error, data) {
if (error) throw error
//console.log(data[0].comuni[0].geometry.coordinates);
var overlay = new google.maps.overlayview();
overlay.onadd = function() {
var layer = d3.select(this.getpanes().overlaylayer).append("div")
overlay.draw = function() {
layer.select('svg').remove();
var w = 900;
var h = 600;
var color = ['#e41a1c', '#377eb8', '#4daf4a', '#984ea3', '#ff7f00', '#ffff33', '#a65628', '#f781bf', '#999999'];
var heat_color = d3.scale.linear().domain([0, 1]).range(['#b2df8a', '#ff7f00']).interpolate(d3.interpolatehcl);
var overlayprojection = this.getprojection();
// turn the overlay projection into a d3 projection
var googlemapprojection = function(coordinates) {
var googlecoordinates = new google.maps.latlng(coordinates[1], coordinates[0]);
var pixelcoordinates = overlayprojection.fromlatlngtodivpixel(googlecoordinates);
return [pixelcoordinates.x, pixelcoordinates.y];
}
var path = d3.geo.path().projection(googlemapprojection);
var svg = layer.append("svg")
.attr('width', w)
.attr('height', h)
var g = svg.selectall("g")
.data(data)
.enter()
.append("g");
g.selectall("path")
.data(function(d) {
return d.comuni;
})
.enter()
.append("path")
.attr("d", path)
.attr('class', 'state selected')
.style("fill", function(d, i) {
return color[i % color.length];
})
.style('opacity', .7);
}
}
overlay.setmap(map);
});
</script>
</body>
</html>
Source: stackoverflow.com
Related Query
- Put D3 map over google maps
- D3 graph (with links) over google maps
- how to put bird counts data in d3.js to draw bar-chart on google map
- D3 DataMaps (or jvectormap): How to put a custom object on map by coords
- Binding dc.js to Google Maps with crossfilter
- SVG not drawn outside the visible area of Google Maps
- Adding a Tooltip in D3 to a Google Maps Overlay
- Put markers to a map generated with topoJSON and d3.js
- How to plot lat/long pairs over map in D3.js
- draw paths using d3 in google maps overlay
- piechart over a map point using d3.js
- Importing JSON data to D3.js + Google Map through an internal array
- d3 graphs on google maps with link between nodes
- D3 + Google Maps + multi-point paths
- Custom mouse interaction for SVG layer in Google Maps
- Make d3 svg path clickable (in Google Maps Overlay)
- On a Google maps overlay, how do I create lines between svg elements in D3
- Add topojson on top of google map
- How can I put the Germany map on a svg in HTML? D3js
- Create Google Maps MarkerImage from SVG in DOM
- D3 + Google Maps + Paths + Labels Bug witih Panning and Zooming
- How to implement mouse wheel zoom in D3 like Google Map with overlay and Ctrl + Scroll event?
- D3.js map that automatically updates from google form’s answer sheet
- In d3.js geo map how to create a circle over the each country?
- Google Maps with D3.geo.path
- Multiple paths with d3.js and google maps API
- d3.js - draw stations and path on google map
- Google maps with d3.js (v5) overlay
- Initiate d3 map over certain area given latitude and longitude
- d3.js zoom propagation in v4: pinch zooming a map when one finger is over a child element
More Query from same tag
- How can I skip an element of an array when I perform a .data (data) in d3.js
- Is it possible for a ElasticY left axis and a defined rightYaxis domain?
- Using D3.nest() to create an array of objects by column header
- D3.js How to get value of transform attr
- D3.JS: Format as currency euro
- Force-Directed Graph, nodes are not moving and stuck in the center of the map
- Display one day with d3.slider
- geopath overlap after scale D3.js
- D3 adds extra lines between points
- How Do I iterate through d3.select(this)
- Running D3.js in clojure
- How "d3.translateExtent" coordinate works?
- D3 access nested data
- Change class of one element when hover over another element d3
- Javascript summing arrays with using d3.nest()
- How to correctly transition stacked bars in d3.js
- How do I merge two images into one?
- Run custom calculation for each frame of a transition
- How to fix a multiple brush chart in d3
- Default tick settings d3
- D3 - Creating multiple circles elements for every entry in dataset
- How do you prevent the interference of MULTIPLE SVG elements (text labels) on mouseover of a different SVG element?
- get specific word on click event for SVG Text element
- How can I get the tick values of a '.nice()'ed scale?
- D3.js Enter Animation
- What does d3.range.map do?
- Bars not hidding properly
- Displaying Relative Time on x-axis with d3.js
- Issue in generating bubblechart using the D3 in Angular2
- dimple.js - scatter-plot, series listed twice in tooltip