Leaflet: click-to-click doesn't work when clicking on geoison overlay layer
I am using Leaflet in one of my projects and I am facing a problem which is explained below:
I have implemented a click event on the map using
map.on('click', function(e) {
console.log(e)
});
and everything works fine.
I also added a geojson layer on the map. So the problem is when I click on the geojson overlay layer (which is actually a polygon layer), the map click event is not firing. Hence my question is, what should I do so that the map click event also fires when I click the overlay layer on the map?
source to share
As stated in the comments, the event is click
tied to the map or to overlap layers, but it does not move from one to the other. You have to attach it to the desired object.
You can bind the click to the entire overlay as it inherits from L. Evented or to individual functions.
To bind it to individual functions, 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 bindPopup and bindTooltip .
Also note that as 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.
This way, you can choose to bind to each function or to a layer with similar effects depending on your use case.
source to share