My current challenge involves using Mapbox with Vue.js. Despite my efforts, I continue to encounter the following error message when attempting to add a geojson layer to the map:
Uncaught (in promise) Error: Style is not done loading
I have experimented with different approaches but have not found a lasting solution. The main issue I face is ensuring the correct order of execution so that the layer is consistently added without encountering errors. In an attempt to address this, I have wrapped the function in a Javascript Promise and included a setTimeout()
as a workaround to allow time for the map/style to finish loading. However, despite being within a Mapbox listener, the error still resurfaces periodically. Below is a snippet of my current component code (omitting certain functions for clarity):
export default {
mounted() {
new Promise(resolve => {
this.loadMap([this.subjectProperty.longitude, this.subjectProperty.latitude])
if(this.mapLoaded === true) resolve()
}).then(() => {
setTimeout(() => {
this.showParcel()
}, 3000)
})
},
methods: {
loadMap(center) {
var self = this
mapBox = new mapboxgl.Map({
container: 'map',
zoom: 12,
pitch: 45,
center: center,
style: 'mapbox://styles/mapbox/streets-v10'
})
mapBox.on('style.load', function() {
self.mapLoaded = true
})
},
showParcel() {
mapBoxBounds = new mapboxgl.LngLatBounds()
this.parcel.geo_json['geometry']['coordinates'][0].forEach((coord) => {
mapBoxBounds.extend(coord)
})
MapBoxObject.addGeoJsonParcels(this.parcel.geo_json)
MapBoxObject.fitBounds()
}
}
}