From 0a76d043c1e4239405347c0a17955a7a246f708d Mon Sep 17 00:00:00 2001 From: Fredrik Thorsson Date: Mon, 21 Oct 2024 11:38:56 +0200 Subject: [PATCH] feat(SW-552): add panTo function --- .../HotelPage/Map/DynamicMap/Sidebar/index.tsx | 9 ++++++--- components/Maps/InteractiveMap/index.tsx | 1 - 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/components/ContentType/HotelPage/Map/DynamicMap/Sidebar/index.tsx b/components/ContentType/HotelPage/Map/DynamicMap/Sidebar/index.tsx index 256ad149a..b48da7863 100644 --- a/components/ContentType/HotelPage/Map/DynamicMap/Sidebar/index.tsx +++ b/components/ContentType/HotelPage/Map/DynamicMap/Sidebar/index.tsx @@ -1,5 +1,6 @@ "use client" +import { useMap } from "@vis.gl/react-google-maps" import { useCallback, useState } from "react" import { useIntl } from "react-intl" @@ -19,6 +20,7 @@ export default function Sidebar({ onActivePoiChange, }: SidebarProps) { const intl = useIntl() + const map = useMap() const [isFullScreenSidebar, setIsFullScreenSidebar] = useState(false) const poiGroups = new Set(pointsOfInterest.map(({ group }) => group)) const poisInGroups = Array.from(poiGroups).map((group) => ({ @@ -31,11 +33,12 @@ export default function Sidebar({ } const handlePoiClick = useCallback( - (poiName: string) => { + (poiName: string, coordinates: { lat: number; lng: number }) => { onActivePoiChange(activePoi === poiName ? null : poiName) + map?.panTo(coordinates) toggleFullScreenSidebar() }, - [activePoi, onActivePoiChange] + [activePoi, onActivePoiChange, map] ) return ( @@ -87,7 +90,7 @@ export default function Sidebar({ className={`${styles.poiButton} ${activePoi === poi.name ? styles.active : ""}`} onMouseEnter={() => onActivePoiChange(poi.name)} onMouseLeave={() => onActivePoiChange(null)} - onClick={() => handlePoiClick(poi.name)} + onClick={() => handlePoiClick(poi.name, poi.coordinates)} > {poi.name} {poi.distance} km diff --git a/components/Maps/InteractiveMap/index.tsx b/components/Maps/InteractiveMap/index.tsx index 4c0ba9662..d3c9b8667 100644 --- a/components/Maps/InteractiveMap/index.tsx +++ b/components/Maps/InteractiveMap/index.tsx @@ -79,7 +79,6 @@ export default function InteractiveMap({