WIP - trying out new leaflet usage structure, step by step (blank map can be seen)

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

@@ -1,17 +1,23 @@
 <script lang="ts" setup>
 import 'leaflet/dist/leaflet.css'
-import * as L from 'leaflet'
+// import type { MarkerClusterGroup } from 'leaflet'
+import L from 'leaflet'
 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 { loadMapData, loadMapMeta } = useMapViewStoreOrThrow()
 
 const markerRef = ref()
 const myMapRef = ref()
-const markersRef = ref<L.MarkerClusterGroup | undefined>()
+// const markersRef = ref<MarkerClusterGroup | undefined>()
+const mapContainerRef = ref<HTMLElement>()
 
 onBeforeMount(async () => {
   await loadMapMeta()
@@ -23,88 +29,107 @@ reloadViewDataHook?.on(async () => {
   loadMapMeta()
 })
 
-function addMarker(lat: number, long: number, popupContent: string) {
+watchEffect(() => {
-  const markerNew = markerRef?.value?.([lat, long])
+  if (mapContainerRef.value) {
+    console.log('NOW')
+  } else {
+    // not mounted yet, or the element was unmounted (e.g. by v-if)
+  }
+})
 
-  markersRef?.value?.addLayer(markerNew)
+// function addMarker(lat: number, long: number, popupContent: string) {
+//   L.marker([50.5, 0]).addTo(myMapRef.value)
 
-  myMapRef?.value?.addLayer(markersRef.value)
+//   console.log('myMapRef.value', myMapRef.value)
+//   const markerNew = markerRef?.value?.([lat, long])
 
-  if (markerNew) {
+//   markersRef?.value?.addLayer(markerNew)
-    markerNew.bindPopup(popupContent)
-  }
-  return markerNew
-}
 
-watch([formattedData, mapMetaData], () => {
+//   myMapRef?.value?.addLayer(markerRef.value)
-  markersRef.value?.clearLayers()
 
-  formattedData.value?.forEach((row) => {
+//   if (markerNew) {
-    const primaryGeoDataColumnTitle = geoDataFieldColumn.value?.title
+//     markerNew.bindPopup(popupContent)
+//   }
+//   return markerNew
+// }
 
-    if (primaryGeoDataColumnTitle == null) {
+// watch([formattedData, mapMetaData], () => {
-      throw new Error('Cannot find primary geo data column title')
+//   markersRef.value?.clearLayers()
-    }
 
-    const primaryGeoDataValue = row[primaryGeoDataColumnTitle]
+//   formattedData.value?.forEach((row) => {
+//     const primaryGeoDataColumnTitle = geoDataFieldColumn.value?.title
 
-    const listItems = Object.entries(row)
+//     if (primaryGeoDataColumnTitle == null) {
-      .map(([key, val]) => {
+//       throw new Error('Cannot find primary geo data column title')
-        const prettyVal = val !== null && (typeof val === 'object' || Array.isArray(val)) ? JSON.stringify(val) : val
+//     }
 
-        return `<li><b>${key}</b>: <br/>${prettyVal}</li>`
+//     const primaryGeoDataValue = row[primaryGeoDataColumnTitle]
-      })
-      .join('')
 
-    const popupContent = `<ul>${listItems}</ul>`
+//     const listItems = Object.entries(row)
+//       .map(([key, val]) => {
+//         const prettyVal = val !== null && (typeof val === 'object' || Array.isArray(val)) ? JSON.stringify(val) : val
 
-    const [lat, long] = primaryGeoDataValue.split(';').map(parseFloat)
+//         return `<li><b>${key}</b>: <br/>${prettyVal}</li>`
+//       })
+//       .join('')
 
-    addMarker(lat, long, popupContent)
+//     const popupContent = `<ul>${listItems}</ul>`
-  })
+
-})
+//     const [lat, long] = primaryGeoDataValue.split(';').map(parseFloat)
+
+//     addMarker(lat, long, popupContent)
+//   })
+// })
 
 onMounted(async () => {
-  const { map, tileLayer, marker } = await import('leaflet')
+  // if (process.client) {
-  await import('leaflet.markercluster')
+  // const myMap = L.map('mapContainer').setView([51.505, -0.09], 13)
-  const myMap = map('map').setView([51.505, -0.09], 13)
+  // if (mapContainerRef.value != null) {
-  markerRef.value = marker
+  console.log('mapContainerRef.value', mapContainerRef.value)
-  myMapRef.value = myMap
+  const myMap = L.map(mapContainerRef.value!).setView([51.505, -0.09], 13)
-  markersRef.value = L.markerClusterGroup({
+
-    iconCreateFunction(cluster) {
+  L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
-      return L.divIcon({ html: `<b>${cluster.getChildCount()}</b>` })
-      // return L.divIcon({ html: `<b>${cluster.getChildCount()}</b>`, className: 'FOOBAR' })
-    },
-  })
-
-  tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
     maxZoom: 10,
     attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
   }).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' })
+  //   },
+  // }
+  // )
+  // }
+  // }
 })
 </script>
 
 <template>
-  <div class="flex flex-col h-full w-full">
+  <div class="flex flex-col h-full w-full nounderline">
-    <client-only placeholder="Loading...">
+    <!-- <client-only placeholder="Loading..."> -->
-      <div class="nounderline" id="map"></div>
+    <div id="mapContainer" ref="mapContainerRef" class="FOOBAR"></div>
-    </client-only>
+    <!-- </client-only> -->
   </div>
 </template>
 
 <style scoped>
-#map {
+#mapContainer {
   height: 100vh;
 }
-.nounderline a {
+.nounderline {
   text-decoration: none;
 }
 
-.marker-cluster b {
+/* .marker-cluster b {
   background-color: rgba(226, 36, 36, 0.6);
-}
+} */
 
-.FOOBAR {
+/* .FOOBAR {
   background-color: pink;
-}
+} */
 </style>