[GIS] How to highlight features on user click in Leaflet

leaflet

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.

Hope I explained my problem. Kindly help.

As suggested by underdark, posting the code here,

Code

<script src="./src/leaflet.js"></script>
<script src="./src/L.Control.MousePosition.js"></script>
<script src="./src/leaflet.label.js"></script>
<script src="./src/Leaflet.Coordinates-0.1.3.min.js"></script>
<script src="./src/L.Grid.js"></script>
<script src="./src/Tanks.js"></script>
<script src="./src/Feeders.js"></script>
<script>
    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.

Thanks..

Best Answer

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

Related Question