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 enter image description here

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

• underdark: Welcome to gis.stackexchange! Please note that a good question is expected to include proof of basic research effort and - if applicable - code so far. Questions requesting code or instructions to copy&paste are generally not well received.
• dhruvil29: did you find any solution for this?
• Vishy: A friend of mine somehow linked the attribute with Microsoft dom. If any alternate easy to understand is welcome.

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.)