From 651a388fa38dc7d61265f16ae107df4e19dc004d Mon Sep 17 00:00:00 2001 From: Erik Tiekstra Date: Mon, 2 Jun 2025 08:12:07 +0000 Subject: [PATCH] fix(SW-2378): Added restriction to the map options to avoid showing grey area in the map Approved-by: Christian Andolf --- .../ContentType/DestinationPage/Map/DynamicMap/index.tsx | 2 ++ apps/scandic-web/components/Maps/InteractiveMap/index.tsx | 3 +++ apps/scandic-web/constants/map.ts | 5 +++++ 3 files changed, 10 insertions(+) create mode 100644 apps/scandic-web/constants/map.ts 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 155385e09..4a9858371 100644 --- a/apps/scandic-web/components/ContentType/DestinationPage/Map/DynamicMap/index.tsx +++ b/apps/scandic-web/components/ContentType/DestinationPage/Map/DynamicMap/index.tsx @@ -9,6 +9,7 @@ import { useIntl } from "react-intl" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" +import { MAP_RESTRICTIONS } from "@/constants/map" import { useDestinationPageHotelsMapStore } from "@/stores/destination-page-hotels-map" import ErrorBoundary from "@/components/ErrorBoundary/ErrorBoundary" @@ -103,6 +104,7 @@ export default function DynamicMap({ clickableIcons: false, gestureHandling, mapId, + restriction: MAP_RESTRICTIONS, } return ( diff --git a/apps/scandic-web/components/Maps/InteractiveMap/index.tsx b/apps/scandic-web/components/Maps/InteractiveMap/index.tsx index 7f57a5ab3..682a6cc65 100644 --- a/apps/scandic-web/components/Maps/InteractiveMap/index.tsx +++ b/apps/scandic-web/components/Maps/InteractiveMap/index.tsx @@ -6,6 +6,8 @@ import { useIntl } from "react-intl" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" +import { MAP_RESTRICTIONS } from "@/constants/map" + import Button from "@/components/TempDesignSystem/Button" import HotelListingMapContent from "./HotelListingMapContent" @@ -38,6 +40,7 @@ export default function InteractiveMap({ clickableIcons: false, mapId, gestureHandling: "greedy", + restriction: MAP_RESTRICTIONS, } function zoomIn() { diff --git a/apps/scandic-web/constants/map.ts b/apps/scandic-web/constants/map.ts new file mode 100644 index 000000000..7fec60287 --- /dev/null +++ b/apps/scandic-web/constants/map.ts @@ -0,0 +1,5 @@ +export const MAP_RESTRICTIONS = { + // Restrict the map to the entire world, this avoids showing a grey area. + // See https://developers.google.com/maps/documentation/javascript/reference/map#MapRestriction.latLngBounds + latLngBounds: { north: 85, south: -85, west: -180, east: 180 }, +}