1

I'm trying to build up a dynamic map with leaflet that changes the whole map visualization as you click it's features. (The set of colors will depend on which feature will be clicked)

I can make it happen if I type the feature's name on the code (by changing the "control" variable), but having some issues on getting the feature's name by clicking on it.

What DOES work:

        var districtsLayer;
        control = 'Guaratiba';
        function highlightFeature(e){
            var layer = e.target;
            layer.setStyle(
                {
                    weight : 5,
                    color : 'black',
                    fillColor : 'yellow',
                    fillOpacity : 0.7
                }
            );
            if(!L.Browser.ie && !L.Browser.opera){
                layer.bringToFront();
            }
        }

        function resetHighlight(e){
            districtsLayer.resetStyle(e.target);
        }

        function zoomToFeature(e){
            map.fitBounds(e.target.getBounds());
        }

        function districtsOnEachFeature(feature, layer){
            layer.bindLabel(feature.properties.NM_BAIRRO.toString(), {noHide: true});
            layer.on(
                {
                    mouseover : highlightFeature,
                    mouseout : resetHighlight,
                    click : zoomToFeature
                }
            );
        }

        function getDistrictColor(popEst){
            if(popEst > 0.80){
                return 'yellow';
            }else if(popEst>0.6){
                return 'green';
            }else if(popEst>0.4){
                return 'yellowgreen';
            }else if(popEst > 0.2){
                return 'turquoise';
            }else if(popEst>0){
                return 'paleturquoise';
            }else{
                return 'white';
            }
        }

        function districtsStyle(feature){
            return {
                fillColor : getDistrictColor(feature.properties[control]),
                weight : 1,
                opacity : 0.5,
                color : 'black',
                dashArray : 3,
                fillOpacity : 0.7
            }
        }

        var map = L.map('map').setView([-22.927, -43.438], 10);

        var googleLayer = new L.Google();
        map.addLayer(googleLayer);

        var googleRoadmapLayer = new L.Google('ROADMAP');
        map.addLayer(googleRoadmapLayer);

        districtsLayer = L.geoJson(
            districts,
            {
                style : districtsStyle,
                onEachFeature : districtsOnEachFeature
            }
        ).addTo(map);
        //map.fitBounds(districtsLayer.getBounds());

        var legend = L.control({position : 'bottomright'});
        legend.onAdd = function(map){
            var div = L.DomUtil.create('div', 'legend');
            var labels = [
                "x > 0.8",
                "x > 0.6",
                "x > 0.4", 
                "x > 0.2", 
                "x > 0",
                "x = 0"
            ];
            var grades = [0.8001, 0.6001, 0.4001, 0.2001, 0.01, 0];
            div.innerHTML = '<div><b>Legend</b></div>';
            for(var i = 0; i < grades.length; i++){
                div.innerHTML += '<i style="background:' 
                + getDistrictColor(grades[i]) + '">&nbsp;&nbsp;</i>&nbsp;&nbsp;'
                + labels[i] + '<br />';
            }
            return div;
        }
        legend.addTo(map);

        var baseMaps = {
                'Google Roadmap' : googleRoadmapLayer, 
                'Google' : googleLayer
        };
        var overlayMaps = {
                'Bairros' : districtsLayer, 
        };
        L.control.layers(baseMaps, overlayMaps).addTo(map);
    </script>
</body>

If I change the "control" variable to another district's name (which is stored as NM_BAIRRO property), I get what I want.

So I set

control = ''

and tried to replace the zoomOnFeature function (won't really need this):

            function getName(e){
            control = e.target.feature.properties.NM_BAIRRO.toString();
        }

        function districtsOnEachFeature(feature, layer){
            layer.bindLabel(feature.properties.NM_BAIRRO.toString(), {noHide: true});
            layer.on(
                {
                    mouseover : highlightFeature,
                    mouseout : resetHighlight,
                    click : getName
                }
            );
        }

But it doesn't seem to refresh the whole map visualization or even getting what I really want at all.

How do I modify the click function to get the feature's name?

  • Apparently this change works, but you have to move your mouse through the other features to update them. lol – Eduardo Fernandes Aug 7 '17 at 16:33

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.