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

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 markersClusterGroupRef = ref<L.MarkerClusterGroup>()
-const myMapRef = ref<L.Map>()
-const layerGroupRef = ref<L.LayerGroup>()
-// const markersRef = ref<MarkerClusterGroup | undefined>()
 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], () => {
+watch([formattedData, mapMetaData, markersClusterGroupRef], () => {
-  // markersRef.value?.clearLayers()
+  if (markersClusterGroupRef.value == null) {
-
-  if (myMapRef.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)
+  markersClusterGroupRef.value = L.markerClusterGroup()
-
+  myMap.addLayer(markersClusterGroupRef.value)
-  // 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' })
-  //   },
-  // }
-  // )
-  // }
-  // }
 })
 </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>