D3 Examples - D3 + Leaflet with Auto Fit to Bounds

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  
  <link rel="stylesheet" href="https://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <!-- https://github.com/teralytics/Leaflet.D3SvgOverlay -->
  <script src="D3SvgOverlay.js"></script>
  
  <style>
    @import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600);
    * { margin: 0; }
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0;
      font-family:'Open Sans'; color: #333333; padding-top:20px;}
    #map { width: 960px; height: 335px; margin: 0;}
    .description { color:#a0a0a0; }
    .overlay-svg {  position: relative; width: 100%; height: 100%;}
    .hover-info { margin-bottom: 10px; padding: 0; height: 40px; width: 100%; }
    .hover-info, .hover-info li p, li { display:inline-block; }
    li {margin-right: 20px;}
    label { color:#a0a0a0; text-transform:uppercase;font-size:11px;margin-right:4px; }
    h1, p, .hover-info { text-align: center;}
    h1 {margin-bottom: 0.3em; color: #8C4646; }
    p {margin-bottom: 20px;}
    a {color: #F2AE72;}
  </style>
  
</head>
​
<body>
  
  <h1>Drug-Free Zones in Conway, AR</h1>
  <p class="description">Using Leaflet + D3 along with <a href="https://github.com/teralytics/Leaflet.D3SvgOverlay">D3SvgOverlay</a> to automatically fit the map's bounds to the overlay layer.</p>
  
  <ul class="hover-info">
    <li class="type"></li>
    <li class="name"></li>
  </ul>
  
  <figure id="map"></figure>
  
  <script>
    
    var map = new L.Map("map", {
      // arbitrary center/zoom, updated with data
      center: [38.754, -97.031], 
      zoom: 4
    });
​
    var baseMap = L
        .tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> &copy; <a href="https://cartodb.com/attributions">CartoDB</a>',
        subdomains: 'abcd',
        maxZoom: 19
      });
​
    baseMap.addTo(map);
    
    var hoverType = d3.select('.hover-info').select('.type'),
                hoverName = d3.select('.hover-info').select('.name');
​
    var config = {
            zoomDraw: false,
            zoomHide: true
        };
    
    var cityGeo = [],
        zoneGeo = [];
​
    var overlay = L.d3SvgOverlay(function(sel, proj) {
      
      proj.layer.options = config;
​
      var bounds = [];
      var city = sel.append('path')
        .datum(cityGeo)
        .classed('city', true)
        .attr('d', function(d) {
          bounds = proj.pathFromGeojson.bounds(d);
          return proj.pathFromGeojson(d); 
        })
        .style('fill', 'none')
        .style('stroke', '#588C7E')
        .style('stroke-width', 0);
​
      var zones = sel.selectAll('.zone')
        .data(zoneGeo);
​
      zones.enter().append('path')
        .classed('zone', true);
​
      zones
        .attr('d', proj.pathFromGeojson)
        .attr('class', 'zone')
        .attr('stroke-opacity', 0.5)
        .style('fill-opacity', 0.1)
        .style('fill', 'red')
        .style('stroke', 'red')
        .style('stroke-width', 0);
​
      var b = [proj.layerPointToLatLng(bounds[0]),
               proj.layerPointToLatLng(bounds[1])];
      map.fitBounds(b);
      var z = map.getZoom();
      map.setZoom(z + 1);
      
      // update stroke to reflect scaling
      map.on('viewreset', update);
      update();
      
      // mouse events
      zones.on('mouseenter', mouseenter);
            zones.on('mouseleave', mouseleave);
      
      function update() {
        var largestSide = Math.max(bounds[1][0] - bounds[0][0], 
                                   bounds[1][1] - bounds[0][1]) / 40;
                var zoomLevel = map.getZoom();
                city.style('stroke-width', largestSide / zoomLevel);
        zones.style('stroke-width', largestSide / zoomLevel);
      }
      
      function mouseenter() {
        d3.select(this).style('fill-opacity', 1);
​
        var props = d3.select(this).data()[0].properties;
        var t = props['amenity']
            .split('/')
            .map(function(v) {
            return v.charAt(0).toUpperCase() + v.slice(1);
          })
            .join('/');
        var n = props['name'];
        hoverType.html('<label>Type</label><p>&nbsp;' + t + '</p>');
        hoverName.html(
          n !== null ? '<label>Name</label><p>&nbsp;' + n + '</p>' : ''
        );
​
      }
​
      function mouseleave() {
        d3.select(this).style('fill-opacity', 0.1);
      }
​
    });
​
    d3.json('conway-ar.json', function(error, collection) {
      if (error) console.warn(error);
​
      cityGeo = collection.city.geometry;
      zoneGeo = collection.zones;
​
      overlay.addTo(map);
​
    });
    
  </script>
</body>
​
    