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

feat(SW-552): add panTo function

Browse Source
This commit is contained in:
Fredrik Thorsson
2024-10-21 11:38:56 +02:00
parent 722e362c41
commit 0a76d043c1
2 changed files with 6 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
components/ContentType/HotelPage/Map/DynamicMap/Sidebar/index.tsx
View File

@@ -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)}
>
<span>{poi.name}</span>
<span>{poi.distance} km</span>

1
components/Maps/InteractiveMap/index.tsx
View File

@@ -79,7 +79,6 @@ export default function InteractiveMap({
<PoiMarker
group={poi.group}
categoryName={poi.categoryName}
className={styles.poiMarker}
size={activePoi === poi.name ? 20 : 16}
/>
<Body className={styles.poiLabel} asChild>