6977487 by wboykinm

index.html

<!DOCTYPE html>

<html>
<head>
<link href="//cdn.leafletjs.com/leaflet-0.6.4/leaflet.css" rel="stylesheet">
<style>
html, body, #map {
    display:block;
    width:100%;
    height:100%;
    margin:0;
    padding:0;
}
.states {
  fill: none;
  stroke: #fff;
  stroke-linejoin: round;
}

.counties :hover {
  fill: #0055ff !important;
  stroke: #0022FF;
  stroke-width:2.2px;
  stroke-linejoin: round;
}
</style>
</head>
<body>
  <div id="map"></div>
	
  <script src="//cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script>
  <script src="//d3js.org/d3.v3.min.js"></script>
  <script src="//d3js.org/d3.geo.projection.v0.min.js"></script>
  <script src="//d3js.org/topojson.v1.min.js"></script>
  <script>
  var BingLayer = L.TileLayer.extend({
   getTileUrl: function(tilePoint) {
     this._adjustTilePoint(tilePoint);
     return L.Util.template(this._url, {
       s: this._getSubdomain(tilePoint),
       q: this._quadKey(tilePoint.x, tilePoint.y, this._getZoomForUrl())
     });
   },
   _quadKey: function(x, y, z) {
     var quadKey = [];
     for (var i = z; i > 0; i--) {
       var digit = '0';
       var mask = 1 << (i - 1);
       if ((x & mask) != 0) {
         digit++;
       }
       if ((y & mask) != 0) {
         digit++;
         digit++;
       }
       quadKey.push(digit);
     }
     return quadKey.join('');
   }
 });

 var map = new L.Map(document.querySelector('#map'), {
   center: new L.LatLng(-8, 35),
   zoom: 5
 });

 var baselayer = new BingLayer('//t{s}.tiles.virtualearth.net/tiles/a{q}.jpeg?g=1398', {
   subdomains: ['0', '1', '2', '3', '4'],
   attribution: '&copy; <a href="//bing.com/maps">Bing Maps</a>'
 }).addTo(map);

 var fill = d3.scale.log().domain([10, 500]).range(["brown", "steelblue"]);

 var svg = d3.select(map.getPanes().overlayPane).append("svg"); //,
 // g = svg.append("g").attr("class", "leaflet-zoom-hide");
 d3.json("us.json", function(error, us) {
   svg.append("g").attr("class", "counties leaflet-zoom-hide").selectAll("path").data(topojson.object(us, us.objects.counties).geometries).enter().append("path").attr("d", path).style("fill", function(d) {
     return fill(path.area(d));
   });


/*d3.json("admin.json", function(collection) {
        var bounds = d3.geo.bounds(collection),
            path = d3.geo.path().projection(project);

        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 bottomLeft = project(bounds[0]),
       topRight = project(bounds[1]);

     svg.attr("width", topRight[0] - bottomLeft[0]).attr("height", bottomLeft[1] - topRight[1]).style("margin-left", bottomLeft[0] + "px").style("margin-top", topRight[1] + "px");

     g.attr("transform", "translate(" + -bottomLeft[0] + "," + -topRight[1] + ")");

     feature.attr("d", path);
   }

   // Use Leaflet to implement a D3 geographic projection.


   function project(x) {
     var point = map.latLngToLayerPoint(new L.LatLng(x[1], x[0]));
     return [point.x, point.y];
   };

   var topPane = map._createPane('leaflet-top-pane', map.getPanes().mapPane);
   var topLayer = new BingLayer('//t{s}.tiles.virtualearth.net/tiles/ho{q}.jpeg?g=700&mkt=en', {
     subdomains: ['0', '1', '2', '3', '4']
   }).addTo(map);
   topPane.appendChild(topLayer.getContainer());
   topLayer.setZIndex(7);
	</script>
</body>
</html>