D3 Examples - D3.js and Leaflet with a simple json overlay

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
​
<style>
​
#map {
  width: 1200px;
  height: 1000px;
}
​
path {
  
  fill-opacity: .8;
  stroke: #fff;
  stroke-width: 1.5px;
}
​
path:hover {
  fill: brown;
  fill-opacity: .7;
}
​
</style>
​
<link rel="stylesheet" href="leaflet.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.5.1/leaflet.min.js"></script>
  <script src="https://d3js.org/d3.v3.min.js"></script>
​
<div id="map">
</div>
​
<script>
var t;
var map = new L.Map("map", {center: [41.3, 2.09], zoom: 12})
    .addLayer(new L.TileLayer("https://{s}.tile.cloudmade.com/1a1b06b230af4efdbb989ea99e9841af/998/256/{z}/{x}/{y}.png"));
​
var svg = d3.select(map.getPanes().overlayPane).append("svg"),
    g = svg.append("g").attr("class", "leaflet-zoom-hide");
    
d3.json("004.json", function(collection) {
  
      var transform = d3.geo.transform({point: projectPoint}),
          path = d3.geo.path().projection(transform);
      
     d3_features = g.selectAll("path")
        .data(collection.features)
        .enter().append("path");
​
      map.on("viewreset", reset);
​
      reset();
​
    function reset() {
        
          bounds = path.bounds(collection);
​
          var topLeft = bounds[0],
              bottomRight = bounds[1];
​
          svg .attr("width", bottomRight[0] - topLeft[0])
              .attr("height", bottomRight[1] - topLeft[1])
              .style("left", topLeft[0] + "px")
              .style("top", topLeft[1] + "px");
​
          g .attr("transform", "translate(" + -topLeft[0] + "," + -topLeft[1] + ")");
​
          d3_features.attr("d", path).attr('fill','blue');
      } 
​
     // Use Leaflet to implement a D3 geometric transformation.
      function projectPoint(x, y) {
        var point = map.latLngToLayerPoint(new L.LatLng(y, x));
        this.stream.point(point.x, point.y);
      }
​
  })
    
</script>    
​
​
​
​
    