I am working on a choropleth map, I would like to build an interactive legend, so when mouse down the legend the correspondent objetcs on the map would turn on. Any suggestions?

<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>
        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
            }
        }



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

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


        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 = [110, 85, 70, 57, 46, 35, 25, 2];
            div.innerHTML = '<div><b>Population Density</b></div>';
            for(var i=0; i<grades.length; i++){
                div.innerHTML += '<i style="background:'
                + getMuni3Color(grades[i]) + '">&nbsp;&nbsp;</i>&nbsp;&nbsp;'
                + labels[i] + '<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.