Disabled selection ui on map load.

Author: ciatph

src/components/widgets/LivelihoodZonesMap.vue

@@ -7,11 +7,13 @@
 
         b-form-select(
           v-model="selectedRegion"
+          :disabled="disabled"
           :options="options"
         )
 
         b-form-select(
           v-model="selectedProvince"
+          :disabled="disabled"
           :options="optionsProvince"
         )
 </template>
@@ -28,6 +30,8 @@ export default {
       previousRegion: '',
       previousIsland: '',
 
+      disabled: false,
+
       options: [
         { value: null, text: 'Please select a region' }
       ],
@@ -133,6 +137,17 @@ export default {
 
       // this.previousIsland = this.selectedIsland
       this.previousRegion = this.selectedIsland
+
+      // Disable the UI
+      this.disabled = true
+      const that = this
+      const time = setInterval(() => {
+        if (!window.MBL.isLoading) {
+          console.log('map loaded!')
+          that.disabled = false
+          clearInterval(time)
+        }
+      }, 200)
     },
 
     selectedProvince () {
@@ -153,7 +168,8 @@ export default {
 
   mounted () {
     this.getRegionOptions()
-    console.log('---INITIALIZING LIVELIHOOD ZONES')
+
+    // Initialize the mapbox basemap
     window.MBL.initMap({
       mapContainer: 'map',
       style: 'mapbox://styles/mapbox/streets-v11',
@@ -170,7 +186,6 @@ export default {
         return
       }
 
-      console.log(`--PROCESSING ${str}`)
       let string = str
       if (string.includes('-')) {
         string = Array.from(string.split('-'), (x) => `${x[0].toUpperCase()}${x.substr(1, x.length)}`).join('-')
@@ -214,8 +229,6 @@ export default {
           this.optionsProvince.push({ value: item, text: provinceValue })
         })
       }
-
-      console.log(this.optionsProvince)
     }
   }
 }

static/map.js

@@ -15,6 +15,10 @@ function MapboxMap (publicAccessToken) {
 
   // Set the mapbox public access token
   this.accessToken = mapboxgl.accessToken = publicAccessToken
+
+  // Flag if a vector data source is loading
+  // TO-DO: Listen for mapbox events
+  this.isLoading = false
 }
 
 /**
@@ -81,6 +85,9 @@ MapboxMap.prototype.toggleLayer = function (layerName) {
   }
 }
 
+/**
+ * Livelihood zones map fill styles
+ */
 MapboxMap.prototype.getLegendColorCodes = function () {
   const styles = {
     '1 Aquaculture/Freshwater fisheries': '#08306b',
@@ -195,12 +202,16 @@ MapboxMap.prototype.addLayerSource = function (layerName, tilesetName, tilesetUr
     })
 
     console.log(layer)
+    this.isLoading = true
     this.map.addLayer(layer)
 
     // Enable click events (display a pop-up message) after the layer and source has loaded
+    const that = this
     const time = setInterval(function() {
       const features = that.map.queryRenderedFeatures({layers: [layerID] })
       if (features) {
+        that.isLoading = false
+
         window.MBL.map.on('click', layerID, function(e) {
           console.log(e)
           // print all data
@@ -219,11 +230,11 @@ MapboxMap.prototype.addLayerSource = function (layerName, tilesetName, tilesetUr
         clearInterval(time)
       }
     }, 200)
-
+    /*
     this.map.on('load', function(e) {
       console.log('---DONE!!!')
-
     })
+    */
   } else {
     // Display the layer if its source already exists
     this.toggleLayer(layerID)