D3 Examples - Italian GDP per capita

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
    <title>PIL pro capite delle regioni italiane</title>
    <meta charset="utf-8" />
​
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
​
    <link rel="stylesheet" href="leaflet.css" />
​
    <style>
        #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>
<body>
    <div id="map"></div>
​
    <script src="leaflet.js"></script>
​
    <script type="text/javascript" src="regioni.js"></script>
    <script type="text/javascript">
​
        
​
​
​
        var map = L.map('map').setView([43, 11], 5);
        
​
        
        var osmUrl='https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
        var osmAttrib='Map data © <a href="https://openstreetmap.org">OpenStreetMap</a> contributors';
        var osm = new L.TileLayer(osmUrl, {minZoom: 5, maxZoom: 12, attribution: osmAttrib});
​
​
        var Stamen_TonerBackground = L.tileLayer('https://{s}.tile.stamen.com/toner-background/{z}/{x}/{y}.png', {
        attribution: 'Map tiles by <a href="https://stamen.com">Stamen Design</a>, <a href="https://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> &mdash; Map data &copy; <a href="https://openstreetmap.org">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
        subdomains: 'abcd',
        minZoom: 0,
        maxZoom: 20
        }).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 = '<h4>Pil pro capite per regione</h4>' +  (props ?
                '<b>' + props.name + '</b><br />' + props.pil + ' numero indice su base Italia = 100'
                : 'Seleziona una regione') ; 
        };
​
        info.addTo(map);
​
​
        // get color depending on pil value
        function getColor(d) {
            return d > 114  ? '#CB181D' :
                   d > 100   ? '#FB6A4A' :
                   d > 70   ? '#FCAE91' :
                   d > 0   ? '#FEE5D9' :
                              '#cccccc';
        }
//Qui inposta i colori della choropleth in base alla proprietà pil che si trova nel file json delle regioni
        function style(feature) {
            return {
                weight: 2,
                opacity: 1,
                color: 'white',
                dashArray: '3',
                fillOpacity: 0.7,
                fillColor: getColor(feature.properties.pil)
            };
        }
​
        function highlightFeature(e) {
            var layer = e.target;
​
            layer.setStyle({
                weight: 5,
                color: '#666',
                dashArray: '',
                fillOpacity: 0.7
            });
​
            if (!L.Browser.ie && !L.Browser.opera) {
                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(statesData, {
            style: style,
            onEachFeature: onEachFeature
        }).addTo(map);
​
        map.attributionControl.addAttribution('Population data &copy; <a href="https://census.gov/">US Census Bureau</a>');
​
​
        var legend = L.control({position: 'bottomright'});
​
        legend.onAdd = function (map) {
​
            var div = L.DomUtil.create('div', 'info legend'),
                grades = [0, 70, 100, 114],
                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>
</html>
    