How to highlight features on user click in Leaflet?

Question

I'm new to Leaflet & JavaScript.

I made local tiles using maperitive,
I can draw Polygons, Polyline & Points using GeoJSON over the tiles using leaflet,
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.

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. — underdark
– underdark, Commented Jan 18, 2014 at 11:06
A friend of mine somehow linked the attribute with Microsoft dom. If any alternate easy to understand is welcome. — Vishy
– Vishy, Commented Apr 28, 2020 at 13:12

Radar · Accepted Answer · 2014-01-18 01:33:23Z

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

Stack Exchange Network

How to highlight features on user click in Leaflet?

1 Answer 1

Hot Network Questions

How to highlight features on user click in Leaflet?

1 Answer 1

Related

Hot Network Questions