Disabled map controls while loading. Rest zoom.

Author: ciatph

src/components/widgets/LivelihoodZonesMap.vue

@@ -123,6 +123,7 @@ export default {
 
       this.selectedIsland = this.getIslandFromRegion(this.selectedRegion)
       this.getProvinceOptions()
+      this.resetMapView()
 
       // Hide the previous selected region
       if (this.previousIsland) {
@@ -180,6 +181,7 @@ export default {
         ? this.hardCodedNames[this.selectedProvince]
         : this.camelCase(this.selectedProvince)
 
+      this.resetMapView()
       window.MBL.setLayerFilter(`${this.selectedIsland}-layer`, {
         key: 'ADM2_EN',
         value: provinceValue
@@ -265,6 +267,16 @@ export default {
       }
     },
 
+    resetMapView () {
+      if (window.MBL.map.getZoom() > 8) {
+        setTimeout(() => {
+          window.MBL.resetCenter()
+        }, 200)
+      }
+
+      window.MBL.toggleHandlers(false)
+    },
+
     updateLegend (provinceName) {
       const that = this
       let loadedOnce = false
@@ -277,19 +289,20 @@ export default {
       // Reset the legends
       this.legends = []
 
-      window.MBL.map.on('sourcedata', function(e) {
+      window.MBL.map.on('sourcedata', function (e) {
         if (e.isSourceLoaded) {
           if (e.sourceId !== 'composite' && !loadedOnce) {
-            const features = window.MBL.map.queryRenderedFeatures({layers: [`${e.sourceId}-layer`] })
+            const features = window.MBL.map.queryRenderedFeatures({ layers: [`${e.sourceId}-layer`] })
 
             if (features.length > 0) {
               window.MBL.isLoading = false
+              window.MBL.toggleHandlers(true)
               loadedOnce = true
               console.log(`--loaded vector length: ${features.length}`)
 
               if (provinceName) {
                 colorCodes = Array.from(features.filter(x => x.properties['ADM2_EN'] === provinceName),
-                (x) => x.properties['Legend_v2']).filter(unique)
+                  (x) => x.properties['Legend_v2']).filter(unique)
               } else {
                 colorCodes = Array.from(features, (x) => x.properties['Legend_v2']).filter(unique)
               }

static/map.js

@@ -66,11 +66,15 @@ MapboxMap.prototype.initMap = function ({ mapContainer = 'map', style, zoom = 5.
   this.map.resize()
   this.colorCodes = this.getLegendColorCodes()
 
+  // Disable map controls
+  this.toggleHandlers(false)
+
   // Listen for basemap loading events
   const that = this
 
   this.map.on('load', function() {
     console.log('---basemap loaded')
+    that.toggleHandlers(true)
     that.isLoading = false
   })
 
@@ -298,3 +302,24 @@ MapboxMap.prototype.removePopups = function () {
     popups[i].remove()
   }
 }
+
+MapboxMap.prototype.resetCenter = function () {
+  this.map.setZoom(5)
+  this.map.flyTo({
+    center: [122.016, 12.127]
+  })
+}
+
+/**
+ * Emable or disable mapbox ma controls
+ */
+MapboxMap.prototype.toggleHandlers = function (enable) {
+  const handlers = ['scrollZoom', 'boxZoom', 'dragRotate', 'dragPan', 'keyboard', 'doubleClickZoom', 'touchZoomRotate']
+  for (let i = 0; i < handlers.length; i += 1) {
+    if (enable) {
+      this.map[handlers[i]].enable()
+    } else {
+      this.map[handlers[i]].disable()
+    }
+  }
+}