save last center and zoom on a map view

packages/nc-gui/components/smartsheet/Map.vue

@@ -2,6 +2,7 @@
 import 'leaflet/dist/leaflet.css'
 import L from 'leaflet'
 import 'leaflet.markercluster'
+import { ViewTypes } from 'nocodb-sdk'
 import { IsGalleryInj, IsGridInj, IsMapInj, onMounted, provide, ref } from '#imports'
 
 import type { Row as RowType } from '~/lib'
@@ -25,22 +26,17 @@ const expandedFormDlg = ref(false)
 const expandedFormRow = ref<RowType>()
 const expandedFormRowState = ref<Record<string, any>>()
 
-const getMapZoomLocalStorageKey = (mapMetaData: { value: { fk_view_id: string } }) => {
+const getMapZoomLocalStorageKey = (viewId: string) => {
-  console.log('mapMetaData.value.fk_view_id', mapMetaData.value.fk_view_id)
+  return `mapView.zoom.${viewId}`
-  debugger
-  return `mapView.zoom.${mapMetaData.value.fk_view_id}`
 }
-const getMapCenterLocalStorageKey = (mapMetaData: { value: { fk_view_id: string } }) =>
+const getMapCenterLocalStorageKey = (viewId: string) => `mapView.center.${viewId}`
-  `mapView.center.${mapMetaData.value.fk_view_id}`
 
 const expandForm = (row: RowType, state?: Record<string, any>) => {
-  console.log('expandForm')
   const rowId = extractPkFromRow(row.row, meta.value!.columns!)
 
   // debugger
 
   if (rowId) {
-    console.log('if')
     router.push({
       query: {
         ...route.query,
@@ -48,7 +44,6 @@ const expandForm = (row: RowType, state?: Record<string, any>) => {
       },
     })
   } else {
-    console.log('else')
     expandedFormRow.value = row
     expandedFormRowState.value = state
     expandedFormDlg.value = true
@@ -86,7 +81,6 @@ function addMarker(lat: number, long: number, row: RowType) {
   }
   const newMarker = L.marker([lat, long]).on('click', () => {
     expandForm(row)
-    console.log('click on marker')
   })
   markersClusterGroupRef.value?.addLayer(newMarker)
 
@@ -132,9 +126,12 @@ watch([formattedData, mapMetaData, markersClusterGroupRef], () => {
 })
 
 const resetZoomAndCenterBasedOnLocalStorage = () => {
-  const initialZoomLevel = parseInt(localStorage.getItem(getMapZoomLocalStorageKey(mapMetaData)) || '10')
+  if (mapMetaData?.value?.fk_view_id == null) {
+    return
+  }
+  const initialZoomLevel = parseInt(localStorage.getItem(getMapZoomLocalStorageKey(mapMetaData.value.fk_view_id)) || '10')
 
-  const initialCenterLocalStorageStr = localStorage.getItem(getMapCenterLocalStorageKey(mapMetaData))
+  const initialCenterLocalStorageStr = localStorage.getItem(getMapCenterLocalStorageKey(mapMetaData.value.fk_view_id))
   const initialCenter = initialCenterLocalStorageStr
     ? JSON.parse(initialCenterLocalStorageStr)
     : {
@@ -142,18 +139,9 @@ const resetZoomAndCenterBasedOnLocalStorage = () => {
         lng: 0.0,
       }
 
-  console.log('myMapRef?.value?.setView', myMapRef?.value?.setView)
-  console.log('initialCenter', initialCenter)
-  console.log('initialZoomLevel', initialZoomLevel)
-  alert('HI')
-
   myMapRef?.value?.setView([initialCenter.lat, initialCenter.lng], initialZoomLevel)
 }
 
-onRenderTriggered(async () => {
-  resetZoomAndCenterBasedOnLocalStorage()
-})
-
 onMounted(async () => {
   const myMap = L.map(mapContainerRef.value!)
 
@@ -174,19 +162,28 @@ onMounted(async () => {
   myMap.addLayer(markersClusterGroupRef.value)
 
   myMap.on('zoomend', function () {
-    if (localStorage != null) {
+    if (localStorage != null && mapMetaData?.value?.fk_view_id) {
-      localStorage.setItem(getMapZoomLocalStorageKey(mapMetaData), myMap.getZoom().toString())
+      localStorage.setItem(getMapZoomLocalStorageKey(mapMetaData.value.fk_view_id), myMap.getZoom().toString())
     }
   })
   myMap.on('moveend', function () {
-    if (localStorage != null) {
+    if (localStorage != null && mapMetaData?.value?.fk_view_id) {
-      localStorage.setItem(getMapCenterLocalStorageKey(mapMetaData), JSON.stringify(myMap.getCenter()))
+      localStorage.setItem(getMapCenterLocalStorageKey(mapMetaData?.value?.fk_view_id), JSON.stringify(myMap.getCenter()))
     }
   })
 })
+
+watch(view, async (nextView) => {
+  if (nextView?.type === ViewTypes.MAP) {
+    await loadMapMeta()
+    await loadMapData()
+    await resetZoomAndCenterBasedOnLocalStorage()
+  }
+})
 </script>
 
 <template>
+  {{ JSON.stringify(mapMetaData) }}
   <div class="flex flex-col h-full w-full no-underline">
     <div id="mapContainer" ref="mapContainerRef"></div>
   </div>