Fix all Tilesets loading detection error.

Author: ciatph

src/components/widgets/LivelihoodZonesMap.vue

@@ -76,7 +76,8 @@ export default {
       messages: {
         DEFAULT: '',
         LOADING: 'Please wait while loading...',
-        NAVIGATE_TO: 'Please navigate to the selected region to view legends.'
+        NAVIGATE_TO: 'Please navigate to the selected region to view legends.',
+        LOAD_ERROR: 'An error has occurred while fetching data. Please check your internet connection and reload the web page.'
       },
 
       filters: {
@@ -187,14 +188,16 @@ export default {
     // Enable UI after basemap and (all) Tilesets have finished loading
     window.MBL.map.on(window.MBL.events.DATA_LOADED, function (e) {
       console.log('---ALL DATA HAS LOADED')
-      that.statusMessage = that.messages.DEFAULT
-      that.disabled = false
+      if (that.statusMessage === that.messages.LOADING) {
+        that.statusMessage = that.messages.DEFAULT
+        that.disabled = false
+      }
     })
 
     // Display an error message if initial Tilesets pre-load has failed
     window.MBL.map.on(window.MBL.events.DATA_LOAD_FAILURE, function (e) {
       console.log('---DATA FAILED TO DOWNLOAD')
-      that.statusMessage = 'Map data has failed to download.\nPlease check your internet connection and reload the web page.'
+      that.statusMessage = that.messages.LOAD_ERROR
     })
   },
 

static/map.js

@@ -130,6 +130,8 @@ MapboxMap.prototype.initMap = function ({ mapContainer = 'map', style, zoom, cen
       if (e.sourceId !== 'composite') {
         if (!that.eventsInitialized) {
           that.eventsInitialized = true
+          let hasLoadError = false
+
           const attributeNames = { // Attribute name mapping
             'ADM2_EN': 'Province',
             'ADM3_EN': 'Municipality',
@@ -143,6 +145,7 @@ MapboxMap.prototype.initMap = function ({ mapContainer = 'map', style, zoom, cen
 
             if (features.length === 0) {
               console.log(`---failed to fetch ${that.layerNames[i]}`)
+              hasLoadError = true
               this.fire(that.events.DATA_LOAD_FAILURE)
               break
             }
@@ -169,10 +172,12 @@ MapboxMap.prototype.initMap = function ({ mapContainer = 'map', style, zoom, cen
             }
           }
 
-          console.log(`---${that.events.DATA_LOADED}`)
-          that.isLoading = false
-          that.toggleHandlers(true)
-          this.fire(that.events.DATA_LOADED)
+          if (!hasLoadError) {
+            console.log(`---${that.events.DATA_LOADED}`)
+            that.isLoading = false
+            that.toggleHandlers(true)
+            this.fire(that.events.DATA_LOADED)
+          }
         }
       }
     }