Browse Source

WIP - trying out new leaflet usage structure - works with popup and clusters (and cleaner code)

pull/4140/head
flisowna 2 years ago
parent
commit
5861ed1d65
  1. 74
      packages/nc-gui/components/smartsheet/Map.vue

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

@ -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: '&copy; <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>

Loading…
Cancel
Save