传单：单击叠加的geojson图层时，地图点击事件不起作用

Question

I'm using Leaflet in one of my projects and I'm facing an issue, which is explained below:

I've implemented a click event on the map using

map.on('click', function(e) {        
    console.log(e)       
});

and everything is working fine.

I've also added a geojson layer on map. So, the problem is when I click on the overlay geojson layer (which is a polygon layer actually), the map click event not fired. Hence, my question is what should I do so that map click event also work when I click on an overlay layer on map?

Answer 1

As it's being said in the comments the click event is binded to the map or to the overlay layers but it's not bubbled from one to another. You must attach it to the desired object.

You can bind the click to the whole overlay as it inherits from L.Evented or to individual features.

To bind it to individual features check the onEachFeature section of the tutorial .

function onEnachFeature(feature, layer) {
    console.log(feature.properties);
}
L.geoJSON(geojsonFeature, {
    onEachFeature: onEachFeature
}).addTo(map);

Depending on what you are trying to achieve the the bindPopup and the bindTooltip will be useful.

Also, take into account that as the doc explains

Events are propagated to the FeatureGroup, so if the group has an event handler, it will handle events from any of the layers. This includes mouse events and custom events.

So you can choose to bind to each feature or to the layer with similar effects depending on your use case.