diff --git a/src/app/student/map/_components/MainView.tsx b/src/app/student/map/_components/MainView.tsx index 018c07f..17de198 100644 --- a/src/app/student/map/_components/MainView.tsx +++ b/src/app/student/map/_components/MainView.tsx @@ -4,6 +4,7 @@ import { MapComponent } from "@/app/student/map/_components/MapComponent" import Sidebar from "@/app/student/map/_components/Sidebar" import EditorMapComponent from "@/app/student/map/editor/EditorMapComponent" import { Exhibitor } from "@/components/shared/hooks/api/useExhibitors" +import { Button } from "@/components/ui/button" import { Select, SelectContent, @@ -11,10 +12,10 @@ import { SelectTrigger, SelectValue } from "@/components/ui/select" +import { useSearchParams } from "next/navigation" import { useState } from "react" import { BoothID, BoothMap } from "../lib/booths" -import { LocationId, locations } from "../lib/locations" -import { Button } from "@/components/ui/button" +import { defaultLocation, LocationId, locations } from "../lib/locations" export default function MainView({ boothsByLocation, @@ -25,10 +26,30 @@ export default function MainView({ boothsById: BoothMap exhibitorsById: Map }) { - const [locationId, setLocationId] = useState("nymble/1") + // url: /student/map?location=[nymble/1|nymble/2|nymble/3|library]&lat=[number]&lng=[number]&zoom=[number] + // if location is not provided or is invalid, default to nymble/1 + // if lat, lng or zoom is not provided, default to location center + const searchParams = useSearchParams() + + const locationString = searchParams.get("location") ?? "nymble/1" + const locationIdString = locations.some(loc => loc.id === locationString) + ? locationString + : defaultLocation.id + const [locationId, setLocationId] = useState( + locationIdString as LocationId + ) const location = locations.find(loc => loc.id === locationId)! const currentLocationBoothsById = boothsByLocation.get(locationId)! + const latitude = + parseFloat(searchParams.get("lat") ?? "") || location.center.latitude + const longitude = + parseFloat(searchParams.get("lng") ?? "") || location.center.longitude + const zoom = + parseFloat(searchParams.get("zoom") ?? "") || location.center.zoom + + const initialView = { latitude, longitude, zoom } + const [activeBoothId, setActiveBoothId] = useState(null) const [hoveredBoothId, setHoveredBoothId] = useState(null) @@ -48,6 +69,7 @@ export default function MainView({ />
void - setHoveredBoothId: (id: BoothID | null) => void + setHoveredBoothId: (id: BoothID | null) => void, + initialView: { longitude: number, latitude: number, zoom: number } }) { const mapRef = useRef(null) const [markerScale, setMarkerScale] = useState(1) - // Fly to location center on change - useEffect(() => { + function flyToLocation(location: Location) { const { longitude, latitude, zoom } = location.center mapRef.current?.flyTo({ center: [longitude, latitude], zoom: zoom }) - }, [location]) + } + + // Fly to location center on change + useEffect(() => flyToLocation(location), [location]) useEffect(() => { if (activeBoothId == null) return @@ -180,11 +184,7 @@ export function MapComponent({ onMouseLeave={onBoothMouseLeave} onZoom={onZoomChange} interactiveLayerIds={["booths"]} - initialViewState={{ - longitude: 18.070567, - latitude: 59.34726, - zoom: 18 - }} + initialViewState={initialView} cursor={"auto"} minZoom={16} maxZoom={20} @@ -203,6 +203,22 @@ export function MapComponent({ + {/* + + */} +