Merge pull request #1086 from geospoc/fix/container-undefined-issue

Author: vinayakkulkarni

src/layers/mapbox/VLayerMapboxGeojson.vue

@@ -4,7 +4,6 @@
   </div>
 </template>
 <script lang="ts">
-  import type { FeatureCollection } from 'geojson';
   import type { AnyLayer, GeoJSONSourceRaw } from 'mapbox-gl';
   import type { PropType, Ref } from 'vue';
   import { defineComponent, onMounted, ref, watch } from 'vue';
@@ -24,7 +23,7 @@
         required: true,
       },
       source: {
-        type: Object as PropType<FeatureCollection | GeoJSONSourceRaw>,
+        type: Object as PropType<GeoJSONSourceRaw>,
         required: true,
       },
       layer: {
@@ -48,15 +47,6 @@
         source: props.sourceId,
       };
 
-      const source = () => {
-        // Assuming the source is FeatureCollection
-        if ('type' in props.source) {
-          return { type: 'geojson', data: props.source } as GeoJSONSourceRaw;
-        } else {
-          return props.source;
-        }
-      };
-
       map.value.on('style.load', () => {
         // https://github.com/mapbox/mapbox-gl-js/issues/2268#issuecomment-401979967
         const styleTimeout = () => {
@@ -89,7 +79,7 @@
        * @returns {void}
        */
       function addLayer(): void {
-        map.value.addSource(props.sourceId, source());
+        map.value.addSource(props.sourceId, props.source);
         map.value.addLayer(layer, props.before);
       }
     },

src/map/VMap.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :id="`${options.container}` || 'map'" class="v-map-container">
+  <div :id="getContainer()" class="v-map-container">
     <slot />
   </div>
 </template>
@@ -26,9 +26,10 @@
       let events: Ref<Array<keyof MapEventType>> = ref(mapEvents);
 
       onMounted(() => {
-        const options = props.options.container
-          ? props.options
-          : { ...props.options, container: 'map' };
+        const options =
+          'container' in props.options
+            ? props.options
+            : { ...props.options, container: 'map' };
         map.value = new Map(options);
         loaded.value = true;
         provide(MapKey, map);
@@ -55,6 +56,22 @@
           });
         });
       }
+
+      /**
+       * Gets the container element
+       *
+       * @returns {string} - The container element id
+       */
+      const getContainer = (): string => {
+        if (Object.keys(props.options).includes('container')) {
+          return `${props.options.container}`;
+        }
+        return 'map';
+      };
+
+      return {
+        getContainer,
+      };
     },
   });
 </script>

types/layers/mapbox/VLayerMapboxGeojson.vue.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="@types/mapbox-gl" />
-import type { FeatureCollection } from 'geojson';
 import type { AnyLayer, GeoJSONSourceRaw } from 'mapbox-gl';
 import type { PropType } from 'vue';
 declare const _default: import('vue').DefineComponent<
@@ -15,13 +14,7 @@ declare const _default: import('vue').DefineComponent<
       required: true;
     };
     source: {
-      type: PropType<
-        | FeatureCollection<
-            import('geojson').Geometry,
-            import('geojson').GeoJsonProperties
-          >
-        | GeoJSONSourceRaw
-      >;
+      type: PropType<GeoJSONSourceRaw>;
       required: true;
     };
     layer: {
@@ -59,13 +52,7 @@ declare const _default: import('vue').DefineComponent<
         required: true;
       };
       source: {
-        type: PropType<
-          | FeatureCollection<
-              import('geojson').Geometry,
-              import('geojson').GeoJsonProperties
-            >
-          | GeoJSONSourceRaw
-        >;
+        type: PropType<GeoJSONSourceRaw>;
         required: true;
       };
       layer: {

types/map/VMap.vue.d.ts

@@ -9,7 +9,9 @@ declare const _default: import('vue').DefineComponent<
       default: () => {};
     };
   },
-  void,
+  {
+    getContainer: () => string;
+  },
   unknown,
   {},
   {},