Way to fire marker click OR map click

[NCLlamas]

I'm not sure if this issue is more with Mapbox it's self or the Vue implementation but any help would be appreciated.

I have a map rendering markers from an array of items, and when one of the markers is clicked on the map centers and zooms in on that location. I want to be able to set up the map so that, when someone clicks anywhere on the map that is not a marker, the map basically resets to it's original center/zoom. My problem is that the click event on the MglMap component always fires, even when the Marker click is fired. Is there a way to utilize the map.once() (https://docs.mapbox.com/mapbox-gl-js/api/events/) to accomplish this or another suggestion? This was fairly straightforward to implement with the Google Maps API so I don't see why it wouldn't be possible with mapbox.

Thanks!

Package Info
"mapbox-gl": "^0.53.1"
"vue-mapbox": "^0.4.1"
"nuxt": "^2.14.12"
"vue": "^2.6.12"

[hytechbarett]

Disclaimer: I haven't tried vue-mapbox but I have experienced your issue while using Mapbox.

If I understand correctly you're saying that when you click on top of a marker the click event is triggered on both the marker and the basemap but you just want it to fire off on the marker.

using queryRenderedFeatures()

map.on('click', function(e) {

  // wrap your map onclick logic inside an if statement that checks wether a feature was in the way of the click
  if( map.queryRenderedFeatures(e.point).length == 0 ) {
    // basemap was clicked with nothing in the way
  } else {
    // basemap was clicked but a feature was in the way
  }

}