wboykinm/index.html

## index.html
<!DOCTYPE html>
<html class="ocks-org do-not-copy">
<meta charset="utf-8">
<title>D3 + Leaflet</title>
<style>

@import url(//cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.2/leaflet.css);

#map {
  width: 960px;
  height: 500px;
}

svg {
  position: relative;
}

</style>

<h1>Gutters and polys</h1>

<p id="map">

<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.2/leaflet.js"></script>
<script>

var map = new L.Map("map", {center: [37.8, -96.9], zoom: 4})
    .addLayer(new L.TileLayer("http://{s}.tile.stamen.com/watercolor/{z}/{x}/{y}.jpg"));

var svg = d3.select(map.getPanes().overlayPane).append("svg"),
    g = svg.append("g").attr("class", "leaflet-zoom-hide");

// filters go in defs element
var defs = svg.append("defs");

var filter = defs.append("filter")
    .attr("id", "places-blur")
    .attr("height", "150%");

filter.append("feGaussianBlur")
    .attr("in", "SourceAlpha")
    .attr("stdDeviation", 4)
    .attr("result", "blur");

d3.json("us-states.json", function(collection) {
  var transform = d3.geo.transform({point: projectPoint}),
      path = d3.geo.path().projection(transform);

  var feature = g.selectAll("path")
      .data(collection.features)
    .enter().append("path");

  map.on("viewreset", reset);
  reset();

  // Reposition the SVG to cover the features.
  function reset() {
    var bounds = path.bounds(collection),
        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] + ")");

    feature
      .attr("d", path)
      .attr("class","mask")
      .style("filter","url(#places-blur)")
      .style("stroke", "#999")
      .style("stroke-width", 0)
      .style("fill-opacity",0.8)
  }

  // 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>

## us-states.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              us-states.json
            
          
      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
	<!DOCTYPE html>
	<html class="ocks-org do-not-copy">
	<meta charset="utf-8">
	<title>D3 + Leaflet</title>
	<style>

	@import url(//cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.2/leaflet.css);

	#map {
	width: 960px;
	height: 500px;
	}

	svg {
	position: relative;
	}

	</style>

	<h1>Gutters and polys</h1>

	<p id="map">

	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.2/leaflet.js"></script>
	<script>

	var map = new L.Map("map", {center: [37.8, -96.9], zoom: 4})
	.addLayer(new L.TileLayer("http://{s}.tile.stamen.com/watercolor/{z}/{x}/{y}.jpg"));

	var svg = d3.select(map.getPanes().overlayPane).append("svg"),
	g = svg.append("g").attr("class", "leaflet-zoom-hide");

	// filters go in defs element
	var defs = svg.append("defs");

	var filter = defs.append("filter")
	.attr("id", "places-blur")
	.attr("height", "150%");

	filter.append("feGaussianBlur")
	.attr("in", "SourceAlpha")
	.attr("stdDeviation", 4)
	.attr("result", "blur");

	d3.json("us-states.json", function(collection) {
	var transform = d3.geo.transform({point: projectPoint}),
	path = d3.geo.path().projection(transform);

	var feature = g.selectAll("path")
	.data(collection.features)
	.enter().append("path");

	map.on("viewreset", reset);
	reset();

	// Reposition the SVG to cover the features.
	function reset() {
	var bounds = path.bounds(collection),
	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] + ")");

	feature
	.attr("d", path)
	.attr("class","mask")
	.style("filter","url(#places-blur)")
	.style("stroke", "#999")
	.style("stroke-width", 0)
	.style("fill-opacity",0.8)
	}

	// 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>