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" "use client"
import { useMap } from "@vis.gl/react-google-maps"
import { useCallback, useState } from "react" import { useCallback, useState } from "react"
import { useIntl } from "react-intl" import { useIntl } from "react-intl"
@@ -19,6 +20,7 @@ export default function Sidebar({
onActivePoiChange, onActivePoiChange,
}: SidebarProps) { }: SidebarProps) {
const intl = useIntl() const intl = useIntl()
const map = useMap()
const [isFullScreenSidebar, setIsFullScreenSidebar] = useState(false) const [isFullScreenSidebar, setIsFullScreenSidebar] = useState(false)
const poiGroups = new Set(pointsOfInterest.map(({ group }) => group)) const poiGroups = new Set(pointsOfInterest.map(({ group }) => group))
const poisInGroups = Array.from(poiGroups).map((group) => ({ const poisInGroups = Array.from(poiGroups).map((group) => ({
@@ -31,11 +33,12 @@ export default function Sidebar({
} }
const handlePoiClick = useCallback( const handlePoiClick = useCallback(
(poiName: string) => { (poiName: string, coordinates: { lat: number; lng: number }) => {
onActivePoiChange(activePoi === poiName ? null : poiName) onActivePoiChange(activePoi === poiName ? null : poiName)
map?.panTo(coordinates)
toggleFullScreenSidebar() toggleFullScreenSidebar()
}, },
[activePoi, onActivePoiChange] [activePoi, onActivePoiChange, map]
) )
return ( return (
@@ -87,7 +90,7 @@ export default function Sidebar({
className={`${styles.poiButton} ${activePoi === poi.name ? styles.active : ""}`} className={`${styles.poiButton} ${activePoi === poi.name ? styles.active : ""}`}
onMouseEnter={() => onActivePoiChange(poi.name)} onMouseEnter={() => onActivePoiChange(poi.name)}
onMouseLeave={() => onActivePoiChange(null)} onMouseLeave={() => onActivePoiChange(null)}
onClick={() => handlePoiClick(poi.name)} onClick={() => handlePoiClick(poi.name, poi.coordinates)}
> >
<span>{poi.name}</span> <span>{poi.name}</span>
<span>{poi.distance} km</span> <span>{poi.distance} km</span>

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

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