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.
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.