CODEWITHSUNDEEP
javascriptmapboxmapbox-gl-jsmapbox-gl
Fahd16
Fahd16

Reputation: 13

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

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.

Upvotes: 1

Views: 2053

Answers (4)

Max Izrin
Max Izrin

Reputation: 955

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.

Upvotes: 0

Uros Randelovic
Uros Randelovic

Reputation: 515

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.

Upvotes: 0

user12335400
user12335400

Reputation: 41

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);
});

Upvotes: 4

Steve Bennett
Steve Bennett

Reputation: 126045

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.

Upvotes: 0

Related Questions