Leaflet click event unable to listen to only the map layer

Question

My leaflet project has a few user drawn shapes on it. When clicking on the shape, another element such as a sidebar will print out the stats. If I click on the map layer, the element is supposed to reset.

I tried using the map.on('click') event, but it listens to all user drawn layers as well as the map layer. I only want the event to listen to the map layer.


map.on('click', onBackgroundClick);

function onBackgroundClick(e)
{
    let type = e.layerType;

    if (type !== 'polygon' && type !== 'polyline' && type !== 'marker' && type != 'rectangle')
    {
          //reset sidebar state
    }
}

What changes do I make to the event such that it only listens to the map layer. Is there a better approach to this problem?

score 1 · Answer 1 · answered Jul 12 '19 at 11:20

1

Or you can call stopPropagation in children components, thus click events on children won't be propagated through DOM tree, but just on map they will.

answered Jul 12 '19 at 11:20

hovnozrout

121
2

score 0 · Answer 2 · answered Jul 12 '19 at 11:17

0

To add click on creation of a layer:

L.featureGroup(arr).on('click', function(){/* Your Code*/ });

You can always use on method to add event listener .

answered Jul 12 '19 at 11:17

nAviD

2,784
1
33
54

score 0 · Answer 3 · answered Jul 12 '19 at 18:04

The issue in your attempt has a similar root cause as in your other question, i.e. event.layerType is set only by Leaflet.draw plugin, only when a new feature has been created by a user.

Here a solution could consist in testing if the clicked layer is not part of your features, if the latter are all part of a Layer Group, which is probably the case if you use Leaflet.draw:

const clickedLayer = e.target;
if (!myLayerGroup.hasLayer(clickedLayer))

Another possible solution could be on the contrary to test if the clicked layer is the Tile Layer:

const clickedLayer = e.target;
if (clickedLayer === myTileLayer)

// or
if (clickedLayer instanceof L.TileLayer)

score 0 · Answer 4 · answered Sep 02 '22 at 11:51

Here is the solution I went with.

I'm not super happy with it, but it works for my case.

It basically just checks if the element clicked is of type path and if so, stop executing the map click handler body

map.on('click', function(e) {
    if (e.originalEvent.target.nodeName == 'path')
        return;
    
    // map-only click logic below
    sidebar.classList.remove('active');

Leaflet click event unable to listen to only the map layer

4 Answers4