use style events to remount layers

jasonhibbs · Jun 4, 2020 · dc4092b · dc4092b
1 parent 218f949
commit dc4092b
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 29 deletions.
diff --git a/src/components/CastleMap.vue b/src/components/CastleMap.vue
@@ -5,14 +5,17 @@
   )
     mapbox-map(
       @mapload="onLoad"
+      @mapstyleloading="onStyleLoading"
+      @mapstyleload="onStyleLoad"
       @mapclick="onClick"
       @mapmousemove="onMousemove"
       @maplongpress="onLongpress"
     )
-      context-marker
-      castle-markers(
-        :sourceId="sourceId"
-      )
+      template(v-if="styleLoaded")
+        context-marker
+        castle-markers(
+          :sourceId="sourceId"
+        )
 
 
 </template>
@@ -22,6 +25,7 @@ import MapboxMap from '@/components/MapboxMap.vue'
 import ContextMarker from '@/components/ContextMarker.vue'
 import CastleMarkers from '@/components/CastleMarkers.vue'
 import { Map } from 'mapbox-gl'
+import debounce from 'lodash.debounce'
 
 @Component({
   components: { MapboxMap, ContextMarker, CastleMarkers },
@@ -44,20 +48,27 @@ export default class CastleMap extends Vue {
 
   // Setup
 
+  styleLoaded = false
+
+  onStyleLoading() {
+    this.styleLoaded = false
+  }
+
+  onStyleLoad = debounce(() => {
+    this.onStyleLoaded()
+  }, 500)
+
+  onStyleLoaded() {
+    if (!this.map.getSource(this.sourceId)) {
+      this.setSource()
+    }
+    this.selectFromRoute()
+    this.styleLoaded = true
+  }
+
   async onLoad(map: Map) {
     this.map = map
     this.setSource()
-
-    setTimeout(() => {
-      const routeId = this.$route.params?.id
-      if (routeId) {
-        const feature = this.map.querySourceFeatures(this.sourceId, {
-          sourceLayer: '_castle-circles',
-          filter: ['==', 'id', routeId],
-        })
-        this.selectCastle(feature[0])
-      }
-    }, 1000)
   }
 
   get sourceId() {
@@ -82,12 +93,29 @@ export default class CastleMap extends Vue {
   }
 
   findFeature(e: any, range?: number) {
+    if (!this.map.getLayer('_castle-circles')) {
+      return
+    }
     const features = this.map.queryRenderedFeatures(this.makeBox(e, range), {
       layers: ['_castle-circles'],
     })
     return features[0] || null
   }
 
+  selectFromRoute() {
+    if (!this.map.getLayer('_castle-circles')) {
+      return
+    }
+    const routeId = this.$route.params?.id
+    if (routeId) {
+      const features = this.map.querySourceFeatures(this.sourceId, {
+        sourceLayer: '_castle-circles',
+        filter: ['==', 'id', routeId],
+      })
+      this.selectCastle(features[0])
+    }
+  }
+
   // Castles
 
   castleSelected: number | null = null

diff --git a/src/components/ContextMarker.vue b/src/components/ContextMarker.vue
@@ -38,19 +38,6 @@ import { MglMarker, MglGeojsonLayer } from 'vue-mapbox'
 export default class ContextMarker extends Vue {
   mapView!: any
 
-  mounted() {
-    this.$root.$on('mapstylechange', this.onStyleChange)
-  }
-
-  onStyleChange() {
-    // geojsonlayer breaks on style change, so rebuild manually
-    const map = this.$store.state.map
-    if (!this.$store.state.map.getSource(this.radius.id)) {
-      map.addSource(this.radius.id, this.radius.source)
-      map.addLayer(this.radius.layer)
-    }
-  }
-
   get coords() {
     return [this.mapView.context.lng, this.mapView.context.lat]
   }

diff --git a/src/components/MapboxMap.vue b/src/components/MapboxMap.vue
@@ -72,10 +72,11 @@ export default class MapboxMap extends Vue {
   }
 
   onStyleLoaded(e: any) {
-    this.$root.$emit('mapstylechange')
+    this.$emit('mapstyleload')
   }
 
   onSchemeChange(value: string) {
+    this.$emit('mapstyleloading')
     this.map.setStyle(this.mapConfig.style[value])
   }