|
|
|
@ -1,23 +1,16 @@
|
|
|
|
|
<script lang="ts" setup> |
|
|
|
|
import 'leaflet/dist/leaflet.css' |
|
|
|
|
// import type { MarkerClusterGroup } from 'leaflet' |
|
|
|
|
import L from 'leaflet' |
|
|
|
|
import 'leaflet.markercluster' |
|
|
|
|
import { IsGalleryInj, IsGridInj, IsMapInj, onMounted, provide, ref } from '#imports' |
|
|
|
|
// import * as L from 'leaflet' |
|
|
|
|
// const { map, tileLayer, marker, markerClusterGroup } = await import('leaflet') |
|
|
|
|
// await import('leaflet.markercluster') |
|
|
|
|
|
|
|
|
|
provide(IsGalleryInj, ref(false)) |
|
|
|
|
provide(IsGridInj, ref(false)) |
|
|
|
|
provide(IsMapInj, ref(true)) |
|
|
|
|
const reloadViewDataHook = inject(ReloadViewDataHookInj) |
|
|
|
|
// const { formattedData, loadMapData, loadMapMeta, mapMetaData, geoDataFieldColumn } = useMapViewStoreOrThrow() |
|
|
|
|
const { formattedData, loadMapData, loadMapMeta, mapMetaData, geoDataFieldColumn } = useMapViewStoreOrThrow() |
|
|
|
|
|
|
|
|
|
// const markerRef = ref() |
|
|
|
|
const myMapRef = ref<L.Map>() |
|
|
|
|
const layerGroupRef = ref<L.LayerGroup>() |
|
|
|
|
// const markersRef = ref<MarkerClusterGroup | undefined>() |
|
|
|
|
const markersClusterGroupRef = ref<L.MarkerClusterGroup>() |
|
|
|
|
const mapContainerRef = ref<HTMLElement>() |
|
|
|
|
|
|
|
|
|
onBeforeMount(async () => { |
|
|
|
@ -30,44 +23,24 @@ reloadViewDataHook?.on(async () => {
|
|
|
|
|
loadMapMeta() |
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
watchEffect(() => { |
|
|
|
|
if (mapContainerRef.value) { |
|
|
|
|
console.log('NOW') |
|
|
|
|
} else { |
|
|
|
|
// not mounted yet, or the element was unmounted (e.g. by v-if) |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
function addMarker(lat: number, long: number, popupContent: string) { |
|
|
|
|
if (myMapRef.value == null) { |
|
|
|
|
if (markersClusterGroupRef.value == null) { |
|
|
|
|
throw new Error('Map is null') |
|
|
|
|
} |
|
|
|
|
const newMarker = L.marker([lat, long]).addTo(myMapRef.value) |
|
|
|
|
const newMarker = L.marker([lat, long]) |
|
|
|
|
markersClusterGroupRef.value?.addLayer(newMarker) |
|
|
|
|
|
|
|
|
|
if (newMarker) { |
|
|
|
|
newMarker.bindPopup(popupContent) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
console.log('myMapRef.value', myMapRef.value) |
|
|
|
|
// const markerNew = markerRef?.value?.([lat, long]) |
|
|
|
|
|
|
|
|
|
// L.marker([50, 14]).addTo(); |
|
|
|
|
|
|
|
|
|
// markersRef?.value?.addLayer(markerNew) |
|
|
|
|
|
|
|
|
|
// myMapRef?.value?.addLayer(markerRef.value) |
|
|
|
|
|
|
|
|
|
// return markerNew |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
watch([formattedData, mapMetaData, myMapRef], () => { |
|
|
|
|
// markersRef.value?.clearLayers() |
|
|
|
|
|
|
|
|
|
if (myMapRef.value == null) { |
|
|
|
|
watch([formattedData, mapMetaData, markersClusterGroupRef], () => { |
|
|
|
|
if (markersClusterGroupRef.value == null) { |
|
|
|
|
return |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
layerGroupRef.value?.clearLayers() |
|
|
|
|
markersClusterGroupRef.value?.clearLayers() |
|
|
|
|
|
|
|
|
|
formattedData.value?.forEach((row) => { |
|
|
|
|
const primaryGeoDataColumnTitle = geoDataFieldColumn.value?.title |
|
|
|
@ -95,10 +68,6 @@ watch([formattedData, mapMetaData, myMapRef], () => {
|
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
onMounted(async () => { |
|
|
|
|
// if (process.client) { |
|
|
|
|
// const myMap = L.map('mapContainer').setView([51.505, -0.09], 13) |
|
|
|
|
// if (mapContainerRef.value != null) { |
|
|
|
|
console.log('mapContainerRef.value', mapContainerRef.value) |
|
|
|
|
const myMap = L.map(mapContainerRef.value!).setView([51.505, -0.09], 13) |
|
|
|
|
|
|
|
|
|
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', { |
|
|
|
@ -106,29 +75,14 @@ onMounted(async () => {
|
|
|
|
|
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>', |
|
|
|
|
}).addTo(myMap) |
|
|
|
|
|
|
|
|
|
layerGroupRef.value = L.layerGroup().addTo(myMap) |
|
|
|
|
|
|
|
|
|
// markerRef.value = L.marker |
|
|
|
|
myMapRef.value = myMap |
|
|
|
|
// markersRef.value = L.markerClusterGroup() |
|
|
|
|
// addMarker(52, 0, 'jdksauwdk') |
|
|
|
|
// { |
|
|
|
|
// iconCreateFunction(cluster) { |
|
|
|
|
// return L.divIcon({ html: `<b>${cluster.getChildCount()}</b>` }) |
|
|
|
|
// // return L.divIcon({ html: `<b>${cluster.getChildCount()}</b>`, className: 'FOOBAR' }) |
|
|
|
|
// }, |
|
|
|
|
// } |
|
|
|
|
// ) |
|
|
|
|
// } |
|
|
|
|
// } |
|
|
|
|
markersClusterGroupRef.value = L.markerClusterGroup() |
|
|
|
|
myMap.addLayer(markersClusterGroupRef.value) |
|
|
|
|
}) |
|
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
<template> |
|
|
|
|
<div class="flex flex-col h-full w-full nounderline"> |
|
|
|
|
<!-- <client-only placeholder="Loading..."> --> |
|
|
|
|
<div id="mapContainer" ref="mapContainerRef" class="FOOBAR"></div> |
|
|
|
|
<!-- </client-only> --> |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
@ -139,12 +93,4 @@ onMounted(async () => {
|
|
|
|
|
.nounderline { |
|
|
|
|
text-decoration: none; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
/* .marker-cluster b { |
|
|
|
|
background-color: rgba(226, 36, 36, 0.6); |
|
|
|
|
} */ |
|
|
|
|
|
|
|
|
|
/* .FOOBAR { |
|
|
|
|
background-color: pink; |
|
|
|
|
} */ |
|
|
|
|
</style> |
|
|
|
|