scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merged in fix/SW-2017-destination-pages-map-fix-zooming-issues (pull request #1634)

Browse Source 
fix(SW-2017): fit bounds on first load

* fix(SW-2017): fit bounds on first load

* fix(SW-2017): rebase


Approved-by: Michael Zetterberg
Approved-by: Erik Tiekstra
This commit is contained in:
Fredrik Thorsson
2025-03-27 16:04:06 +00:00
parent df2fb49d1e
commit 726862dab4
2 changed files with 8 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
apps/scandic-web/components/ContentType/DestinationPage/Map/DynamicMap/index.tsx
View File

@@ -4,7 +4,7 @@ import "client-only"
import { Map, type MapProps, useMap } from "@vis.gl/react-google-maps" import { Map, type MapProps, useMap } from "@vis.gl/react-google-maps"
import { cx } from "class-variance-authority" import { cx } from "class-variance-authority"
import { type PropsWithChildren, useEffect, useRef } from "react" import { type PropsWithChildren, useEffect, useRef, useState } from "react"
import { useIntl } from "react-intl" import { useIntl } from "react-intl"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons" import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
@@ -51,6 +51,7 @@ export default function DynamicMap({
const pageType = usePageType() const pageType = usePageType()
const { activeMarker } = useDestinationPageHotelsMapStore() const { activeMarker } = useDestinationPageHotelsMapStore()
const ref = useRef<HTMLDivElement>(null) const ref = useRef<HTMLDivElement>(null)
const [hasFittedBounds, setHasFittedBounds] = useState(false)
useEffect(() => { useEffect(() => {
if (ref.current && activeMarker && pageType === "overview") { if (ref.current && activeMarker && pageType === "overview") {
@@ -62,14 +63,15 @@ export default function DynamicMap({
}, [activeMarker, pageType]) }, [activeMarker, pageType])
useEffect(() => { useEffect(() => {
if (map && fitBounds && markers?.length) { if (map && fitBounds && markers?.length && !hasFittedBounds) {
const bounds = new google.maps.LatLngBounds() const bounds = new google.maps.LatLngBounds()
markers.forEach((marker) => { markers.forEach((marker) => {
bounds.extend(marker.coordinates) bounds.extend(marker.coordinates)
}) })
map.fitBounds(bounds, 100) map.fitBounds(bounds, 100)
setHasFittedBounds(true)
} }
}, [map, fitBounds, markers]) }, [map, fitBounds, markers, hasFittedBounds])
useHandleKeyUp((event: KeyboardEvent) => { useHandleKeyUp((event: KeyboardEvent) => {
if (event.key === "Escape" && onClose) { if (event.key === "Escape" && onClose) {

4
apps/scandic-web/components/ContentType/DestinationPage/Map/index.tsx
View File

@@ -49,7 +49,8 @@ export default function Map({
}: PropsWithChildren<MapProps>) { }: PropsWithChildren<MapProps>) {
const router = useRouter() const router = useRouter()
const searchParams = useSearchParams() const searchParams = useSearchParams()
const { activeMarker: activeHotelId } = useDestinationPageHotelsMapStore() const { activeMarker: activeHotelId, setActiveMarker } =
useDestinationPageHotelsMapStore()
const isMapView = useMemo( const isMapView = useMemo(
() => searchParams.get("view") === "map", () => searchParams.get("view") === "map",
[searchParams] [searchParams]
@@ -132,6 +133,7 @@ export default function Map({
const url = new URL(window.location.href) const url = new URL(window.location.href)
url.searchParams.delete("view") url.searchParams.delete("view")
router.push(url.toString()) router.push(url.toString())
setActiveMarker(null)
} }
return ( return (