How to highlight features on user click in Leaflet?

Question

I'm new to Leaflet & JavaScript.

1. I made local tiles using maperitive,
2. I can draw Polygons, Polyline & Points using GeoJSON over the tiles using leaflet,
3. I can serve the both (tiles & layers) through a local server (intranet).

My problem is:

If a user click at a Point, corresponding Polygon/Polyline should get highlighted & a label should pop-up.

Assume, the Point as Bridge. If, I click on the bridge, the corresponding, Stream (Polyline) & Lake (Polygon), should be highlighted & the details about the lake / bridge (data within GeoJSON file) should pop-up.

Code

var tileUrl = './tiles/{z}/{x}/{y}.png', tile = new L.TileLayer(tileUrl, {minZoom: 9},{maxZoom: 15}), map = new L.Map('map', {layers: [tile], center: new L.LatLng(9.55175, 77.6105), zoom: 9}); var baseLayers = { };

    function onEachFeature(feature, layer) {
        if (feature.properties) {
            layer.bindPopup(" " +feature.properties.name + " "  + "<br>Affected Bridges : " + feature.properties.Br_Affected + " ");
        }
        };
        
    var Tanks = new L.geoJson(Tanks, {
        onEachFeature: onEachFeature
        });
    
    function onEachFeature1(feature, layer) {
        if (feature.properties) {
            layer.bindPopup(" " +feature.properties.name + " "  + "<br>Affected Bridges : " + feature.properties.Br_Affected + " ");
        }
        };
        
    var Feeders = new L.geoJson(Feeders, {
        onEachFeature: onEachFeature1
        });
                    
    var overlays = {
        "Tanks": Tanks,
        "Feeders": Feeders,
        };
            
        L.control.layers(baseLayers, overlays).addTo(map); 
            
        L.control.coordinates({
            position:"bottomleft",
            useDMS:true,
            labelTemplateLat:"N : {y} / ",
            labelTemplateLng:"E : {x}",
            useLatLngOrder:true
            }).addTo(map);  

        L.control.scale({position:"topleft"}).addTo(map);
        
        L.grid().addTo(map);
</script>

This gave this output

What I need is, if click on Br No. 117, this particular lake (from where the stream comes), should get highlighted.

Answer 1

In order for something to happen when you click/hover/drag on the map or a feature, such as a point or polyline, you need to add map events.

The following code shows a popup containing the lat/long location of the mouse when the user clicks on the map:

function onMapClick(e) {
    alert("You clicked the map at " + e.latlng);
}

map.on('click', onMapClick);

The leaflet quick start guide provides additional examples.

Here's another simple example from a recent app I created:

This code 'highlights' the selected layer (based on the layer ID) by setting the layer style

function highlightLayer(layerID) {
    map._layers['name'+LayerID].setStyle(highlight);
}

This bit of code is simple a variable containing the style I want the feature to possess when it is highlighted.

var highlight = {
    'color': '#333333',
    'weight': 2,
    'opacity': 1
};

You can fire this code using the events mentioned above (click, hover, etc.)