Listen for basemap load.

Author: ciatph

src/components/widgets/LivelihoodZonesMap.vue

@@ -30,7 +30,7 @@ export default {
       previousRegion: '',
       previousIsland: '',
 
-      disabled: false,
+      disabled: true,
 
       options: [
         { value: null, text: 'Please select a region' }
@@ -168,6 +168,7 @@ export default {
 
   mounted () {
     this.getRegionOptions()
+    const that = this
 
     // Initialize the mapbox basemap
     window.MBL.initMap({
@@ -178,6 +179,16 @@ export default {
     })
 
     this.$refs.map.getElementsByClassName('mapboxgl-canvas')[0].style.position = 'relative'
+
+    // Wait for basemap to load
+    // TO-DO: Listen for mapbox events
+    const time = setInterval(() => {
+      if (!window.MBL.isLoading) {
+        console.log('--BASEMAP')
+        that.disabled = false
+        clearInterval(time)
+      }
+    }, 200)
   },
 
   methods: {

static/map.js

@@ -18,7 +18,7 @@ function MapboxMap (publicAccessToken) {
 
   // Flag if a vector data source is loading
   // TO-DO: Listen for mapbox events
-  this.isLoading = false
+  this.isLoading = true
 }
 
 /**
@@ -61,6 +61,21 @@ MapboxMap.prototype.initMap = function ({ mapContainer = 'map', style, zoom = 5.
   this.mapContainer.style.height = (window.outerHeight + 70) + 'px'
   this.mapCanvas.style.width = '100%'
   this.map.resize()
+
+  // Listen for basemap loading events
+  const that = this
+
+  this.map.on('load', function() {
+    console.log('---basemap loaded')
+    that.isLoading = false
+  })
+
+  this.map.on('sourcedata', function(e) {
+    if (e.isSourceLoaded) {
+      console.log('---vector loaded')
+      that.isLoading = false
+    }
+  })
 } 
 
 /**
@@ -210,10 +225,9 @@ MapboxMap.prototype.addLayerSource = function (layerName, tilesetName, tilesetUr
     const time = setInterval(function() {
       const features = that.map.queryRenderedFeatures({layers: [layerID] })
       if (features) {
-        that.isLoading = false
+        // that.isLoading = false
 
         window.MBL.map.on('click', layerID, function(e) {
-          console.log(e)
           // print all data
           var content = ""
           for(key in e.features[0].properties){