Search code examples
javascriptvue.jsmapboxmapbox-gl

Map layers do not render again past initial load

I am using VueMapbox (0.4.1) to utilize Mapbox GL in a Vue project.

<template>
  <MglMap
    :accessToken="accessToken"
    :mapStyle.sync="mapStyle"
    :repaint="true"
    @load="onMapLoaded">
    <MglMarker
      :coordinates="someCoordinates"
      class="map-marker-wrapper">
      <div
        slot="marker"
        class="map-marker">
      </div>
    </MglMarker>
  </MglMap>
</template>

<script>
import Mapbox from 'mapbox-gl'
import { MglMap, MglMarker } from 'vue-mapbox'
import * as MAP from '@/constants/map'

// Vue-Mapbox documentation: https://soal.github.io/vue-mapbox/guide/basemap.html#adding-map-component

export default {
  name: 'Map',
  components: {
    MglMap,
    MglMarker
  },
  props: {
    someCoordinates: {
      type: Array,
      required: true
    },
    darkMode: {
      type: Boolean,
      required: true
    }
  },
  data () {
    return {
      accessToken: MAP.ACCESS_TOKEN,
      mapbox: null,
      map: null,
      actionsDispatcher: null
    }
  },
  computed: {
    mapStyle () {
      return this.darkMode ? MAP.COLOR_PROFILES.DARK : MAP.COLOR_PROFILES.LIGHT
    }
  },
  created () {
    this.mapbox = Mapbox
  },
  methods: {
    async onMapLoaded (event) {
      this.map = event.map
      this.actionsDispatcher = event.component.actions
    
      await this.actionsDispatcher.flyTo({
        center: this.someCoordinates
      })
    }
  }
}
</script>

On the first load, everything works as expected:

Correct Map

But if I move to a different pseudo-route (say from /#/Map to /#/Profile and back), some of the map layers specified by my mapStyle (roads, city names,..) are not rendered anymore (default layers instead). The map also stops honoring any change of the mapStyle url, even when I specify mapStyle.sync in my template.

Incorrect map

If I hit the browser's reload button it loads the layers as expected as the entire app is reloaded from scratch, but I unfortunately cannot afford to do this by default.

Any ideas are greatly appreciated.

Solution

  • I found a solution, in the example of vue-mapbox, the variable map (this.map) is set by "event.map" which causes an error because the card is not refreshed afterwards.

    In my case i just remove that (this.map = event.map) in my onMapLoaded function and this is great.

    Have a good day.