How can I stop a map click event from firing when clicking on a layer?

Question

I have a click event that fires when clicking on the map. However, I also have a separate event when clicking on a marker layer. Is it possible to stop the map click event from firing when I click on a marker?

The map click event:

map.on('click', function (e) {
    if (isAddingLocations) {
        console.log(e.lngLat);
        $('#formtable').modal('show');
        clickCoords = e.lngLat.toArray();
        document.getElementById("latitudef").value = String(clickCoords[1])
        document.getElementById("longitudef").value = String(clickCoords[0]);
    }
});

The marker click event:

map.on("click", "quebec", function (e) {
    map.getCanvas().style.cursor = 'pointer';
    var location = e.features[0].properties.location;
    var province = e.features[0].properties.province;
    var link = e.features[0].properties.link;
    var coordinates = e.features[0].geometry.coordinates.slice();

    timeadded = e.features[0].properties.timeadded;

    document.getElementById("location").innerHTML = location + ", " + province;
    document.getElementById("link").innerHTML = '<a class="btn btn-info btn-lg" href="' + link + '"target="_blank" role="button">More Info</a>';
    document.getElementById("latitudee").innerHTML = coordinates[1];
    document.getElementById("longitudee").innerHTML = coordinates[0];
    document.getElementById("locatione").innerHTML = location;
    document.getElementById("provincee").innerHTML = province;
    document.getElementById("linke").innerHTML = link;
            
    if (isAddingLocations) {
        $('#formedit').modal('show');
    }
    else {
        sidedivsize_toggle(sdiv3, sdiv1, sdiv2);
    }
});

I was thinking maybe there could be a "not 'quebec'" expression or something in the layer parameter. Or perhaps a if the second event fires prevent the first one. Not sure how one could do any of those things. And of course, any other solution is welcome.

user12335400 · Accepted Answer · 2022-07-14 10:27:09Z

4

Found a work around in MB github if anyone else comes across this. https://github.com/mapbox/mapbox-gl-js/issues/9875

Essentially though, we stop the click event from doing anything as it bubbles up the dom chain from the Map Layer, to the Map. Example :

map.on('click', 'points', function (e) {
    console.log('clicked on layer', e);
    e.clickOnLayer = true;
});
                
map.on('click', function (e) {
    if (e.clickOnLayer) {
        return;
    }
    console.log('map clicked', e);
});

answered Jul 14, 2022 at 10:27

user12335400

415 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

miloth Over a year ago

This did the trick for me.

Steve Bennett · Accepted Answer · 2021-07-08 10:29:37Z

0

There are probably various solutions to this issue. One solution is the clickOneLayer function of Map-GL-Utils which fires different callbacks depending on whether a layer was clicked or whether a click missed everything.

answered Jul 8, 2021 at 10:29

Steve Bennett

130k45 gold badges188 silver badges247 bronze badges

Comments

Uros Randelovic · Accepted Answer · 2023-04-08 00:50:04Z

0

Dk if it's an answer to this one, but having a nested inside of a adding e.originalEvent.stopPropagation(); to the onClick of the solved it.

answered Apr 8, 2023 at 0:50

Uros Randelovic

6657 silver badges7 bronze badges

Comments

Max Izrin · Accepted Answer · 2024-07-03 08:38:26Z

I had the same issue with MapLibre, which is a fork of MapBox, so this should work.

When registering multiple "on click" events, it's important to note that the event is only created once, it's the same object that will be passed to all listeners.
We can take advantage of this.

You can add a variable to the event, indicating it has been consumed.
event.used = true for example.
For those using typescript, just cast to any first.
(event as any).used = true.
Then you can check for this variable when handling events, and exit early if the variable is set.

map.on("click", layer, (event) => {
    if (event.used)
        return;

    // Handle the event.

    // Mark the event as consumed.
    event.used = true;
}

PS: while used is not a variable in the event object, it's better to call this kind of variable something that could never be added later, for compatibility reasons, like my_api_used_event.

Collectives™ on Stack Overflow

How can I stop a map click event from firing when clicking on a layer?

4 Answers 4

1 Comment

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Related