Description
Hi there
I have a map with about 5 markers, of which 1 is the active
one.
Now on route change I would like to update the markers to change the active
one.
First I thought of creating the marker as a vue instance to bind some store data to it. But referring to this other issue this was not really successful – at least as far as I understood.
My alternative solution was to remove all markers and add them again (I only have 5 and I just need to update the active
one).
Unfortunately If I store all markers in an array, I have a weird looking map:
data() {
return {
markers: []
}
},
...
const marker = new mapboxgl.Marker(el)
.setLngLat(point.geometry.coordinates)
.addTo(map)
this.markers.push(marker)
Adding this.markers.push(marker)
will cause the map to look like this:
Did anyone experience something like this before?
I would need an array of all markers to loop over them and remove them after a change if the binding does not work.
Like:
removeMarkers() {
this.markers.forEach(m => {
m.remove()
})
},
Preferably I would like to see a solution with the binding, but if not, I would be definitely interested in knowing what is happening with the map layout.
Thank you in advance.
Cheers