Merge booths data from nymble and library for visability

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

@@ -7,7 +7,7 @@ import EditorMapComponent from "@/app/student/map/editor/EditorMapComponent"
 import { Exhibitor } from "@/components/shared/hooks/api/useExhibitors"
 import { Button } from "@/components/ui/button"
 import { useSearchParams } from "next/navigation"
-import { useState } from "react"
+import { useMemo, useState } from "react"
 import { Booth, BoothID, BoothMap } from "../lib/booths"
 import {
   defaultLocation,
@@ -35,8 +35,22 @@ export default function MainView({
   const [locationId, setLocationId] = useState<LocationId>(
     validLocationId(floorUrlString) ? floorUrlString : defaultLocation.id
   )
+  const [preLocationId, setPreLocationId] = useState<LocationId>(locationId)
   const location = locations.find(loc => loc.id === locationId)!
-  const currentLocationBoothsById = boothsByLocation.get(locationId)!
+  const currentLocationBoothsById = useMemo(() => {
+    const boothsById =
+      locationId !== "library"
+        ? new Map([
+            ...Array.from(boothsByLocation.get("library")!.entries()),
+            ...Array.from(boothsByLocation.get(locationId)!.entries()) // Merge library booths with default location booths
+          ])
+        : new Map([
+            ...Array.from(boothsByLocation.get(preLocationId)!.entries()),
+            ...Array.from(boothsByLocation.get(locationId)!.entries()) // Merge library booths with default location booths
+          ])
+    setPreLocationId(location.id)
+    return boothsById
+  }, [location.id])
 
   const latitude =
     parseFloat(searchParams.get("lat") ?? "") || location.center.latitude

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

@@ -2,7 +2,7 @@ import {
   BoothID,
   geoJsonBoothDataByLocation
 } from "@/app/student/map/lib/booths"
-import { Location } from "@/app/student/map/lib/locations"
+import { Location, LocationId } from "@/app/student/map/lib/locations"
 import { useFeatureState } from "@/components/shared/hooks/useFeatureState"
 import { useGeoJsonPlanData } from "@/components/shared/hooks/useGeoJsonPlanData"
 import "maplibre-gl/dist/maplibre-gl.css"
@@ -50,6 +50,7 @@ export function MapComponent({
 
   const [markerScale, setMarkerScale] = useState(1)
 
+  const [preLocationId, setPreLocationId] = useState<LocationId>(location.id)
   // Fly to location center on change
   useEffect(() => {
     const { longitude, latitude, zoom } = location.center
@@ -87,7 +88,28 @@ export function MapComponent({
   useFeatureState(mapRef, hoveredBoothId ? [hoveredBoothId] : [], "hover")
   useFeatureState(mapRef, filteredBoothIds, "filtered")
 
-  const currentGeoJsonBoothData = geoJsonBoothDataByLocation.get(location.id)!
+  const currentGeoJsonBoothData = useMemo(() => {
+    const currentData = geoJsonBoothDataByLocation.get(
+      location.id === "library" ? preLocationId : location.id
+    ) ?? {
+      type: "FeatureCollection",
+      features: []
+    }
+    const libraryFeatures = geoJsonBoothDataByLocation.get("library")!.features
+    // Merge library features with the current location's features
+    const mergedFeatures = [
+      ...libraryFeatures,
+      ...currentData.features.filter(
+        feature =>
+          !libraryFeatures.some(
+            libraryFeature =>
+              libraryFeature.properties.id === feature.properties.id
+          )
+      )
+    ]
+    setPreLocationId(location.id)
+    return { ...currentData, features: mergedFeatures }
+  }, [location.id])
 
   // Don't want to rerender markers on every map render
   const markers = useMemo(