start improving map colors

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

@@ -22,7 +22,7 @@ export function BoothMarker({ booth, scale }: { booth: Booth; scale: number }) {
               height={300}></Image>
           </div>
         ) : (
-          <span className="text-black">{booth.exhibitor.name}</span>
+          <div className="text-neutral-200 max-w-[100px] truncate">{booth.exhibitor.name}</div>
         )}
       </div>
     </Marker>

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

@@ -4,7 +4,7 @@ import { Filter, FilterItem } from "@/app/student/lib/filters"
 import { FilterSelectionItem } from "@/app/student/map/_components/FilterSelectionItem"
 import { useState } from "react"
 
-export default function IndustryTypeSelection({
+export default function FilterSection({
   filter,
   onChange
 }: {

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

@@ -19,6 +19,7 @@ import {
   addMapIconAssets,
   backgroundLayerStyle,
   boothLayerStyle,
+  boothOutlineStyle,
   buildingLayerStyle,
   lineLayerStyle,
   roomLayerStyle,
@@ -48,6 +49,8 @@ export function MapComponent({
 }) {
   const mapRef = useRef<MapRef>(null)
 
+  const [mapZoom, setMapZoom] = useState(initialView.zoom)
+
   const [markerScale, setMarkerScale] = useState(1)
 
   const [preLocationId, setPreLocationId] = useState<LocationId>(location.id)
@@ -153,8 +156,9 @@ export function MapComponent({
   function onZoomChange() {
     const zoom = mapRef.current?.getZoom()
     if (zoom === undefined) return
-    const scale = Math.max(0.3, Math.min(2, 1 + (zoom - 20) * 0.5))
+    const scale = Math.max(0.2, Math.min(1, 1 + (zoom - 20) * 0.5))
     setMarkerScale(scale)
+    setMapZoom(zoom)
   }
 
   return (
@@ -203,29 +207,41 @@ export function MapComponent({
         </Source>
 
         <Source
-          id="nymble-plan-style"
+          id="booths-outline"
           type="geojson"
           promoteId={"id"}
-          data={geoJsonPlanData}>
-          <Layer {...lineLayerStyle}></Layer>
-        </Source>
-
-        <Source
-          id="nymble-plan-routes"
-          type="geojson"
-          promoteId={"id"}
-          data={geoJsonPlanRoutesData}>
-          <Layer {...routeLayerStyle}></Layer>
+          data={currentGeoJsonBoothData}>
+          <Layer {...boothOutlineStyle}></Layer>
         </Source>
 
         <Source
-          id="nymble-plan-points"
+          id="nymble-plan-style"
           type="geojson"
           promoteId={"id"}
           data={geoJsonPlanData}>
-          <Layer {...symbolLayerStyle}></Layer>
+          <Layer {...lineLayerStyle}></Layer>
         </Source>
 
+        {mapZoom > 19 && (
+          <Source
+            id="nymble-plan-routes"
+            type="geojson"
+            promoteId={"id"}
+            data={geoJsonPlanRoutesData}>
+            <Layer {...routeLayerStyle}></Layer>
+          </Source>
+        )}
+
+        {mapZoom > 19 && (
+          <Source
+            id="nymble-plan-points"
+            type="geojson"
+            promoteId={"id"}
+            data={geoJsonPlanData}>
+            <Layer {...symbolLayerStyle}></Layer>
+          </Source>
+        )}
+
         {markers}
       </MapboxMap>
     </div>

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

@@ -11,8 +11,10 @@ import { BoothListItem } from "@/app/student/map/_components/BoothListItem"
 import MapFilters from "@/app/student/map/_components/MapFilters"
 import { Booth, BoothID, BoothMap } from "@/app/student/map/lib/booths"
 import { LocationId } from "@/app/student/map/lib/locations"
+import { FILTERS_LOCAL_STORAGE_KEY } from "@/app/student/map/lib/survey"
 import { sortBooths } from "@/app/student/map/lib/utils"
 import { useScreenSize } from "@/components/shared/hooks/useScreenSize"
+import { useFilterData } from "@/components/shared/hooks/useSurveyData"
 import { Button } from "@/components/ui/button"
 import { Drawer, DrawerContent } from "@/components/ui/drawer"
 import { Input } from "@/components/ui/input"
@@ -23,11 +25,12 @@ import {
   ChevronsLeft,
   ChevronsRight,
   FilterIcon,
-  MapIcon,
   ListIcon,
+  MapIcon,
   X
 } from "lucide-react"
-import { useEffect, useRef, useState } from "react"
+import { useRef, useState } from "react"
+
 
 export default function Sidebar({
   boothsById,
@@ -63,11 +66,13 @@ export default function Sidebar({
     employments: makeFilter("employments", "Employments", exhibitors),
     industries: makeFilter("industries", "Industries", exhibitors)
   }
-  const [filters, setFilters] = useState<FilterMap>(defaultFilters)
+
+  const filterData = useFilterData() || defaultFilters
+  const [filters, setFilters] = useState<FilterMap>(filterData)
 
-  useEffect(() => {
-    if (activeBoothId != null) setOpen(true)
-  }, [activeBoothId])
+  // useEffect(() => {
+  //   if (activeBoothId != null) setOpen(true)
+  // }, [activeBoothId])
 
   function clearFilters() {
     setFilters(defaultFilters)
@@ -80,6 +85,11 @@ export default function Sidebar({
     else setFilteredBooths(applyFilters(booths, Object.values(filters))) // apply filters again when input is cleared
   }
 
+  function onFilterSubmit() {
+    setShowFilters(false)
+    localStorage.setItem(FILTERS_LOCAL_STORAGE_KEY, JSON.stringify(filters))
+  }
+
   if (activeBoothId != null) {
     const exhibitor = boothsById.get(activeBoothId)?.exhibitor
     if (!exhibitor) {
@@ -123,7 +133,7 @@ export default function Sidebar({
             filters={filters}
             setFilters={setFilters}
             setFilteredBooths={setFilteredBooths}
-            onSelect={() => setShowFilters(false)}
+            onSelect={onFilterSubmit}
           />
         </div>
       </SidebarContainer>

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

@@ -32,30 +32,31 @@ export const geoJsonNymblePlan3RoomsData =
   nymblePlan3RoomsDataRaw as GeoJsonPlanData
 
 const style = {
-  boothFillColor: "#89bc82",
-  boothOutlineColor: "#0e3e08",
+  boothFillColor: "#7ABE7D",
+  boothOutlineColor: "#2d572f",
+  boothOutlineWidth: 3,
 
-  boothActiveFillColor: "#21c00d",
+  boothActiveFillColor: "#a0df98",
   boothHoveredFillColor: "#a0df98",
   boothNotFilteredOpacity: 0.4,
 
   buildingBackgroundColor: "#1A201C",
-  buildingOutlineColor: "#ff0000",
-  buildingOutlineWidth: 2,
+  // buildingOutlineColor: "#ff0000",
+  // buildingOutlineWidth: 2,
 
-  buildingStructureColor: "#17845A",
-  buildingStructureWidth: 3,
+  buildingStructureColor: "#475247",
+  buildingStructureWidth: 2,
 
   routeColor: "#F3ECC3",
-  routeWidth: 2,
+  routeWidth: 1,
 
-  routeHintColor: "#F3E592",
-  routeHintWidth: 1,
+  routeHintColor: "#F3ECC3",
+  routeHintWidth: 0,
 
   roomBackgroundColor: "#1f2b24",
 
   backgroundColor: "#40d07e",
-  backgroundOpacity: 0.2
+  backgroundOpacity: 0.0
 } as const
 
 export enum LineType {
@@ -110,10 +111,9 @@ export const boothLayerStyle: FillLayer = {
     "fill-opacity": [
       "case",
       ["boolean", ["feature-state", "filtered"], false],
-      1,
+      0.8,
       style.boothNotFilteredOpacity
     ],
-    "fill-outline-color": style.boothOutlineColor,
     "fill-color": [
       "case",
       ["boolean", ["feature-state", "active"], false],
@@ -125,6 +125,16 @@ export const boothLayerStyle: FillLayer = {
   }
 }
 
+export const boothOutlineStyle: LineLayer = {
+  source: "booths",
+  id: "booths-outline",
+  type: "line",
+  paint: {
+    "line-width": style.boothOutlineWidth,
+    "line-color": style.boothOutlineColor
+  }
+}
+
 export const buildingLayerStyle: FillLayer = {
   source: "buildings",
   id: "buildings",

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

@@ -1,4 +1,4 @@
-export const LOCAL_STORAGE_KEY = "survey_data"
+export const FILTERS_LOCAL_STORAGE_KEY = "mapFilters"
 
 export interface SurveyData {
   Programme: string

src/components/shared/hooks/useSurveyData.tsx

@@ -1,20 +1,20 @@
 "use client"
 
-import { LOCAL_STORAGE_KEY, SurveyData } from "@/app/student/map/lib/survey"
+import { FilterMap } from "@/app/student/lib/filters"
+import { FILTERS_LOCAL_STORAGE_KEY } from "@/app/student/map/lib/survey"
 import { useEffect, useState } from "react"
 
-export function useSurveyData() {
-  const [surveyData, setSurveyData] = useState<SurveyData | null>(null)
-  const [isSurveyDataLoaded, setIsSurveyDataLoaded] = useState(false)
+export function useFilterData() {
+  const [filterData, setfilterData] = useState<FilterMap | null>(null)
 
   useEffect(() => {
-    const rawStoredData = localStorage.getItem(LOCAL_STORAGE_KEY)
+    const rawStoredData = localStorage.getItem(FILTERS_LOCAL_STORAGE_KEY)
 
     const storedData = rawStoredData
-      ? (JSON.parse(rawStoredData) as SurveyData)
+      ? (JSON.parse(rawStoredData) as FilterMap)
       : null
-    setSurveyData(storedData)
-    setIsSurveyDataLoaded(true) // Mark data fetching as done
+    setfilterData(storedData)
+
   }, [])
-  return { surveyData, isSurveyDataLoaded }
+  return filterData
 }

src/feature_flags.ts

@@ -16,13 +16,13 @@ export const FEATURE_FLAG_DEFINITIONS = {
     ]
   }
 } satisfies FlagDefinitionsType
-
+    
 export const FEATURE_FLAGS: Record<
   keyof typeof FEATURE_FLAG_DEFINITIONS,
   boolean
 > = {
   EVENT_PAGE: true,
-  MAP_PAGE: false
+  MAP_PAGE: true
 }
 
 export default FEATURE_FLAGS