CODEWITHSUNDEEP
javascriptvue.jsmapbox
AKN
AKN

Reputation: 196

Mapbox + Vue.js - Error: Style is not done loading

I am using Mapbox with Vue.js, and when adding a geojson layer to the map, keep running into this error message:

Uncaught (in promise) Error: Style is not done loading

I have tried many variations to no avail. My question is, how do I ensure the proper order of execution so the layer is always added? I have wrapped the function in a Javascript Promise, with a workaround adding a setTimeout() so the map/style has time to finish loading, even though it is already within a Mapbox listener, but the error creeps its way back every so often. My current component is as follows (have left out certain functions for brevity): 

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()
    }
  }
}

Upvotes: 2

Views: 1722

Answers (1)

jacky
jacky

Reputation: 1446

try code below:

export default {
  mounted() {
    this.loadMap([
      this.subjectProperty.longitude,
      this.subjectProperty.latitude
    ]).then(_=>{
      this.showParcel()
    })  
  },
  methods: {
    loadMap(center) {
      return new Promise(resolve=>{
        let mapBox = new mapboxgl.Map({
          container: 'map',
          zoom: 12,
          pitch: 45,
          center: center,
          style: 'mapbox://styles/mapbox/streets-v10'
        })

        mapBox.on('style.load', _ => {
          resolve()
        })
      })
    },
    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()
    }
  }
}

Upvotes: 4

Related Questions