fix(SW-2449): Small cluster changes and added optional boundsPadding prop

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} />

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) {

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", () => {

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>