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"
>
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(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"
>
-
+