fix: maps

Author: remigermain

package.json

@@ -117,6 +117,7 @@
     "@trust/webcrypto": "^0.9.2",
     "@types/faker": "5",
     "@types/leaflet": "^1.9.21",
+    "@types/leaflet.markercluster": "^1.5.6",
     "@types/mixpanel-browser": "^2",
     "@typescript-eslint/eslint-plugin": "^8.46.0",
     "@typescript-eslint/parser": "^8.46.0",

src/components/location/LocationDrawer.vue

@@ -224,7 +224,7 @@ watchEffect(() => {
 
 const mapRef = useTemplateRef('map')
 
-const centerMap = () => mapRef.value?.map.centerMap()
+const centerMap = () => mapRef.value?.centerMap()
 
 const onLocationCreated = (location) => {
   suggestedLocations.value = null

src/components/map/BaseMap.vue

@@ -14,7 +14,7 @@
 <script setup lang="ts">
 import * as L from 'leaflet'
 import fixLeaflet from '@/app/fixLeaflet'
-import 'leaflet.markercluster/dist/leaflet.markercluster.js'
+import 'leaflet.markercluster'
 import 'leaflet/dist/leaflet.css'
 import 'leaflet.markercluster/dist/MarkerCluster.css'
 import 'leaflet.markercluster/dist/MarkerCluster.Default.css'
@@ -36,9 +36,9 @@ const emit = defineEmits<{
   'map-moved': []
 }>()
 
-const mapInstance = ref(null)
+const mapInstance = ref<L.Map>(null)
+const markerClusterInstance = ref<L.MarkerClusterGroup>(null)
 const mapRef = useTemplateRef('map')
-const markerCluster = ref(null)
 const markers = ref(new Map())
 
 const MAP_URL = 'https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png'
@@ -155,28 +155,27 @@ const addPointer = async ({ markerContent, location, tooltip }, eventHandlers: a
 
   markers.value.set(location.id, marker)
 
-  if (markerCluster.value) {
-    markerCluster.value.addLayers(marker)
+  if (markerClusterInstance.value) {
+    markerClusterInstance.value.addLayers([marker])
+    markerClusterInstance.value.refreshClusters()
   } else {
-    marker.addTo(mapInstance.value)
+    marker.addTo(mapInstance.value as L.Map)
   }
-
-  if (markerCluster.value) markerCluster.value.refreshClusters()
 }
 
 const removePointer = (location) => {
   const marker = markers.value.get(location.id)
 
   if (marker) {
-    if (markerCluster.value) {
-      marker.value.removeFrom(markerCluster.value)
+    if (markerClusterInstance.value) {
+      marker.value.removeFrom(markerClusterInstance.value)
     } else {
       mapInstance.value.removeLayer(marker)
     }
   }
   markers.value.delete(location.id)
-  if (markerCluster.value) {
-    markerCluster.value.refreshClusters()
+  if (markerClusterInstance.value) {
+    markerClusterInstance.value.refreshClusters()
   }
   // force readraw
   mapInstance.value.invalidateSize()
@@ -197,15 +196,14 @@ onMounted(() => {
   const map = L.map(mapRef.value, CONFIG)
 
   if (props.useCluster) {
-    // @ts-expect-error ignore markercluster
     const markerCluster = L.markerClusterGroup({
       removeOutsideVisibleBounds: true,
       chunkedLoading: true,
       iconCreateFunction: createClusterIcons,
     })
 
     map.addLayer(markerCluster)
-    markerCluster.value = markerCluster
+    markerClusterInstance.value = markerCluster
   }
 
   map.on('contextmenu', (e) => emit('contextmenu', e))

src/components/project/map/LocationDrawer.vue

@@ -224,7 +224,7 @@ watchEffect(() => {
 
 const mapRef = useTemplateRef('map')
 
-const centerMap = () => mapRef.value?.map.centerMap()
+const centerMap = () => mapRef.value?.centerMap()
 
 const onLocationCreated = (location) => {
   suggestedLocations.value = null

yarn.lock

@@ -2931,7 +2931,14 @@
   resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.15.tgz#596a1747233694d50f6ad8a7869fcb6f56cf5841"
   integrity sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==
 
-"@types/leaflet@^1.9.21":
+"@types/leaflet.markercluster@^1.5.6":
+  version "1.5.6"
+  resolved "https://registry.yarnpkg.com/@types/leaflet.markercluster/-/leaflet.markercluster-1.5.6.tgz#3fff147abeee2303b3814d5799151ae14d72654e"
+  integrity sha512-I7hZjO2+isVXGYWzKxBp8PsCzAYCJBc29qBdFpquOCkS7zFDqUsUvkEOyQHedsk/Cy5tocQzf+Ndorm5W9YKTQ==
+  dependencies:
+    "@types/leaflet" "^1.9"
+
+"@types/leaflet@^1.9", "@types/leaflet@^1.9.21":
   version "1.9.21"
   resolved "https://registry.yarnpkg.com/@types/leaflet/-/leaflet-1.9.21.tgz#542e8f91250bc444f8a1416d472f5b518d83e979"
   integrity sha512-TbAd9DaPGSnzp6QvtYngntMZgcRk+igFELwR2N99XZn7RXUdKgsXMR+28bUO0rPsWp8MIu/f47luLIQuSLYv/w==