add ability to set coordinates in url parameters

src/app/student/map/_components/MainView.tsx

@@ -4,17 +4,18 @@ 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,
   SelectItem,
   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<number, Exhibitor>
 }) {
-  const [locationId, setLocationId] = useState<LocationId>("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<LocationId>(
+    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<BoothID | null>(null)
   const [hoveredBoothId, setHoveredBoothId] = useState<BoothID | null>(null)
 
@@ -48,6 +69,7 @@ export default function MainView({
           />
           <div className="flex-grow">
             <MapComponent
+              initialView={initialView}
               boothsById={currentLocationBoothsById}
               location={location}
               activeBoothId={activeBoothId}

src/app/student/map/_components/MapComponent.tsx

@@ -64,27 +64,31 @@ export function MapComponent({
   activeBoothId,
   setActiveBoothId,
   hoveredBoothId,
-  setHoveredBoothId
+  setHoveredBoothId,
+  initialView
 }: {
   boothsById: BoothMap
   location: Location
   activeBoothId: BoothID | null
   hoveredBoothId: BoothID | null
   setActiveBoothId: (id: BoothID | null) => void
-  setHoveredBoothId: (id: BoothID | null) => void
+  setHoveredBoothId: (id: BoothID | null) => void,
+  initialView: { longitude: number, latitude: number, zoom: number }
 }) {
   const mapRef = useRef<MapRef>(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({
           <Layer {...boothLayerStyle}></Layer>
         </Source>
 
+        {/* <Source
+          id="cat"
+          type="image"
+          url="https://upload.wikimedia.org/wikipedia/commons/7/7c/201408_cat.png"
+          coordinates={[
+            [18.063, 59.345],
+            [18.079, 59.345],
+            [18.079, 59.35],
+            [18.063, 59.35]
+          ]}>
+          <Layer
+            id="cat"
+            type="raster"
+            ></Layer>
+        </Source> */}
+
         <Source
           id="buildings"
           type="geojson"

src/app/student/map/editor/EditorMapComponent.tsx

@@ -6,8 +6,8 @@ import {
   BoothID,
   GeoJsonBooth,
   geoJsonBoothData,
-  geoJsonBuildingData,
   GeoJsonBoothsData,
+  geoJsonBuildingData,
   makeBooth
 } from "@/app/student/map/lib/booths"
 import { Location } from "@/app/student/map/lib/locations"
@@ -84,12 +84,10 @@ export default function EditorMapComponent({
   }
 
   function onModeChange(e: { mode: DrawMode }) {
-    console.log("Mode change", e.mode)
     setDrawMode(e.mode)
   }
 
   function onSelectionChange(e: { features: GeoJsonBooth[] }) {
-    console.log("Selection change", drawMode, e)
     if (e.features.length === 0) return
     if (activeFeature == null) setActiveFeatureId(e.features[0].properties.id)
     else setActiveFeatureId(null)

src/app/student/map/lib/locations.ts

@@ -40,3 +40,5 @@ export const locations: Location[] = [
     center: libraryCenter
   }
 ]
+
+export const defaultLocation = locations[0]

src/app/student/map/page.tsx

@@ -5,8 +5,8 @@ import {
   makeBooth
 } from "@/app/student/map/lib/booths"
 import { LocationId, locations } from "@/app/student/map/lib/locations"
-import { fetchExhibitors } from "@/components/shared/hooks/api/useExhibitors"
 import { feature } from "@/components/shared/feature"
+import { fetchExhibitors } from "@/components/shared/hooks/api/useExhibitors"
 import { notFound } from "next/navigation"
 
 export default async function Page() {