WIP (currently works flaky)

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

@@ -24,14 +24,11 @@ reloadViewDataHook?.on(async () => {
 })
 
 function addMarker(lat: number, long: number, popupContent: string) {
-  L.marker([50.5, 0]).addTo(myMapRef.value)
-
-  console.log('myMapRef.value', myMapRef.value)
   const markerNew = markerRef?.value?.([lat, long])
 
   markersRef?.value?.addLayer(markerNew)
 
-  myMapRef?.value?.addLayer(markerRef.value)
+  myMapRef?.value?.addLayer(markersRef.value)
 
   if (markerNew) {
     markerNew.bindPopup(popupContent)
@@ -73,15 +70,12 @@ onMounted(async () => {
   const myMap = map('map').setView([51.505, -0.09], 13)
   markerRef.value = marker
   myMapRef.value = myMap
-  markersRef.value = L.markerClusterGroup()
+  markersRef.value = L.markerClusterGroup({
-  // addMarker(52, 0, 'jdksauwdk')
+    iconCreateFunction(cluster) {
-  //   {
+      return L.divIcon({ html: `<b>${cluster.getChildCount()}</b>` })
-  //   iconCreateFunction(cluster) {
+      // return L.divIcon({ html: `<b>${cluster.getChildCount()}</b>`, className: 'FOOBAR' })
-  //     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,
@@ -91,9 +85,9 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div class="flex flex-col h-full w-full nounderline">
+  <div class="flex flex-col h-full w-full">
     <client-only placeholder="Loading...">
-      <div id="map"></div>
+      <div class="nounderline" id="map"></div>
     </client-only>
   </div>
 </template>
@@ -102,15 +96,15 @@ onMounted(async () => {
 #map {
   height: 100vh;
 }
-.nounderline {
+.nounderline a {
   text-decoration: none;
 }
 
-/* .marker-cluster b {
+.marker-cluster b {
   background-color: rgba(226, 36, 36, 0.6);
-} */
+}
 
-/* .FOOBAR {
+.FOOBAR {
   background-color: pink;
-} */
+}
 </style>