From b94ca595a1eda27a6a62d548ead56cd4852d7294 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?No=C3=A9=20Viricel?= <noe.viricel@wazo-lab.io>
Date: Tue, 4 Jun 2024 10:14:03 +0200
Subject: [PATCH] feat: show superposed POIs #226

---
 components/MainMap/MapFeatures.vue |   8 +-
 components/Map/MapBase.vue         |  18 +--
 lib/clusters.ts                    |  50 ++++++++
 lib/markerLayerFactory.ts          | 197 +++++++++++++++--------------
 4 files changed, 157 insertions(+), 116 deletions(-)

diff --git a/components/MainMap/MapFeatures.vue b/components/MainMap/MapFeatures.vue
index 352cf504..2b97fbac 100644
--- a/components/MainMap/MapFeatures.vue
+++ b/components/MainMap/MapFeatures.vue
@@ -117,7 +117,6 @@ export default defineNuxtComponent({
     const { config } = storeToRefs(useSiteStore())
     const mapStore = useMapStore()
     const { center, selectedFeature } = storeToRefs(mapStore)
-    const mapStyleLoaded = ref(false)
 
     return {
       center,
@@ -125,20 +124,17 @@ export default defineNuxtComponent({
       device,
       mapBase: ref<InstanceType<typeof MapBase>>(),
       mapStore,
-      mapStyleLoaded,
       selectedFeature,
     }
   },
 
   data(): {
     map: Map
-    markers: { [id: string]: Marker }
     selectedFeatureMarker?: Marker
     selectedBackground: MapStyleEnum
   } {
     return {
       map: null!,
-      markers: {},
       selectedBackground: DEFAULT_MAP_STYLE,
     }
   },
@@ -259,11 +255,9 @@ export default defineNuxtComponent({
       })
 
       this.showSelectedFeature()
-      this.mapStyleLoaded = true
     },
 
     // Map interactions
-
     onClick(e: MapMouseEvent) {
       let selectedFeatures = STYLE_LAYERS.map((layerId) => {
         return this.map.queryRenderedFeatures(e.point, {
@@ -315,7 +309,7 @@ export default defineNuxtComponent({
 
     // Map view
     onMapRender() {
-      if (this.mapStyleLoaded && this.selectedFeature) {
+      if (this.map && this.map.getSource(POI_SOURCE) && this.map.isSourceLoaded(POI_SOURCE) && this.selectedFeature) {
         const marker = createMarker((this.selectedFeature.geometry as GeoJSON.Point).coordinates as [number, number])
         this.setSelectedFeatureMarker(marker)
       }
diff --git a/components/Map/MapBase.vue b/components/Map/MapBase.vue
index 3410a410..645d9ddf 100644
--- a/components/Map/MapBase.vue
+++ b/components/Map/MapBase.vue
@@ -104,14 +104,12 @@ export default defineNuxtComponent({
     map: maplibregl.Map
     poiFilter: PoiFilter | null
     poiLayerTemplate: maplibregl.LayerSpecification | undefined
-    markers: { [id: string]: maplibregl.Marker }
     fullAttribution: string
   } {
     return {
       map: null!,
       poiFilter: null,
       poiLayerTemplate: undefined,
-      markers: {},
       fullAttribution: '',
     }
   },
@@ -198,6 +196,7 @@ export default defineNuxtComponent({
         .filter(feature => !!feature)
         .map((feature, index) => {
           feature.id = index
+
           return feature
         })
     },
@@ -241,7 +240,7 @@ export default defineNuxtComponent({
         cluster: cluster === undefined ? true : cluster,
         clusterRadius: 32,
         clusterProperties: clusterProps,
-        clusterMaxZoom: 15,
+        clusterMaxZoom: 20,
         tolerance: 0.6,
         data: {
           type: 'FeatureCollection',
@@ -342,7 +341,7 @@ export default defineNuxtComponent({
       this.$emit('mapStyleLoad', style)
     },
 
-    onMapRender(
+    async onMapRender(
       eventName:
         | 'mapData'
         | 'mapDragEnd'
@@ -353,14 +352,9 @@ export default defineNuxtComponent({
         | 'mapZoomEnd',
       event: any,
     ) {
-      if (
-        this.map
-        && this.map.getSource(POI_SOURCE)
-        && this.map.isSourceLoaded(POI_SOURCE)
-      ) {
-        this.markers = updateMarkers(
+      if (this.map && this.map.getSource(POI_SOURCE) && this.map.isSourceLoaded(POI_SOURCE)) {
+        await updateMarkers(
           this.map as maplibregl.Map,
-          this.markers,
           POI_SOURCE,
           this.fitBounds,
           (feature: ApiPoi, marker?: Marker) => this.$emit('featureClick', feature, marker),
@@ -415,7 +409,7 @@ export default defineNuxtComponent({
   </div>
 </template>
 
-<style scoped>
+<style lang="scss" scoped>
 :deep(.cluster-item) {
   cursor: pointer;
 }
diff --git a/lib/clusters.ts b/lib/clusters.ts
index 703def09..fab7bb05 100644
--- a/lib/clusters.ts
+++ b/lib/clusters.ts
@@ -1,3 +1,8 @@
+import { createApp } from 'vue'
+import type { Marker } from 'maplibre-gl'
+import type { ApiPoi } from './apiPois'
+import TeritorioIconBadge from '~/components/UI/TeritorioIconBadge.vue'
+
 function getMarkerDonutSegment(start: number, end: number, r: number, r0: number, colorFill: string): string {
   if (end - start === 1)
     end -= 0.00001
@@ -39,6 +44,51 @@ function getMarkerDonutSegment(start: number, end: number, r: number, r0: number
   ].join(' ')
 }
 
+export function createDeclusterizedCluster(
+  features: GeoJSON.Feature[],
+  clusterCoords: [number, number],
+  markerClickCallBack: ((feature: ApiPoi, marker?: Marker) => void) | undefined,
+): HTMLElement {
+  const clusterWrapper = document.createElement('div')
+  features.forEach((feature, index) => {
+    const el = document.createElement('div')
+    el.id = `m${feature.id}`
+
+    createApp(TeritorioIconBadge, {
+      colorFill: feature.properties?.display.color_fill,
+      picto: feature.properties?.display.icon,
+      image: feature.properties!['image:thumbnail'],
+      size: null,
+      text: feature.properties?.display.name,
+    }).mount(el)
+
+    if (feature.properties?.editorial?.popup_fields) {
+      // POI event listener
+      el.addEventListener('click', (e: MouseEvent) => {
+        e.stopPropagation()
+
+        const middle = features.length / 2
+        const offset
+          = index + 1 <= middle
+            ? ((index + 1 - middle) * 32) - 16
+            : ((index - middle) * 32) + 16
+
+        const marker = createMarker(clusterCoords).setOffset([offset, -10])
+
+        if (markerClickCallBack)
+          markerClickCallBack(feature as ApiPoi, marker)
+      })
+    }
+
+    clusterWrapper.append(el)
+  })
+  clusterWrapper.classList.add('cluster-item')
+  clusterWrapper.style.display = 'flex'
+  clusterWrapper.style.flexWrap = 'wrap'
+  clusterWrapper.style.maxWidth = '200px'
+  return clusterWrapper
+}
+
 export function createMarkerDonutChart(countPerColor: Record<string, number>, totalCount: number): HTMLElement {
   const r
     = totalCount >= 1000
diff --git a/lib/markerLayerFactory.ts b/lib/markerLayerFactory.ts
index 54ffcb5e..35ce05c6 100644
--- a/lib/markerLayerFactory.ts
+++ b/lib/markerLayerFactory.ts
@@ -3,7 +3,8 @@ import type {
   GeoJSONSource,
   LayerSpecification,
   LngLatBounds,
-  Map,
+  Map as MapGL,
+  MapGeoJSONFeature,
   Marker,
   SymbolLayerSpecification,
 } from 'maplibre-gl'
@@ -11,8 +12,7 @@ import { createApp } from 'vue'
 
 import type { ApiPoi } from './apiPois'
 import { getBBoxFeatures } from './bbox'
-import { createMarkerDonutChart } from './clusters'
-
+import { createDeclusterizedCluster, createMarkerDonutChart } from './clusters'
 import TeritorioIconBadge from '~/components/UI/TeritorioIconBadge.vue'
 import type { TupleLatLng } from '~/utils/types'
 import { createMarker } from '~/composables/useMarker'
@@ -103,115 +103,118 @@ export function makerHtmlFactory(
   return marker
 }
 
-export function updateMarkers(
-  map: Map,
-  markers: { [id: string]: Marker },
+let markersOnScreen = new Map<string, Marker>()
+
+export async function updateMarkers(
+  map: MapGL,
   src: string,
   fitBounds: (bounds: LngLatBounds, options: FitBoundsOptions) => void,
   markerClickCallBack: ((feature: ApiPoi, marker?: Marker) => void) | undefined,
 ) {
-  const markerIdPrevious = Object.keys(markers)
-  const markerIdcurrent: string[] = []
-
+  const source = map.getSource(src) as GeoJSONSource
   const features = map.querySourceFeatures(src).filter(feature => feature.geometry.type === 'Point')
-  // for every cluster on the screen, create an HTML marker for it (if we didn't yet),
+  const newMarkers = new Map<string, Marker>()
+  const featuresMap = new Map<string, MapGeoJSONFeature>()
+
+  // Transform to Map in order to have unique features
+  features.forEach(f => featuresMap.set(f.id?.toString() || f.properties.metadata.id, f))
+
+  // for every cluster / POI on the screen, create an HTML marker for it (if we didn't yet),
   // and add it to the map if it's not there already
-  for (let i = 0; i < features.length; i++) {
-    const coords = (features[i].geometry as GeoJSON.Point).coordinates as [
-      number,
-      number,
-    ]
-    const props = features[i].properties
-    if (props?.cluster) {
-      const id = `c${props.cluster_id}`
-      markerIdcurrent.push(id)
-      if (!markers[id]) {
-        const {
-          cluster: _a,
-          cluster_id: _b,
-          point_count,
-          _c: _d,
-          point_count_abbreviated: _e,
-          ...countPercolor
-        } = props
-        const element = createMarkerDonutChart(countPercolor, point_count)
-
-        markers[id] = createMarker(coords, { element })
-        markers[id].addTo(map)
-
-        element.addEventListener('click', async (e) => {
-          e.stopPropagation()
-          const source = map.getSource(src) as GeoJSONSource
-
-          if (source && 'getClusterLeaves' in source) {
-            const leaves = await source.getClusterLeaves(props.cluster_id, props.point_count, 0)
-            if (leaves.length) {
-              const bounds = getBBoxFeatures(leaves)
-              if (bounds)
-                fitBounds(bounds, {})
+  for (const [id, feature] of featuresMap) {
+    const coords = (feature.geometry as GeoJSON.Point).coordinates as [number, number]
+    const props = feature.properties
+    let marker: Marker | undefined
+
+    if (props.cluster) {
+      marker = markersOnScreen.get(id)
+
+      if (!marker) {
+        let clusterHTML
+        const leaves = await source.getClusterLeaves(props.cluster_id, props.point_count, 0)
+
+        if (leaves.length <= 5 || map.getZoom() >= 17) {
+          clusterHTML = createDeclusterizedCluster(leaves, coords, markerClickCallBack)
+        }
+        else {
+          const {
+            cluster: _a,
+            cluster_id: _b,
+            point_count,
+            _c: _d,
+            point_count_abbreviated: _e,
+            ...countPercolor
+          } = props
+
+          clusterHTML = createMarkerDonutChart(countPercolor, point_count)
+
+          // Cluster click event
+          clusterHTML.addEventListener('click', async (e) => {
+            e.stopPropagation()
+
+            if (source && 'getClusterLeaves' in source) {
+              const leaves = await source.getClusterLeaves(props.cluster_id, props.point_count, 0)
+              if (leaves) {
+                const bounds = getBBoxFeatures(leaves as GeoJSON.Feature[])
+                if (bounds)
+                  fitBounds(bounds, {})
+              }
             }
-          }
-        })
+          })
+        }
+
+        marker = createMarker(coords, { element: clusterHTML })
+        marker.addTo(map)
       }
     }
-    else if (props?.metadata) {
-      if (typeof props.metadata === 'string')
-        props.metadata = JSON.parse(props.metadata)
-
-      const id = `m${features[i].id}`
-      markerIdcurrent.push(id)
-
-      // Workaround to correct shifting POI markers after zoom-in
-      if (!markers[id] || (markers[id] && (markers[id]?.getLngLat().lat !== (features[i].geometry as GeoJSON.Point).coordinates[1]))) {
-        if (markers[id])
-          markers[id].remove()
-
-        const markerCoords
-            = features[i].geometry.type === 'Point'
-            && ((features[i].geometry as GeoJSON.Point).coordinates as TupleLatLng)
-        if (markerCoords) {
-          if (typeof props.display === 'string')
-            props.display = JSON.parse(props.display)
-
-          if (typeof props.editorial === 'string')
-            props.editorial = JSON.parse(props.editorial)
-
-          // Marker
-          markers[id] = makerHtmlFactory(
-            id,
-            markerCoords, // Using this to avoid misplaced marker
-            props.display?.color_fill || '#000000',
-            props.display?.icon || '#000000',
-            props['image:thumbnail'],
-            null,
-            props.display?.text,
-          )
-
-          // Click handler
-          if (markerClickCallBack && props.editorial?.popup_fields) {
-            const el = markers[id].getElement()
-
-            el.addEventListener('click', (e: MouseEvent) => {
-              e.stopPropagation()
-              const pinMarker = createMarker(markerCoords)
-
-              markerClickCallBack(features[i] as unknown as ApiPoi, pinMarker)
-            })
-          }
-          markers[id].addTo(map)
+    else if (props.metadata) {
+      marker = markersOnScreen.get(id)
+
+      if (!marker) {
+        if (typeof props.metadata === 'string')
+          props.metadata = JSON.parse(props.metadata)
+
+        if (typeof props.display === 'string')
+          props.display = JSON.parse(props.display)
+
+        if (typeof props.editorial === 'string')
+          props.editorial = JSON.parse(props.editorial)
+
+        marker = makerHtmlFactory(
+          id,
+          coords,
+          props.display?.color_fill || '#000000',
+          props.display?.icon || '#000000',
+          props['image:thumbnail'],
+          null,
+          props.display?.text,
+        )
+
+        if (markerClickCallBack && props.editorial?.popup_fields) {
+          const el = marker.getElement()
+
+          // POI click event
+          el.addEventListener('click', (e: MouseEvent) => {
+            e.stopPropagation()
+            const pinMarker = createMarker(coords)
+
+            markerClickCallBack(feature as unknown as ApiPoi, pinMarker)
+          })
         }
+
+        marker.addTo(map)
       }
     }
+
+    newMarkers.set(id, marker!)
   }
 
   // for every marker we've added previously, remove those that are no longer visible
-  const markerIdcurrentSet = new Set(markerIdcurrent)
-  markerIdPrevious.forEach((id) => {
-    if (!markerIdcurrentSet.has(id)) {
-      markers[id].remove()
-      delete markers[id]
+  for (const [id, marker] of markersOnScreen) {
+    if (!newMarkers.has(id)) {
+      marker.remove()
     }
-  })
+  }
 
-  return markers
+  markersOnScreen = newMarkers
 }