D3 Examples - Income Deprivation Affecting Children (IDAC) Index map, West London

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
​
<style>
.info {
    padding: 6px 8px;
    font: 14px/16px Arial, Helvetica, sans-serif;
    background: white;
    background: rgba(255,255,255,0.8);
    box-shadow: 0 0 15px rgba(0,0,0,0.2);
    border-radius: 5px;
}
.info h4 {
    margin: 0 0 5px;
    color: #777;
}
​
    #map { width: 800px; height: 500px; }
.info { padding: 6px 8px; font: 14px/16px Arial, Helvetica, sans-serif; background: white; background: rgba(255,255,255,0.8); box-shadow: 0 0 15px rgba(0,0,0,0.2); border-radius: 5px; } .info h4 { margin: 0 0 5px; color: #777; }
.legend { text-align: left; line-height: 18px; color: #555; } .legend i { width: 18px; height: 18px; float: left; margin-right: 8px; opacity: 0.7; }
​
</style>
​
<head>
    <title>ICAC in West London</title>  
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css"
   integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ=="
   crossorigin=""/>
    <script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js"
   integrity="sha512-lInM/apFSqyy1o6s89K4iQUKg6ppXEgsVxT35HbzUupEVRh2Eu9Wdl4tHj7dZO0s1uvplcYGmt3498TtHq+log=="
   crossorigin=""></script>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="/js/leaflet-0.7.2/leaflet.ajax.min.js"></script>
</head>
    
​
<style>
    
    #mapid2 {height: 500px; width= 500px, margin-top: 100px}
​
</style>
​
<body>
​
     <div id="mapid2"></div>
       <script src = Data.js></script>
<script>
    
    var map = L.map('mapid2').
    setView([51.5131224, -0.21997120000003179], 12.4);
    
L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer/tile/{z}/{y}/{x}', {
    attribution: 'Tiles &copy; Esri &mdash; Esri, DeLorme, NAVTEQ',
    maxZoom: 16,
    id: 'mapbox.streets',
    accessToken: 'pk.eyJ1IjoiYnN1dGhlcnNhbiIsImEiOiJjajZuam42bGowODFtMnJxc200NHF2MmdmIn0.Uwf-3ridcbtiMFdYIWMNNw'
}).addTo(map);
​
​
    var info = L.control();
​
    info.onAdd = function (map) {
        this._div = L.DomUtil.create('div', 'info');
        this.update();
        return this._div;
    };
​
    info.update = function (props) {
        this._div.innerHTML =  (props ? '<h4>' + props.LSOA11NM + '</h4>' + 'Families in this area are in the ' + props.Decile+ 'th percentile for IDACI'
                                :'<h4>IDAC Index</h4>' + 'Hover over an area');
    };
​
    info.addTo(map);    
​
function getColor(d) {
    return d > 80  ? '#99CC00' :
           d > 60 ? 'steelblue' :
           d > 40   ? 'purple' :
           d > 20   ? 'grey' :
           d > 0   ? 'black' :
                      '#99CC00';
           
}
    
function style(feature) {
return {
        fillColor: getColor(feature.properties.Decile),
        weight: 1,
        opacity: 1,
        color: 'grey',
        dashArray: '3',
        fillOpacity: 0.7
    };
}                           
​
function highlightFeature(e) {
        var layer = e.target;
​
        layer.setStyle({
            weight: 5,
            color: '#666',
            dashArray: '',
            fillOpacity: 0.7
        });
​
        if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
            layer.bringToFront();
        }
​
        info.update(layer.feature.properties);
    }
​
    var geojson;
​
    function resetHighlight(e) {
        geojson.resetStyle(e.target);
        info.update();
    }
​
    function zoomToFeature(e) {
        map.fitBounds(e.target.getBounds());
    }
​
    function onEachFeature(feature, layer) {
        layer.on({
            mouseover: highlightFeature,
            mouseout: resetHighlight,
            click: zoomToFeature
        });
    }
​
    geojson = L.geoJson(Data, {
        style: style,
        onEachFeature: onEachFeature
    }).addTo(map);
    
​
//Add the legend    
var legend = L.control({position: 'bottomright'});
​
    legend.onAdd = function (map) {
​
        var div = L.DomUtil.create('div', 'info legend'),
            grades = [0, 20, 40, 60, 80],
            labels = [],
            from, to;
​
        for (var i = 0; i < grades.length; i++) {
            from = grades[i];
            to = grades[i + 1];
​
            labels.push(
                '<i style="background:' + getColor(from + 1) + '"></i> ' +
                from + (to ? '&ndash;' + to : '+'));
        }
​
        div.innerHTML = labels.join('<br>');
        return div;
    };
​
    legend.addTo(map);
​
</script>
​
    
</body>
    