feat: persist selected basemap ✨

Signed-off-by: Vinayak Kulkarni <19776877+vinayakkulkarni@users.noreply.github.com>
geoql · Mar 20, 2023 · 136a5ee · 136a5ee
1 parent 9d46bba
commit 136a5ee
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 31 deletions.
diff --git a/@types/map.ts b/@types/map.ts
@@ -1,10 +1,12 @@
+import type { StyleSpecification } from 'maplibre-gl';
+
 export type Basemap = {
   id: string;
   type: string;
   enabled: boolean;
   source: string;
   image: string;
-  style: string;
+  style: StyleSpecification | string;
 };
 
 export type Basemaps = {

diff --git a/components/map/CommonMap.vue b/components/map/CommonMap.vue
@@ -1,7 +1,7 @@
 <template>
   <main class="w-full h-full select-none">
     <v-map
-      :options="store.$state.map.options"
+      :options="{ ...store.$state.map.options, style: store.style }"
       @loaded="onMapLoaded"
       @click="onMapClicked"
       @pitchend="onMapPitchEnd"
@@ -355,7 +355,7 @@
        * @param {string} e - String of the new style
        * @returns {void} - Returns void
        */
-      function updateBasemap(e: string): void {
+      async function updateBasemap(e: string): Promise<void> {
         store.$patch((state) => {
           state.utils.basemaps.data.basemaps.forEach((basemap) => {
             if (basemap.style === e) {
@@ -365,6 +365,7 @@
             }
           });
         });
+        await store.setBasemaps();
         map.setStyle(e);
       }
       /**

diff --git a/composables/useMap.ts b/composables/useMap.ts
@@ -26,10 +26,7 @@ export const useMap = defineStore({
         zoom: 0 as number,
       },
       options: {
-        // style: 'https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json',
         container: 'map',
-        style:
-          'https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json',
         center: [73.8567, 18.5204] as number[],
         zoom: 11,
         maxZoom: 22,
@@ -72,26 +69,7 @@ export const useMap = defineStore({
         data: {
           id: useUuid(),
           title: 'Basemaps',
-          basemaps: [
-            {
-              id: useUuid(),
-              type: 'Dark (Carto)',
-              enabled: true,
-              image: 'dark',
-              source: 'carto',
-              style:
-                'https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json',
-            },
-            {
-              id: useUuid(),
-              type: 'Light (Carto)',
-              enabled: false,
-              image: 'streets',
-              source: 'carto',
-              style:
-                'https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json',
-            },
-          ],
+          basemaps: [],
         } as Basemaps,
       },
       upload: {
@@ -106,6 +84,12 @@ export const useMap = defineStore({
     },
   }),
   getters: {
+    style: (state) => {
+      const basemap = state.utils.basemaps.data.basemaps.find(
+        (basemap) => basemap.enabled,
+      );
+      return basemap?.style;
+    },
     loaded: (state): boolean => {
       return state.ui.loaded || state.ui.styleChanged || state.ui.tilesLoaded;
     },
@@ -149,9 +133,28 @@ export const useMap = defineStore({
       const basemaps = await db.getAll('basemaps');
       const runtimeConfig = useRuntimeConfig();
       if (basemaps.length) {
+        // @ts-ignore
         this.utils.basemaps.data = basemaps[0];
       } else {
         this.utils.basemaps.data.basemaps.push(
+          {
+            id: useUuid(),
+            type: 'Dark (Carto)',
+            enabled: true,
+            image: 'dark',
+            source: 'carto',
+            style:
+              'https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json',
+          },
+          {
+            id: useUuid(),
+            type: 'Light (Carto)',
+            enabled: false,
+            image: 'streets',
+            source: 'carto',
+            style:
+              'https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json',
+          },
           {
             id: useUuid(),
             type: 'Dark Std (AWS)',
@@ -185,11 +188,12 @@ export const useMap = defineStore({
             style: `https://maps.geo.${runtimeConfig.public.map.aws.region}.amazonaws.com/maps/v0/maps/open-data-visualization-light/style-descriptor?key=${runtimeConfig.public.map.aws.key}`,
           },
         );
-        db.put(
-          'basemaps',
-          JSON.parse(JSON.stringify(this.utils.basemaps.data)),
-        );
+        await this.setBasemaps();
       }
     },
+    async setBasemaps(): Promise<void> {
+      const db = await useIdb();
+      db.put('basemaps', JSON.parse(JSON.stringify(this.utils.basemaps.data)));
+    },
   },
 });
diff --git a/pages/index.vue b/pages/index.vue
@@ -27,6 +27,7 @@
       </svg>
     </div>
     <common-map
+      v-if="mapStore.utils.basemaps.data.basemaps.length"
       :class="{ 'opacity-50': !mapStore.loaded }"
       @on-clicked="onMapClicked"
     >
@@ -334,14 +335,14 @@
       });
 
       onMounted(async () => {
+        await mapStore.getBasemaps();
         db = await useIdb();
         const expenses = await db.getAll('expenses');
         if (expenses.length > 0) {
           expenseStore.$patch((state) => {
             state.geojson = expenses[0];
           });
         }
-        await mapStore.getBasemaps();
       });
 
       const onMapClicked = (e: MapMouseEvent): void => {