0

I would like to highlight different areas on a choropleth map when the mouse over the legend using Leaflet, but my code is not working:

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>
        Population Density in Honduras, 2020;
        font: 14px/30px Avenir Book, Helvetica, sans-serif;
    </title>
    <!-- Leaflet -->
    <link rel="stylesheet" href="lib/leaflet/leaflet.css" />
    <script src="lib/leaflet/leaflet.js"></script>
    <script src="data/ca1.geojson"></script>
    <script src="data/muni3.geojson"></script>
    <style type="text/css">
        #map {height:800px;}
        .legend {
            padding: 6px 8px;
            font: 14px/30px Avenir Book, Helvetica, sans-serif;
            background: white;
            background: rgba(255,255,255,0.2);
            box-shadow: 0 0 15px rgba(0,0,0,0.1);
            border-radius: 2px;
            }
        .legend i {

            width: 2em;
            height: 2em;
            float: left;

            }

    </style>
</head>
<body>
    <h1>Population Density in Honduras, 2020</h1>
    <div id="map"></div>
    <script>

        var test, highlighted_feature;

        var map = L.map('map').setView([43.8476, 18.3564], 20);



        function getMuni3Color(Densidad){
            if(Densidad>109){
                return '#005a32';
            }else if(Densidad>84){
                return '#238b45';
            }else if(Densidad>69){
                return '#41ab5d';
            }else if(Densidad>56){
                return '#74c476';
            }else if(Densidad>45){
                return '#a1d99b';
            }else if(Densidad>34){
                return '#c7e9c0';
            }else if(Densidad>24){
                return '#e5f5e0';
            }else if(Densidad>2){
                return '#f7fcf5';
            }else{
                return '#f7fcf5';
        }
    }   

        function ca1Style(feature){
            return {
                fillColor:'beige',
                weight:0.1,
                opacity:1,
                color:'white',
                dashArray:0,
                fillOpacity:0.7
            }
        }

        function muni3Style(feature){
            return {
                fillColor:getMuni3Color(feature.properties.Densidad),
                weight:0.5,
                opacity:1,
                color:'white',
                dashArray:0,
                fillOpacity:0.7
            }
        }

        function highlightFeature(e) {
            var layer = e.target || e;

            layer.setStyle({
                weight: 5,
                color: '#2',
                dashArray: '',
                fillOpacity: 0.7
              })

            if (!L.Browser.ie && !L.Browser.opera) {
                layer.bringToFront();
            }
        }   

        var geojson;

        var ca1Layer = L.geoJson(
            ca1,
            {style:ca1Style}
        ).addTo(map);

        var muni3Layer = L.geoJson(
            muni3,
            {
                style:muni3Style
                }
        ).addTo(map);
        map.fitBounds(muni3Layer.getBounds());

        function resetHighlight(e) {
            geojson.resetStyle(e.target || e);
        }

        function onEachFeature(feature, layer) {
          layer._polygonId = feature.id;
          layer.on({
            mouseover: highlightFeature,
            mouseout: resetHighlight
          });
        }

        geojson = L.geoJson(muni3Data, {
          style: style,
          onEachFeature: onEachFeature
        }).addTo(map);

        map.attributionControl.addAttribution('Densidad data <a href="muni3">muni3</a>');


        var legend = L.control({position : 'bottomright'});
        legend.onAdd = function(map){
            var div = L.DomUtil.create('div', 'legend');
            var labels = [
                "109 - 602", 
                "84 - 108", 
                "69 - 83", 
                "56 - 68",
                "45 - 55",
                "34 - 44",
                "24 - 33",
                "2 - 23"]

            var grades = [2, 25, 35, 46, 57, 70, 85, 110],
            from, to, span, color, text;



            div.innerHTML = '<div><b>Population Density</b></div>';
            for(var i=0; i<grades.length; i++){
                div.innerHTML += '<i style="background:'
                from = grades[i]; 
                to = grades[i + 1];




                span = document.createElement("span");
                span.classList.add("legendItem");
                span.dataset.from = from;
                span.dataset.to = to;

                color = document.createElement("i");
                color.style.background = getMuni3Color(from + 1);

                text = document.createTextNode(from + (to ? '-' + to : '+'));

                span.appendChild(color);
                span.appendChild(text);

                span.addEventListener("mouseover", function (event) {
                    var span = event.currentTarget,
                        from = span.dataset.from,
                        to = span.dataset.to,
                        above = to === "undefined";

                    geojson.eachLayer(function (layer) {
                        var Densidad = layer.feature.properties.Densidad;
                        if (Densidad >= from && (above || Densidad < to)) {
                            highlightFeature(layer);
    }
  });
});

                span.addEventListener("mouseout", function () {
                    geojson.eachLayer(resetHighlight);
});

                div.appendChild(span);
                div.appendChild(document.createElement("br"));





        }
            return div;
        };
        legend.addTo(map);

    </script>
</body>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.