fix: add onBeforeUnmount hook logic 🕺

Signed-off-by: Vinayak Kulkarni <[email protected]>
vinayakkulkarni · Mar 14, 2023 · 8e71b2d · 8e71b2d
1 parent 26f80c4
commit 8e71b2d
Showing 1 changed file with 10 additions and 8 deletions.
diff --git a/src/layers/mapbox/VLayerMapboxGeojson.vue b/src/layers/mapbox/VLayerMapboxGeojson.vue
@@ -4,13 +4,12 @@
   </div>
 </template>
 <script lang="ts">
-  import type { FeatureCollection } from 'geojson';
   import type {
     LayerSpecification as AnyLayer,
     SourceSpecification as AnySource,
   } from 'maplibre-gl';
   import type { PropType, Ref } from 'vue';
-  import { defineComponent, onMounted, ref, watch } from 'vue';
+  import { defineComponent, onMounted, onBeforeUnmount, ref, watch } from 'vue';
   import { injectStrict, MapKey } from '../../utils';
 
   export default defineComponent({
@@ -27,7 +26,7 @@
         required: true,
       },
       source: {
-        type: Object as PropType<FeatureCollection>,
+        type: Object as PropType<AnySource>,
         required: true,
       },
       layer: {
@@ -50,10 +49,6 @@
         id: props.layerId,
         source: props.sourceId,
       };
-      const source: AnySource = {
-        type: 'geojson',
-        data: props.source,
-      };
 
       map.value.on('style.load', () => {
         // https://github.com/mapbox/mapbox-gl-js/issues/2268#issuecomment-401979967
@@ -81,13 +76,20 @@
         addLayer();
       });
 
+      onBeforeUnmount(() => {
+        if (map.value.getLayer(props.layerId)) {
+          map.value.removeLayer(props.layerId);
+          map.value.removeSource(props.sourceId);
+        }
+      });
+
       /**
        * Re–adds the layer when style changed
        *
        * @returns {void}
        */
       function addLayer(): void {
-        map.value.addSource(props.sourceId, source);
+        map.value.addSource(props.sourceId, props.source);
         map.value.addLayer(layer, props.before);
       }
     },