|
|
@ -125,11 +125,37 @@ function addMarker(lat: number, long: number, row: RowType) { |
|
|
|
// } |
|
|
|
// } |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const resetZoomAndCenterBasedOnLocalStorage = () => { |
|
|
|
|
|
|
|
if (mapMetaData?.value?.fk_view_id == null) { |
|
|
|
|
|
|
|
console.error('Early leaving of resetZoomAndCenterBasedOnLocalStorage because "mapMetaData?.value?.fk_view_id == null"') |
|
|
|
|
|
|
|
console.log('mapMetaData?.value', mapMetaData?.value) |
|
|
|
|
|
|
|
return |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
const initialZoomLevel = parseInt(localStorage.getItem(getMapZoomLocalStorageKey(mapMetaData.value.fk_view_id)) || '10') |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const initialCenterLocalStorageStr = localStorage.getItem(getMapCenterLocalStorageKey(mapMetaData.value.fk_view_id)) |
|
|
|
|
|
|
|
const initialCenter = initialCenterLocalStorageStr |
|
|
|
|
|
|
|
? JSON.parse(initialCenterLocalStorageStr) |
|
|
|
|
|
|
|
: { |
|
|
|
|
|
|
|
lat: 51, |
|
|
|
|
|
|
|
lng: 0.0, |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
myMapRef?.value?.setView([initialCenter.lat, initialCenter.lng], initialZoomLevel) |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
watch([formattedData, mapMetaData, markersClusterGroupRef], () => { |
|
|
|
watch([formattedData, mapMetaData, markersClusterGroupRef], () => { |
|
|
|
if (markersClusterGroupRef.value == null) { |
|
|
|
console.log('CALL OF watch([formattedData, mapMetaData, markersClusterGroupRef]) handler') |
|
|
|
|
|
|
|
// console.log('formattedData.value', formattedData.value) |
|
|
|
|
|
|
|
// console.log('mapMetaData.value', mapMetaData.value) |
|
|
|
|
|
|
|
// console.log('markersClusterGroupRef.value', markersClusterGroupRef.value) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if (formattedData.value == null || mapMetaData.value?.fk_view_id == null || markersClusterGroupRef.value == null) { |
|
|
|
return |
|
|
|
return |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
resetZoomAndCenterBasedOnLocalStorage() |
|
|
|
|
|
|
|
|
|
|
|
markersClusterGroupRef.value?.clearLayers() |
|
|
|
markersClusterGroupRef.value?.clearLayers() |
|
|
|
|
|
|
|
|
|
|
|
formattedData.value?.forEach((row) => { |
|
|
|
formattedData.value?.forEach((row) => { |
|
|
@ -161,24 +187,6 @@ watch([formattedData, mapMetaData, markersClusterGroupRef], () => { |
|
|
|
}) |
|
|
|
}) |
|
|
|
}) |
|
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
const resetZoomAndCenterBasedOnLocalStorage = () => { |
|
|
|
|
|
|
|
if (mapMetaData?.value?.fk_view_id == null) { |
|
|
|
|
|
|
|
console.error('Early leaving of resetZoomAndCenterBasedOnLocalStorage because "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.value.fk_view_id)) |
|
|
|
|
|
|
|
const initialCenter = initialCenterLocalStorageStr |
|
|
|
|
|
|
|
? JSON.parse(initialCenterLocalStorageStr) |
|
|
|
|
|
|
|
: { |
|
|
|
|
|
|
|
lat: 51, |
|
|
|
|
|
|
|
lng: 0.0, |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
myMapRef?.value?.setView([initialCenter.lat, initialCenter.lng], initialZoomLevel) |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
onMounted(async () => { |
|
|
|
onMounted(async () => { |
|
|
|
const myMap = L.map(mapContainerRef.value!, { |
|
|
|
const myMap = L.map(mapContainerRef.value!, { |
|
|
|
center: new LatLng(10, 10), |
|
|
|
center: new LatLng(10, 10), |
|
|
@ -187,8 +195,6 @@ onMounted(async () => { |
|
|
|
|
|
|
|
|
|
|
|
myMapRef.value = myMap |
|
|
|
myMapRef.value = myMap |
|
|
|
|
|
|
|
|
|
|
|
resetZoomAndCenterBasedOnLocalStorage() |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', { |
|
|
|
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', { |
|
|
|
maxZoom: 19, |
|
|
|
maxZoom: 19, |
|
|
|
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>', |
|
|
|
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>', |
|
|
@ -225,7 +231,7 @@ watch(view, async (nextView) => { |
|
|
|
if (nextView?.type === ViewTypes.MAP) { |
|
|
|
if (nextView?.type === ViewTypes.MAP) { |
|
|
|
await loadMapMeta() |
|
|
|
await loadMapMeta() |
|
|
|
await loadMapData() |
|
|
|
await loadMapData() |
|
|
|
await resetZoomAndCenterBasedOnLocalStorage() |
|
|
|
// await resetZoomAndCenterBasedOnLocalStorage() |
|
|
|
} |
|
|
|
} |
|
|
|
}) |
|
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|