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,


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

            labelTemplateLat:"N : {y} / ",
            labelTemplateLng:"E : {x}",



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
    Jan 18 '14 at 11:06
  • 1
    did you find any solution for this?
    – dhruvil29
    Apr 27 '20 at 12:12
  • A friend of mine somehow linked the attribute with Microsoft dom. If any alternate easy to understand is welcome.
    – Vishy
    Apr 28 '20 at 13:12

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

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

  • @ Radar : All these codes highlight only where the mouse is clicked. I need, when a user clicks at one place (say a point), a polygon / polyline at another place should be highlighted. As given in my question, if the user click on a bridge, the lake from where water flows to this bridge should be highlighted.
    – Vishy
    Jan 18 '14 at 1:49
  • 1
    You'll have to link your features somehow - an attribute would be the easiest way (e.g. all features associated with a specific bridge get a 'bridgeID' of say, 3). This is more of a logic handling issue than a technical problem. If you're already using GeoJSON you're 90% of the way there.
    – Radar
    Jan 18 '14 at 19:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.