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 acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Browse other questions tagged or ask your own question.