diff --git a/src/app/student/map/_components/MainView.tsx b/src/app/student/map/_components/MainView.tsx index ccddb2a..f791d39 100644 --- a/src/app/student/map/_components/MainView.tsx +++ b/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( validLocationId(floorUrlString) ? floorUrlString : defaultLocation.id ) + const [preLocationId, setPreLocationId] = useState(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 diff --git a/src/app/student/map/_components/MapComponent.tsx b/src/app/student/map/_components/MapComponent.tsx index 619a8b2..9e4c2ad 100644 --- a/src/app/student/map/_components/MapComponent.tsx +++ b/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(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(