diff --git a/components/ContentType/HotelPage/Map/DynamicMap/dynamicMap.module.css b/components/ContentType/HotelPage/Map/DynamicMap/dynamicMap.module.css
index d9711e1a5..303ad4c1f 100644
--- a/components/ContentType/HotelPage/Map/DynamicMap/dynamicMap.module.css
+++ b/components/ContentType/HotelPage/Map/DynamicMap/dynamicMap.module.css
@@ -7,6 +7,7 @@
left: 0;
z-index: var(--dialog-z-index);
display: flex;
+ background-color: var(--Base-Surface-Primary-light-Normal);
}
.sidebar {
@@ -44,7 +45,7 @@
padding: var(--Spacing-x-one-and-half) var(--Spacing-x2);
font-family: var(--typography-Body-Bold-fontFamily);
font-size: var(--typography-Body-Bold-fontSize);
- font-weight: 500;
+ font-weight: var(--typography-Body-Bold-fontWeight);
color: var(--UI-Text-Medium-contrast);
width: 100%;
}
@@ -62,7 +63,7 @@
.sidebarContent {
display: grid;
gap: var(--Spacing-x3);
- align-items: start;
+ align-content: start;
padding: var(--Spacing-x3) var(--Spacing-x2);
height: 100%;
overflow-y: auto;
@@ -112,18 +113,13 @@
}
.zoomButton {
- width: 40px;
+ width: var(--Spacing-x5);
+ height: var(--Spacing-x5);
padding: 0;
pointer-events: initial;
box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.1);
}
-/* @media screen and (max-width: 767px) {
- .sidebar:not(.fullscreen) .sidebarContent {
- display: none;
- }
-} */
-
@media screen and (min-width: 768px) {
.dynamicMap {
top: var(--main-menu-desktop-height);
diff --git a/components/ContentType/HotelPage/Map/DynamicMap/index.tsx b/components/ContentType/HotelPage/Map/DynamicMap/index.tsx
index 8471f5801..2eee0b6ae 100644
--- a/components/ContentType/HotelPage/Map/DynamicMap/index.tsx
+++ b/components/ContentType/HotelPage/Map/DynamicMap/index.tsx
@@ -1,6 +1,8 @@
"use client"
import { APIProvider } from "@vis.gl/react-google-maps"
+import { useEffect, useRef, useState } from "react"
import { Dialog, Modal } from "react-aria-components"
+import { useIntl } from "react-intl"
import useHotelPageStore from "@/stores/hotel-page"
@@ -10,16 +12,17 @@ import DynamicMapContent from "./Content"
import styles from "./dynamicMap.module.css"
+import type { DynamicMapProps } from "@/types/components/hotelPage/map/dynamicMap"
+
export default function DynamicMap({
apiKey,
hotelName,
coordinates,
-}: {
- apiKey: string
- hotelName: string
- coordinates: { lat: number; lng: number }
-}) {
+}: DynamicMapProps) {
+ const intl = useIntl()
const { isDynamicMapOpen, closeDynamicMap } = useHotelPageStore()
+ const [scrollHeightWhenOpened, setScrollHeightWhenOpened] = useState(0)
+ const hasMounted = useRef(false)
useHandleKeyUp((event: KeyboardEvent) => {
if (event.key === "Escape" && isDynamicMapOpen) {
@@ -27,12 +30,33 @@ export default function DynamicMap({
}
})
+ // Making sure the map is always opened at the top of the page, just below the header.
+ // When closing, the page should scroll back to the position it was before opening the map.
+ useEffect(() => {
+ // Skip the first render
+ if (!hasMounted.current) {
+ hasMounted.current = true
+ return
+ }
+
+ if (isDynamicMapOpen && scrollHeightWhenOpened === 0) {
+ setScrollHeightWhenOpened(window.scrollY)
+ window.scrollTo({ top: 0, behavior: "instant" })
+ } else if (!isDynamicMapOpen && scrollHeightWhenOpened !== 0) {
+ window.scrollTo({ top: scrollHeightWhenOpened, behavior: "instant" })
+ setScrollHeightWhenOpened(0)
+ }
+ }, [isDynamicMapOpen, scrollHeightWhenOpened])
+
return (
diff --git a/components/ContentType/HotelPage/Map/MapCard/index.tsx b/components/ContentType/HotelPage/Map/MapCard/index.tsx
index e43cf963e..c3caca9ed 100644
--- a/components/ContentType/HotelPage/Map/MapCard/index.tsx
+++ b/components/ContentType/HotelPage/Map/MapCard/index.tsx
@@ -1,5 +1,7 @@
"use client"
+import { useIntl } from "react-intl"
+
import useHotelPageStore from "@/stores/hotel-page"
import Button from "@/components/TempDesignSystem/Button"
@@ -8,9 +10,10 @@ import Title from "@/components/TempDesignSystem/Text/Title"
import styles from "./mapCard.module.css"
-import { MapCardProps } from "@/types/components/hotelPage/mapCard"
+import type { MapCardProps } from "@/types/components/hotelPage/map/mapCard"
export default function MapCard({ hotelName }: MapCardProps) {
+ const intl = useIntl()
const { openDynamicMap } = useHotelPageStore()
return (
@@ -20,7 +23,7 @@ export default function MapCard({ hotelName }: MapCardProps) {
textTransform="uppercase"
textAlign="center"
>
- Nearby
+ {intl.formatMessage({ id: "Nearby" })}
- Explore nearby
+ {intl.formatMessage({ id: "Explore nearby" })}
)
diff --git a/components/ContentType/HotelPage/Map/MobileMapToggle/index.tsx b/components/ContentType/HotelPage/Map/MobileMapToggle/index.tsx
index bf2ef3b8e..a04082702 100644
--- a/components/ContentType/HotelPage/Map/MobileMapToggle/index.tsx
+++ b/components/ContentType/HotelPage/Map/MobileMapToggle/index.tsx
@@ -1,12 +1,15 @@
"use client"
+import { useIntl } from "react-intl"
+
import useHotelPageStore from "@/stores/hotel-page"
-import { HouseIcon, LocationIcon } from "@/components/Icons"
+import { HouseIcon, MapIcon } from "@/components/Icons"
import styles from "./mobileToggle.module.css"
export default function MobileMapToggle() {
+ const intl = useIntl()
const { isDynamicMapOpen, openDynamicMap, closeDynamicMap } =
useHotelPageStore()
@@ -23,20 +26,20 @@ export default function MobileMapToggle() {
height={24}
width={24}
/>
- Hotel
+ {intl.formatMessage({ id: "Hotel" })}
)
diff --git a/components/ContentType/HotelPage/Map/MobileMapToggle/mobileToggle.module.css b/components/ContentType/HotelPage/Map/MobileMapToggle/mobileToggle.module.css
index 2d36929cf..305c93434 100644
--- a/components/ContentType/HotelPage/Map/MobileMapToggle/mobileToggle.module.css
+++ b/components/ContentType/HotelPage/Map/MobileMapToggle/mobileToggle.module.css
@@ -19,15 +19,15 @@
align-items: center;
justify-content: center;
gap: var(--Spacing-x-half);
- padding: var(--Spacing-x1);
+ padding: var(--Spacing-x1) var(--Spacing-x2);
background-color: var(--Base-Surface-Primary-light-Normal);
border-width: 0;
cursor: pointer;
border-radius: 2.5rem;
color: var(--Base-Text-Accent);
- font-family: var(--typography-Body-Bold-fontFamily);
- font-size: var(--typography-Body-Bold-fontSize);
- font-weight: 500;
+ font-family: var(--typography-Caption-Bold-Desktop-fontFamily);
+ font-size: var(--typography-Caption-Bold-Desktop-fontSize);
+ font-weight: var(--typography-Caption-Bold-Desktop-fontWeight);
}
.button:hover {
background-color: var(--Base-Surface-Primary-light-Hover);
diff --git a/components/ContentType/HotelPage/Map/StaticMap/ReadMe.md b/components/ContentType/HotelPage/Map/StaticMap/ReadMe.md
deleted file mode 100644
index ba1640123..000000000
--- a/components/ContentType/HotelPage/Map/StaticMap/ReadMe.md
+++ /dev/null
@@ -1,30 +0,0 @@
-# Google Map Static API
-
-### About
-
-The Google Maps Static API lets you embed a Google Maps image on your web page. The Google Maps Static API service creates your map based on URL parameters sent through a standard HTTP request and returns the map as an image you can display on your web page. Due to regulations from Google we are not allowed to store and serve copies of images generated using the Google Maps Static API. All web pages that require static images must link the src attribute of an HTML img tag or as a background-image using CSS.
-
-### API Key Restrictions
-
-You can restrict your API key on websites, IP addresses, Android apps and iOS apps. For now (12/8-24) the API key is restricted by IP address, hence the request will only work at Scandic HQ network. This will be changed to a referrer website in the future.
-[Read more about API key restrictions](https://developers.google.com/maps/api-security-best-practices#restricting-api-keys)
-
-### Digital Signature
-
-Requests exceeding 25,000 requests per day require an API key and a digital signature. However, it is strongly recommended by Google to use both an API key and digital signature, regardless of the usage.
-
-The digital signature is set on the Google Maps Platform. For dynamically generated requests, the signature is handled through server side signing appending the signature as base64 on the request url.
-[Read more about digital signature](https://developers.google.com/maps/documentation/maps-static/digital-signature)
-
-### Generating new API keys
-
-Regenerating an API key creates a new key that has all the old key's restrictions. This process also starts a 24-hour timer after which the old API key is deleted. During this time window, both the old and new key are accepted, giving you a chance to migrate your apps to use the new key. However, after this time period elapses, any apps still using the old API key stop working.
-
-**Caution:** Only regenerate an API key if you absolutely must to avoid unauthorized use. This process can shut down legitimate traffic and prevent your apps from functioning properly.
-[Read more about regenerating keys](https://developers.google.com/maps/api-security-best-practices#regenerate-apikey)
-
-### Version history
-
-| Description | Version | Date | Author |
-| ------------------- | ------- | ------- | ---------------- |
-| Create ReadMe file. | 1.0.0 | 12/8-24 | Fredrik Thorsson |
diff --git a/components/ContentType/HotelPage/Map/StaticMap/index.tsx b/components/ContentType/HotelPage/Map/StaticMap/index.tsx
index 359d38bb9..56589cdc0 100644
--- a/components/ContentType/HotelPage/Map/StaticMap/index.tsx
+++ b/components/ContentType/HotelPage/Map/StaticMap/index.tsx
@@ -1,15 +1,14 @@
/* eslint-disable @next/next/no-img-element */
-import { env } from "@/env/server"
-
+import StaticMapComp from "@/components/Maps/StaticMap"
import { getIntl } from "@/i18n"
+import { calculateLatWithOffset } from "@/utils/map"
import ScandicMarker from "../Markers/Scandic"
-import { calculateLatWithOffset, getUrlWithSignature } from "./util"
import styles from "./staticMap.module.css"
-import { StaticMapProps } from "@/types/components/hotelPage/staticMap"
+import type { StaticMapProps } from "@/types/components/hotelPage/map/staticMap"
export default async function StaticMap({
coordinates,
@@ -17,34 +16,23 @@ export default async function StaticMap({
zoomLevel = 14,
}: StaticMapProps) {
const intl = await getIntl()
- const key = env.GOOGLE_STATIC_MAP_KEY
- const secret = env.GOOGLE_STATIC_MAP_SIGNATURE_SECRET
- const baseUrl = "https://maps.googleapis.com/maps/api/staticmap"
- const { lng, lat } = coordinates
const mapHeight = 785
const markerHeight = 100
const mapLatitudeInPx = mapHeight * 0.2
- const size = `380x${mapHeight}`
-
- const mapLatitude = calculateLatWithOffset(lat, mapLatitudeInPx, zoomLevel)
- // Custom Icon should be available from a public URL accessible by Google Static Maps API. At the moment, we don't have a public URL for the custom icon.
- // const marker = `icon:https://IMAGE_URL|${lat},${lng}`
- const marker = `${lat},${lng}`
- // Google Maps Static API only supports images smaller than 640x640px. Read: https://developers.google.com/maps/documentation/maps-static/start#Largerimagesizes
- const alt = intl.formatMessage({ id: "Map of HOTEL_NAME" }, { hotelName })
-
- const url = new URL(
- `${baseUrl}?zoom=${zoomLevel}¢er=${mapLatitude},${lng}&size=${size}&key=${key}`
- )
- // const url = new URL(
- // `${baseUrl}?zoom=${zoomLevel}¢er=${mapLatitude},${lng}&size=${size}&markers=${marker}&key=${key}`
- // )
-
- const src = getUrlWithSignature(url, secret)
+ const mapCoordinates = {
+ lat: calculateLatWithOffset(coordinates.lat, mapLatitudeInPx, zoomLevel),
+ lng: coordinates.lng,
+ }
return (
-
+
diff --git a/components/Header/MainMenu/MobileMenu/index.tsx b/components/Header/MainMenu/MobileMenu/index.tsx
index 353afa4ee..a62eff80b 100644
--- a/components/Header/MainMenu/MobileMenu/index.tsx
+++ b/components/Header/MainMenu/MobileMenu/index.tsx
@@ -1,5 +1,6 @@
"use client"
+import { useEffect } from "react"
import { Dialog, Modal } from "react-aria-components"
import { useIntl } from "react-intl"
@@ -38,6 +39,13 @@ export default function MobileMenu({
}
})
+ // Making sure the menu is always opened at the top of the page, just below the header.
+ useEffect(() => {
+ if (isHamburgerMenuOpen) {
+ window.scrollTo({ top: 0, behavior: "instant" })
+ }
+ }, [isHamburgerMenuOpen])
+
return (
<>