D3 Examples - Census reporter GeoJSON tiles

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
<style>
  html, body, #map {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
  }
  .menu-ui {
    position:absolute;
    top:10px;
    right:10px;
    z-index: 9;
  }
  .reference-pane {
    pointer-events: none;
  }
</style>
    <title>Example of using Census Reporter GeoJSON tiles on your own maps.</title>
</head>
<body>
<div id='coverageList' class='menu-ui'>
    <select id="sumlev-picker">
        <option> -- pick a summary level -- </option>
    </select>
</div>
<div id="map"></div>
<script src='https://api.tiles.mapbox.com/mapbox.js/v2.1.6/mapbox.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox.js/v2.1.6/mapbox.css' rel='stylesheet' />
<script src="//cdn.jsdelivr.net/g/jquery@1.11.1,underscorejs"></script>
<script src='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-hash/v0.2.1/leaflet-hash.js'></script>
<script src="cr-leaflet.js"></script>
<script type="text/javascript">
    // make it big
​
    var sumlevs = [
        { 'level': '020', 'name': 'region', zoom: 4 },
        { 'level': '030', 'name': 'division', zoom: 4 },
        { 'level': '040', 'name': 'state', zoom: 4 },
        { 'level': '050', 'name': 'county', zoom: 7 },
        { 'level': '060', 'name': 'county subdivision', zoom: 7 },
        { 'level': '140', 'name': 'census tract', zoom: 10 },
        { 'level': '150', 'name': 'block group', zoom: 15 },
        { 'level': '160', 'name': 'place', zoom: 9 },
        { 'level': '170', 'name': 'consolidated city' },
        { 'level': '230', 'name': 'Alaska native regional corporation' },
        { 'level': '250', 'name': 'native area', zoom: 4 },
        { 'level': '251', 'name': 'tribal subdivision', zoom: 4 },
        { 'level': '256', 'name': 'tribal tract', zoom: 4 },
        { 'level': '310', 'name': 'metro (CBSA) area', zoom: 7 },
        { 'level': '314', 'name': 'metropolitan division', zoom: 4 },
        { 'level': '330', 'name': 'combined statistical area', zoom: 4 },
        { 'level': '335', 'name': 'combined NECTA', zoom: 4 },
        { 'level': '350', 'name': 'NECTA', zoom: 4 },
        { 'level': '364', 'name': 'NECTA division', zoom: 4 },
        { 'level': '400', 'name': 'urban area', zoom: 7 },
        { 'level': '500', 'name': 'congressional district', zoom: 7 },
        { 'level': '610', 'name': 'state house (upper)', zoom: 7 },
        { 'level': '620', 'name': 'state house (lower)', zoom: 7 },
        { 'level': '795', 'name': 'PUMA', zoom: 8  },
        { 'level': '860', 'name': 'ZIP code', zoom: 12  },
        { 'level': '950', 'name': 'school district (elementary)', zoom: 10  },
        { 'level': '960', 'name': 'school district (secondary)', zoom: 10  },
        { 'level': '970', 'name': 'school district (unified)', zoom: 10  }
    ]
​
    var div = document.getElementById("map");
    div.style.height = (window.innerHeight) + "px";
​
    L.mapbox.accessToken = 'pk.eyJ1IjoiZmFyYWRheTIiLCJhIjoiTUVHbDl5OCJ9.buFaqIdaIM3iXr1BOYKpsQ';
    var map = L.mapbox.map('map','faraday2.cbab4841')
    map.setView([39.833333, -98.583333], 5);
​
    var defaultStyle = {
            "clickable": true,
            "color": "#00d",
            "fillColor": "#ccc",
            "weight": 1.0,
            "opacity": 0.3,
            "fillOpacity": 0.3,
        };
​
​
    var makeLayer = function(sumlev) {
​
        var geojsonTileLayer = new CensusReporter.SummaryLevelLayer(sumlev);
​
        return geojsonTileLayer;
    }
​
    _.each(sumlevs,function(l) { 
        $('<option>').val(l.level).text(l.level + " - " + l.name).appendTo('#sumlev-picker');
    });
​
​
    $("#sumlev-picker").change(function(e) { 
        var sumlev = _.findWhere(sumlevs,{level: $(e.target).val()})
        if (sumlev) {
            if (sumlev.zoom) {
                map.setZoom(sumlev.zoom);
            }
            if (typeof sumlev.layer == 'undefined') {
                sumlev.layer = makeLayer(sumlev.level);
            }
            _.each(sumlevs,function(sl) { 
                if (sl.layer && map.hasLayer(sl.layer)) {
                    map.removeLayer(sl.layer);
                }
            })
            map.addLayer(sumlev.layer);
        }
    });
    
    var referencePane = L.DomUtil.create('div', 'reference-pane', map.getPanes()
      .mapPane);
    var referenceLayer = new L.mapbox.tileLayer('faraday2.2d480026')
      .addTo(map);
    referencePane.appendChild(referenceLayer.getContainer());
    referenceLayer.setZIndex(7);
    var hash = L.hash(map);
​
</script>
</body>
</html>
    