From 21e7932058ec5e04cce6acabf66679107770eed9 Mon Sep 17 00:00:00 2001
From: Erik Tiekstra <erik.tiekstra@scandichotels.com>
Date: Mon, 5 May 2025 12:27:52 +0200
Subject: [PATCH] fix(SW-2449): Small cluster changes and added optional
 boundsPadding prop

---
 .../OverviewMapContainer/index.tsx                     |  1 +
 .../DestinationPage/Map/DynamicMap/index.tsx           |  6 ++++--
 .../DestinationPage/Map/MapContent/index.tsx           | 10 +++++-----
 .../ContentType/DestinationPage/Map/index.tsx          |  2 +-
 4 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/OverviewMapContainer/index.tsx b/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/OverviewMapContainer/index.tsx
index b132b8e2e..2828a02ea 100644
--- a/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/OverviewMapContainer/index.tsx
+++ b/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/OverviewMapContainer/index.tsx
@@ -26,6 +26,7 @@ export default async function OverviewMapContainer() {
         mapId={googleMapId}
         markers={markers}
         fitBounds
+        boundsPadding={0}
         gestureHandling="cooperative"
       >
         <MapContent geojson={geoJson} />
diff --git a/apps/scandic-web/components/ContentType/DestinationPage/Map/DynamicMap/index.tsx b/apps/scandic-web/components/ContentType/DestinationPage/Map/DynamicMap/index.tsx
index 598e9ad97..155385e09 100644
--- a/apps/scandic-web/components/ContentType/DestinationPage/Map/DynamicMap/index.tsx
+++ b/apps/scandic-web/components/ContentType/DestinationPage/Map/DynamicMap/index.tsx
@@ -32,6 +32,7 @@ interface DynamicMapProps {
   defaultCenter?: google.maps.LatLngLiteral
   defaultZoom?: number
   fitBounds?: boolean
+  boundsPadding?: number
   gestureHandling?: "greedy" | "cooperative" | "auto" | "none"
   onClose?: () => void
 }
@@ -42,6 +43,7 @@ export default function DynamicMap({
   defaultCenter = BACKUP_COORDINATES,
   defaultZoom = 3,
   fitBounds = true,
+  boundsPadding = 100,
   onClose,
   gestureHandling = "auto",
   children,
@@ -68,10 +70,10 @@ export default function DynamicMap({
       markers.forEach((marker) => {
         bounds.extend(marker.coordinates)
       })
-      map.fitBounds(bounds, 100)
+      map.fitBounds(bounds, boundsPadding)
       setHasFittedBounds(true)
     }
-  }, [map, fitBounds, markers, hasFittedBounds])
+  }, [map, fitBounds, markers, hasFittedBounds, boundsPadding])
 
   useHandleKeyUp((event: KeyboardEvent) => {
     if (event.key === "Escape" && onClose) {
diff --git a/apps/scandic-web/components/ContentType/DestinationPage/Map/MapContent/index.tsx b/apps/scandic-web/components/ContentType/DestinationPage/Map/MapContent/index.tsx
index 54f349819..871ff6f76 100644
--- a/apps/scandic-web/components/ContentType/DestinationPage/Map/MapContent/index.tsx
+++ b/apps/scandic-web/components/ContentType/DestinationPage/Map/MapContent/index.tsx
@@ -19,20 +19,20 @@ import type {
 
 interface MapContentProps {
   geojson: MarkerGeojson
-  hasActiveFilters?: boolean
+  disableClustering?: boolean
 }
 
 // Important this is outside the component to avoid re-creating the object on each render
 // which is making the useSupercluster hook fail
+// Options are defined according to the supercluster documentation: https://github.com/mapbox/supercluster/blob/main/README.md#options
 const CLUSTER_OPTIONS = {
-  extent: 256,
-  radius: 80,
   maxZoom: 14,
+  extent: 256,
 }
 
 export default function MapContent({
   geojson,
-  hasActiveFilters,
+  disableClustering,
 }: MapContentProps) {
   const { setActiveMarker, activeMarker } = useDestinationPageHotelsMapStore()
   const map = useMap()
@@ -41,7 +41,7 @@ export default function MapContent({
     useSupercluster<MarkerProperties>(geojson, CLUSTER_OPTIONS)
 
   // Based on the length of active filters, we decide if should show clusters or individual markers
-  const markerList = hasActiveFilters ? geojson.features : clusters
+  const markerList = disableClustering ? geojson.features : clusters
 
   useEffect(() => {
     map?.addListener("click", () => {
diff --git a/apps/scandic-web/components/ContentType/DestinationPage/Map/index.tsx b/apps/scandic-web/components/ContentType/DestinationPage/Map/index.tsx
index c57fa635a..d22b19ad8 100644
--- a/apps/scandic-web/components/ContentType/DestinationPage/Map/index.tsx
+++ b/apps/scandic-web/components/ContentType/DestinationPage/Map/index.tsx
@@ -140,7 +140,7 @@ export default function Map({
           fitBounds={!activeHotel}
           gestureHandling="greedy"
         >
-          <MapContent geojson={geoJson} hasActiveFilters={hasActiveFilters} />
+          <MapContent geojson={geoJson} disableClustering={hasActiveFilters} />
         </DynamicMap>
       </div>
     </MapProvider>