D3 Examples - D3 + Leaflet (fork mbostock)

xxxxxxxxxx
 
<!DOCTYPE html>
<title>D3 + Leaflet (fork from bost.ocks.org/mike/leaflet/)</title>
<style>
  #map { width: 960px; height: 500px;}
  path { fill: #000; fill-opacity: .2; stroke: #fff; stroke-width: 1.5px;}
  path:hover { fill: brown;fill-opacity: .7;}
</style>
<p id="map"><p>
<script src="https://d3js.org/d3.v2.min.js?2.9.3"></script>
<script src="leaflet.js"></script>
<link rel="stylesheet" href="leaflet.css" />
<script>
var map = new L.Map("map")
    .setView(new L.LatLng(37.8, -96.9), 4)
    .addLayer(new L.TileLayer("https://{s}.tile.stamen.com/toner/{z}/{x}/{y}.png"))
​
/* Initialize the SVG layer */
map._initPathRoot()     
​
/* We simply pick up the SVG from the map object */
var svg = d3.select("#map").select("svg"),
    g = svg.append("g");
​
/* Define the d3 projection */
var path = d3.geo.path().projection(function project(x) {
    var point = map.latLngToLayerPoint(new L.LatLng(x[1], x[0]));
    return [point.x, point.y];
  });
​
/* Load and project/redraw on zoom */
d3.json("us-states.json", function(collection) {
  var feature = g.selectAll("path")
      .data(collection.features)
    .enter().append("path")
    .attr("d", path);
​
  map.on("viewreset", function reset() {
    feature.attr("d",path)
  })
});
</script>
    