Open NCLlamas opened 3 years ago
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
}
}
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"