Clear inactive clusters on view switch

app/components/catalog/CatalogMap.vue

@@ -800,12 +800,11 @@ const initServerClusteringLayersByType = async (map: MapboxMapType) => {
       const features = map.queryRenderedFeatures(e.point, { layers: [clusterLayerId] })
       const feature = features[0]
       if (!feature) return
-      const clusterId = feature.properties?.cluster_id
-      const source = map.getSource(sourceIdByType) as mapboxgl.GeoJSONSource
-      source.getClusterExpansionZoom(clusterId, (err, zoom) => {
-        if (err) return
-        const geometry = feature.geometry as GeoJSON.Point
-        map.easeTo({ center: geometry.coordinates as [number, number], zoom: zoom || 4 })
+      const expansionZoom = feature.properties?.expansionZoom
+      const geometry = feature.geometry as GeoJSON.Point
+      map.easeTo({
+        center: geometry.coordinates as [number, number],
+        zoom: expansionZoom || map.getZoom() + 2
       })
     })
 

app/components/page/CatalogPage.vue

@@ -316,8 +316,15 @@ const clusterLoading = computed(() => {
   return offerClusters.loading.value
 })
 
+const clearInactiveClusters = (active: 'offer' | 'hub' | 'supplier') => {
+  if (active !== 'offer') offerClusters.clearNodes()
+  if (active !== 'hub') hubClusters.clearNodes()
+  if (active !== 'supplier') supplierClusters.clearNodes()
+}
+
 const fetchActiveClusters = async () => {
   if (!currentBounds.value) return
+  clearInactiveClusters(activeClusterType.value)
   if (activeClusterType.value === 'hub') {
     await hubClusters.fetchClusters(currentBounds.value)
     return
@@ -333,6 +340,7 @@ const fetchActiveClusters = async () => {
 watch(mapViewMode, async () => {
   if (!props.useServerClustering) return
   if (useTypedClusters.value) {
+    clearInactiveClusters(activeClusterType.value)
     if (currentBounds.value) {
       await fetchActiveClusters()
     }