10

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.

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

1 Answer 1

18

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

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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