diff --git a/src/app/student/map/_components/MapComponent.tsx b/src/app/student/map/_components/MapComponent.tsx
index 2a8c8e2..5dc84ab 100644
--- a/src/app/student/map/_components/MapComponent.tsx
+++ b/src/app/student/map/_components/MapComponent.tsx
@@ -5,6 +5,7 @@ import {
BoothID,
geoJsonBoothDataByLocation
} from "@/app/student/map/lib/booths"
+import { Location } from "@/app/student/map/lib/locations"
import { getPolygonCenter } from "@/app/student/map/lib/utils"
import "maplibre-gl/dist/maplibre-gl.css"
import { useEffect, useMemo, useRef, useState } from "react"
@@ -19,7 +20,6 @@ import {
} from "react-map-gl/maplibre"
import { BoothMap, GeoJsonBooth } from "../lib/booths"
import { BoothMarkers } from "./BoothMarkers"
-import { Location } from "@/app/student/map/lib/locations"
const boothLayerStyle: FillLayer = {
source: "booths",
@@ -75,6 +75,17 @@ export function MapComponent({
})
}, [location])
+ // Fly to location center while choosing booth from sidebar
+ useEffect(() => {
+ if (activeBoothId) {
+ mapRef.current?.flyTo({
+ center: boothsById.get(activeBoothId)?.center as [number, number],
+ zoom: 18.5,
+ speed: 0.8
+ })
+ }
+ }, [activeBoothId])
+
// Keep mapbox feature state in sync with activeBoothId and hoveredBoothId
// (to allow for styling of the features)
function useFeatureState(
diff --git a/src/app/student/map/_components/Sidebar.tsx b/src/app/student/map/_components/Sidebar.tsx
index 36528a4..e2865c8 100644
--- a/src/app/student/map/_components/Sidebar.tsx
+++ b/src/app/student/map/_components/Sidebar.tsx
@@ -8,8 +8,9 @@ import { Button } from "@/components/ui/button"
import { Drawer, DrawerContent } from "@/components/ui/drawer"
import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area"
import { cn } from "@/lib/utils"
-import { ChevronsLeft, ChevronsRight } from "lucide-react"
-import { useRef, useState } from "react"
+import { ArrowLeft, ChevronsLeft, ChevronsRight } from "lucide-react"
+import { useEffect, useRef, useState } from "react"
+
export default function Sidebar({
boothsById,
activeBoothId,
@@ -23,15 +24,24 @@ export default function Sidebar({
const smallScreen = width ? width <= 800 : false
const booths = Array.from(boothsById.values())
const [filteredBooths, setFilteredBooths] = useState(booths)
- if (activeBoothId != null) {
- const exhibitor = boothsById.get(activeBoothId)?.exhibitor
+ const [boothId, setBoothId] = useState(activeBoothId)
+
+ useEffect(() => {
+ setBoothId(activeBoothId)
+ }, [activeBoothId])
+
+ if (boothId != null) {
+ const exhibitor = boothsById.get(boothId)?.exhibitor
if (!exhibitor) {
- console.error(`No exhibitor found for booth with id ${activeBoothId}`)
+ console.error(`No exhibitor found for booth with id ${boothId}`)
return null
}
return (
@@ -44,7 +54,11 @@ export default function Sidebar({