I'm currently incorporating Mapbox GL into my Vue project using VueMapbox (0.4.1).
<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>
Upon initial load, everything functions correctly:
https://i.sstatic.net/x30jF.jpg
However, when navigating to a different pseudo-route (e.g., from /#/Map to /#/Profile and back), some specified map layers such as roads and city names are no longer rendered, showing default layers instead. Additionally, the map fails to update to any changes in the mapStyle URL, despite using mapStyle.sync in the template.
https://i.sstatic.net/kFuVC.jpg
Refreshing the browser reinstates the layers properly since the entire app is loaded from scratch, but this workaround is not an ideal solution.
If you have any suggestions or ideas, they would be greatly appreciated.