How to differentiate between clicking on map and clicking on a marker?

[misterfresh]

I'd like to have a popup open when clicking on a marker (with info specific to that marker).
I see that the popup example displays a popup when clicking on the map.
How to differentiate between the two events "clicking on the map" and "clicking on a marker' ?

[tmcw]

Currently not - supporting this kind of behavior is part of the previous ticket #656

[3zzy]

Was this feature added? I could find examples where clicking on 'symbol' and 'cluster' worked but still unsure how to detect click on markers.

[armved]

+1

[AshwinTayson]

Any update on this?

[asheemmamoowala]

Example: https://docs.mapbox.com/mapbox-gl-js/example/custom-marker-icons/

[Alex-Horlock]

For those of you who get here wondering how on earth Mapbox GL JS (which seems to be awesome) could not implement a 'click' event like I was... turns out the solution is actually pretty nice and you just need to get the markers 'element' and listen to that click event e.g.

marker.getElement().addEventListener('click', function (e) { console.log("marker clicked"); });

Cheers :)

[renatoniola]

For those of you who get here wondering how on earth Mapbox GL JS (which seems to be awesome) could not implement a 'click' event like I was... turns out the solution is actually pretty nice and you just need to get the markers 'element' and listen to that click event e.g.

marker.getElement().addEventListener('click', function (e) { console.log("marker clicked"); });

Cheers :)

My concern about your solution is that it's going to apply one event handler for each marker and if there are lots of them the page might become too slow

[ibushah]

marker.getElement().addEventListener('click', function (e) { console.log("marker clicked"); });

u just saved me from depression, love you man <3 <3 <3

[eusebiu]

                    var el = document.createElement('div');
                    el.innerHTML = `<label>some text</label>`;

                    const marker = new mapboxgl.Marker()
                      .setLngLat({ lng: longitude, lat: latitude })
                      .setPopup(new mapboxgl.Popup().setDOMContent(el))
                      .addTo(that.map);

                    marker.getElement().addEventListener('click', (e) => { marker.togglePopup(); e.stopPropagation(); }, false);

[crhistianramirez]

My use case is different in that I want to know when the map is clicked and the click was not on a marker. Anybody have an idea on how to differentiate?

[expdev]

My use case is different in that I want to know when the map is clicked and the click was not on a marker. Anybody have an idea on how to differentiate?

for example, you could differentiate a click on a marker from a click on a map, check the property 'map.getCanvas().style.cursor'. If it's "pointer", then it's a marker