Storing markers in array messes up map layout

[Jones-S]

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:

Instead of

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

[timvan]

I also have this exact problem. As soon you add markers to an array, mapbox map craps itself. Very weird.

For me, I want loop over all markers to get their long/lat coordinates and create lines between them.

[phegman]

Just released v2 of this package, please upgrade and see if that fixes your issue

[omejiasq]

Hi Phegman, i have the same issue. I have an application with vue js and mapbox, and the maps work well for me in windows, but when I upload the development to a server in centos 7, with the same version of vue-mapbox-gl and everything the same, the map turns gray when a new marker is automatically added. I already upgraded to version 2 of vue-mapbox-gl but I have the same problem. How can i solve this?

[vabe44]

@omejiasq @phegman I had the same issue. This solution didn't work:

created() {
  this.map = null // here we define map as non-reactive
},

methods: {
  initMap(map) {
    this.map = map
  }
}

Neither did this one:

{
  map: null,
  methods: {
    initMap(map) {
      this.$options.map = map
  }
}

Only this fixed it:

initMap(map) {
  map._isVue = true
  this.map = map
}