WIP geodata: set localstorage saved zoom and center

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

@@ -25,6 +25,14 @@ const expandedFormDlg = ref(false)
 const expandedFormRow = ref<RowType>()
 const expandedFormRowState = ref<Record<string, any>>()
 
+const getMapZoomLocalStorageKey = (mapMetaData: { value: { fk_view_id: string } }) => {
+  console.log('mapMetaData.value.fk_view_id', mapMetaData.value.fk_view_id)
+  debugger
+  return `mapView.zoom.${mapMetaData.value.fk_view_id}`
+}
+const getMapCenterLocalStorageKey = (mapMetaData: { value: { fk_view_id: string } }) =>
+  `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!)
@@ -123,43 +131,56 @@ watch([formattedData, mapMetaData, markersClusterGroupRef], () => {
   })
 })
 
+const resetZoomAndCenterBasedOnLocalStorage = () => {
+  const initialZoomLevel = parseInt(localStorage.getItem(getMapZoomLocalStorageKey(mapMetaData)) || '10')
+
+  const initialCenterLocalStorageStr = localStorage.getItem(getMapCenterLocalStorageKey(mapMetaData))
+  const initialCenter = initialCenterLocalStorageStr
+    ? JSON.parse(initialCenterLocalStorageStr)
+    : {
+        lat: 0.0,
+        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 () => {
-  // TODO: also here add/use viewId suffix approach (see comment below)
-  const initialZoomLevel = parseInt(localStorage.getItem(`mapView.zoom${mapMetaData.value.fk_view_id}`) || '10')
-  // const initialBounds = parseInt(localStorage?.getItem(`mapView.bounds${mapMetaData.value.fk_view_id}`))
+  const myMap = L.map(mapContainerRef.value!)
 
-  const myMap = L.map(mapContainerRef.value!).setView([51.505, -0.09], initialZoomLevel)
   myMapRef.value = myMap
 
+  resetZoomAndCenterBasedOnLocalStorage()
+
   L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
     maxZoom: 19,
     attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
   }).addTo(myMap)
 
   markersClusterGroupRef.value = L.markerClusterGroup({
-    iconCreateFunction(cluster) {
+    iconCreateFunction(cluster: { getChildCount: () => number }) {
       return L.divIcon({ html: `${cluster.getChildCount()}`, className: 'geo-map-marker-cluster', iconSize: new L.Point(40, 40) })
     },
   })
   myMap.addLayer(markersClusterGroupRef.value)
 
-  myMap.on('zoomend', function (params) {
+  myMap.on('zoomend', function () {
     if (localStorage != null) {
-      // TODO: use current mapView id as suffix to the local storage key,
-      // so there are no clashes when there are multiple map views, e.g.:
-      // localStorage.setItem(`mapView.${meta?.value.id || 'DEFAULT_ID'}`, this.input)
-      localStorage.setItem(`mapView.zoom${mapMetaData.value.fk_view_id}`, myMap.getZoom().toString())
+      localStorage.setItem(getMapZoomLocalStorageKey(mapMetaData), myMap.getZoom().toString())
     }
   })
   myMap.on('moveend', function () {
-    const bounds = myMap.getBounds()
-    const newSouthWest = bounds.getSouthWest
-    const newNorthEast = bounds.getNorthEast
-    console.log('bounds', bounds)
-    console.log('boundsSW', newSouthWest)
-    console.log('boundsNE', newNorthEast)
     if (localStorage != null) {
-      localStorage.setItem(`mapView.bounds${mapMetaData.value.fk_view_id}`, myMap.getBounds().toString())
+      localStorage.setItem(getMapCenterLocalStorageKey(mapMetaData), JSON.stringify(myMap.getCenter()))
     }
   })
 })