Markers and storing map-related objects in vue component data break map layout

[Jones-S]

Hi

I am trying to use mapbox with mapbox gl to add markers and lines. I also would like to save a reference of the map in the data object, like you mention here: https://github.com/phegman/vue-mapbox-gl/issues/23

This alone works, but I am also requiring mapbox gl to add markers. Like mentioned here: https://github.com/phegman/vue-mapbox-gl/issues/47 together with nuxt.

Somehow this

methods: {
  initMap(map) {
    this.map = map
    const mapboxgl = require('mapbox-gl/dist/mapbox-gl')
    this.addMarkers(mapboxgl, map)
  },

will again cause the map to look very weird. (It loads ok initially but then it switches to this grey overlay: https://user-images.githubusercontent.com/7059580/52290750-0f861700-2971-11e9-92ac-bc45accde1f3.png)

I also mentioned this behaviour in issue #57. There I wanted to save the markers in the data object.

So somehow this is all a bit weird, but I don't have a clue where to start. If anyone has a hint for me, I would be very thankful.

Cheers

[soal]

There isn't much to do. Just don't store Map object in data, vuex state or any reactive property. When you make Map reactive, Vue adds getters and setters and it can break internal Mapbox machinery. Instead, you can store Map as non-reactive, for example:

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

methods: {
  initMap(map) {
    this.map = map
    const mapboxgl = require('mapbox-gl/dist/mapbox-gl')
    this.addMarkers(mapboxgl, map)
  }
}

Similar issue with VueMapbox library.

[Jones-S]

Ok thanks. I moved away from vue-mapbox anyway. It was too rigid for my use-case.

[Tofandel]

Had the same issue and couldn't figure out why.. The sea would disappear for a grey background

Would be nice to document this

To make the map non reactive you should do:

{
  map: null,
  methods: {
    initMap(map) {
      this.$options.map = map
      const mapboxgl = require('mapbox-gl/dist/mapbox-gl')
      this.addMarkers(mapboxgl, map)
  }
}

Oddly enough this issue didn't happen with the library @studiometa/vue-mapbox-gl which has the same usage