Browse Source

save last center and zoom on a map view

pull/4723/head
flisowna 2 years ago
parent
commit
bf9ba9a43b
  1. 47
      packages/nc-gui/components/smartsheet/Map.vue

47
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 } }) => {
console.log('mapMetaData.value.fk_view_id', mapMetaData.value.fk_view_id)
debugger
return `mapView.zoom.${mapMetaData.value.fk_view_id}`
const getMapZoomLocalStorageKey = (viewId: string) => {
return `mapView.zoom.${viewId}`
}
const getMapCenterLocalStorageKey = (mapMetaData: { value: { fk_view_id: string } }) =>
`mapView.center.${mapMetaData.value.fk_view_id}`
const getMapCenterLocalStorageKey = (viewId: string) => `mapView.center.${viewId}`
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) {
localStorage.setItem(getMapZoomLocalStorageKey(mapMetaData), myMap.getZoom().toString())
if (localStorage != null && mapMetaData?.value?.fk_view_id) {
localStorage.setItem(getMapZoomLocalStorageKey(mapMetaData.value.fk_view_id), myMap.getZoom().toString())
}
})
myMap.on('moveend', function () {
if (localStorage != null) {
localStorage.setItem(getMapCenterLocalStorageKey(mapMetaData), JSON.stringify(myMap.getCenter()))
if (localStorage != null && mapMetaData?.value?.fk_view_id) {
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>

Loading…
Cancel
Save