Render map points by entity type

app/components/page/CatalogPage.vue

@@ -17,7 +17,9 @@
           ref="mapRef"
           :map-id="mapId"
           :items="isInfoMode ? [] : (useServerClustering ? [] : itemsWithCoords)"
-          :clustered-points="isInfoMode ? [] : (useServerClustering ? clusteredNodes : [])"
+          :clustered-points="isInfoMode ? [] : (useServerClustering && !useTypedClusters ? clusteredNodes : [])"
+          :clustered-points-by-type="isInfoMode ? undefined : (useServerClustering && useTypedClusters ? clusteredPointsByType : undefined)"
+          :visible-types="useServerClustering && useTypedClusters ? visibleTypes : undefined"
           :use-server-clustering="useServerClustering && !isInfoMode"
           :point-color="activePointColor"
           :entity-type="activeEntityType"
@@ -246,6 +248,7 @@ const props = withDefaults(defineProps<{
   loading?: boolean
   useServerClustering?: boolean
   clusterNodeType?: string
+  useTypedClusters?: boolean
   mapId?: string
   pointColor?: string
   hoveredId?: string
@@ -266,6 +269,7 @@ const props = withDefaults(defineProps<{
   loading: false,
   useServerClustering: true,
   clusterNodeType: 'offer',
+  useTypedClusters: false,
   mapId: 'catalog-map',
   pointColor: '#f97316',
   items: () => [],
@@ -284,11 +288,59 @@ const emit = defineEmits<{
   'update:filter-by-bounds': [value: boolean]
 }>()
 
-// Server-side clustering - use computed node type based on view mode
-const { clusteredNodes, fetchClusters, loading: clusterLoading, clearNodes } = useClusteredNodes(undefined, activeClusterNodeType)
+const useTypedClusters = computed(() => props.useTypedClusters && props.useServerClustering)
+
+// Server-side clustering (single-type mode)
+const { clusteredNodes, fetchClusters, loading: singleClusterLoading, clearNodes } = useClusteredNodes(undefined, activeClusterNodeType)
+
+// Server-side clustering (typed mode)
+const offerClusters = useClusteredNodes(undefined, ref('offer'))
+const hubClusters = useClusteredNodes(undefined, ref('logistics'))
+const supplierClusters = useClusteredNodes(undefined, ref('supplier'))
+
+const clusteredPointsByType = computed(() => ({
+  offer: offerClusters.clusteredNodes.value,
+  hub: hubClusters.clusteredNodes.value,
+  supplier: supplierClusters.clusteredNodes.value
+}))
+
+const activeClusterType = computed<'offer' | 'hub' | 'supplier'>(() => {
+  if (mapViewMode.value === 'hubs') return 'hub'
+  if (mapViewMode.value === 'suppliers') return 'supplier'
+  return 'offer'
+})
+
+const visibleTypes = computed(() => [activeClusterType.value])
+
+const clusterLoading = computed(() => {
+  if (!useTypedClusters.value) return singleClusterLoading.value
+  if (activeClusterType.value === 'hub') return hubClusters.loading.value
+  if (activeClusterType.value === 'supplier') return supplierClusters.loading.value
+  return offerClusters.loading.value
+})
+
+const fetchActiveClusters = async () => {
+  if (!currentBounds.value) return
+  if (activeClusterType.value === 'hub') {
+    await hubClusters.fetchClusters(currentBounds.value)
+    return
+  }
+  if (activeClusterType.value === 'supplier') {
+    await supplierClusters.fetchClusters(currentBounds.value)
+    return
+  }
+  await offerClusters.fetchClusters(currentBounds.value)
+}
 
 // Refetch clusters when view mode changes
 watch(mapViewMode, async () => {
+  if (!props.useServerClustering) return
+  if (useTypedClusters.value) {
+    if (currentBounds.value) {
+      await fetchActiveClusters()
+    }
+    return
+  }
   // Clear old data first
   clearNodes()
   // Refetch with current bounds if available
@@ -338,7 +390,11 @@ const onBoundsChange = (bounds: MapBounds) => {
   emit('bounds-change', bounds)
   // Don't fetch clusters when in info mode
   if (props.useServerClustering && !isInfoMode.value) {
-    fetchClusters(bounds)
+    if (useTypedClusters.value) {
+      fetchActiveClusters()
+    } else {
+      fetchClusters(bounds)
+    }
   }
 }