Map tweaks

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

@@ -11,7 +11,9 @@ export function BoothMarker({ booth, scale }: { booth: Booth; scale: number }) {
       key={booth.id}
       longitude={booth.center[0]}
       latitude={booth.center[1]}>
-      <div className="cursor-default" style={{ transform: `scale(${scale})` }}>
+      <div
+        className="cursor-default transition"
+        style={{ transform: `scale(${scale})` }}>
         {logoSrc ? (
           <div className="flex size-[60px]">
             <Image

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

@@ -94,7 +94,7 @@ export default function MainView({
             filteredBooths={filteredBooths}
             setFilteredBooths={setFilteredBooths}
           />
-          <div className="h-[calc(100dvh-144px)] flex-grow">
+          <div className="h-[calc(100dvh-144px)] flex-grow sm:h-full">
             <MapComponent
               initialView={initialView}
               boothsById={currentLocationBoothsById}

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

@@ -18,7 +18,6 @@ import {
 import { BoothMap, GeoJsonBooth } from "../lib/booths"
 import {
   addMapIconAssets,
-  backgroundLayerStyle,
   boothLayerStyle,
   boothOutlineStyle,
   buildingLayerStyle,
@@ -56,9 +55,7 @@ export function MapComponent({
 
   const mapRef = useRef<MapRef>(null)
 
-  const [mapZoom, setMapZoom] = useState(initialView.zoom)
-
-  const [markerScale, setMarkerScale] = useState(1)
+  const [markerScale, setMarkerScale] = useState(0.5)
 
   const [preLocationId, setPreLocationId] = useState<LocationId>(location.id)
   // Fly to location center on change
@@ -76,7 +73,6 @@ export function MapComponent({
       const { pathname } = window.location
       window.history.replaceState(null, "", pathname)
     }, 300)
-    setMarkerScale(0.6)
     return () => clearTimeout(timeout)
   }, [location])
 
@@ -171,9 +167,10 @@ export function MapComponent({
   function onZoomChange() {
     const zoom = mapRef.current?.getZoom()
     if (zoom === undefined) return
-    const scale = Math.max(0.2, Math.min(1, 1 + (zoom - 20) * 0.5))
-    setMarkerScale(scale)
-    setMapZoom(zoom)
+
+    if (zoom < 18.5) setMarkerScale(0.2)
+    else if (zoom < 20.5) setMarkerScale(0.5)
+    else setMarkerScale(1.0)
   }
 
   return (
@@ -195,8 +192,6 @@ export function MapComponent({
         ]}
         dragRotate={false}
         mapStyle="https://api.maptiler.com/maps/376fa556-c405-4a91-8e9e-15be82eb3a58/style.json?key=mgMcr2yF2fWUHzf27ygv">
-        <Layer {...backgroundLayerStyle}></Layer>
-
         {/** Order sensitive! */}
         <Source
           id="buildings"
@@ -238,25 +233,21 @@ export function MapComponent({
           <Layer {...lineLayerStyle}></Layer>
         </Source>
 
-        {mapZoom > 19 && (
-          <Source
-            id="nymble-plan-routes"
-            type="geojson"
-            promoteId={"id"}
-            data={geoJsonPlanRoutesData}>
-            <Layer {...routeLayerStyle}></Layer>
-          </Source>
-        )}
+        <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>
-        )}
+        <Source
+          id="nymble-plan-points"
+          type="geojson"
+          promoteId={"id"}
+          data={geoJsonPlanData}>
+          <Layer {...symbolLayerStyle}></Layer>
+        </Source>
 
         {markers}
       </MapboxMap>

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

@@ -33,8 +33,6 @@ import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area"
 import { cn } from "@/lib/utils"
 import {
   ArrowLeft,
-  ChevronsLeft,
-  ChevronsRight,
   EraserIcon,
   FilterIcon,
   MapIcon,
@@ -135,7 +133,6 @@ export default function Sidebar({
               onClick={() => setActiveDrawerBoothId(null)}>
               <ArrowLeft size={30} className="stroke-stone-400" />
             </Button>
-
             <div className="flex justify-end py-2">
               <Button
                 className="flex gap-2"
@@ -342,22 +339,17 @@ function SidebarContainer({
     )
   }
 
+  // Sidebar is always open on desktop
   return (
-    <div className={cn("relative h-full", open ? "w-[500px]" : "w-0")}>
+    <div className={cn("relative h-full w-[500px] overflow-hidden")}>
+      <DrawerHeader>
+        <Dialog>{header}</Dialog>
+      </DrawerHeader>
+
       <ScrollArea className="h-full">
         {children}
         <ScrollBar></ScrollBar>
       </ScrollArea>
-
-      <div className="absolute right-[-38px] top-0 z-20">
-        <Button
-          variant="ghost"
-          className="rounded-s-none border-none p-1"
-          onClick={() => setOpen(!open)}
-          title={open ? "Close sidebar" : "Open sidebar"}>
-          {open ? <ChevronsLeft size={30} /> : <ChevronsRight size={30} />}
-        </Button>
-      </div>
     </div>
   )
 }

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

@@ -13,7 +13,6 @@ import {
   makeBooth
 } from "@/app/student/map/lib/booths"
 import {
-  backgroundLayerStyle,
   buildingLayerStyle,
   lineLayerStyle,
   routeLayerStyle,
@@ -74,8 +73,10 @@ export default function EditorMapComponent({
 
   const [booths, setBooths] = useState<Booth[]>([])
 
+  const [markerScale, setMarkerScale] = useState(0.5)
+
   const markers = booths.map(booth => (
-    <BoothMarker key={booth.id} booth={booth} scale={1} />
+    <BoothMarker key={booth.id} booth={booth} scale={markerScale} />
   ))
 
   const draw = useMemo(() => {
@@ -140,6 +141,15 @@ export default function EditorMapComponent({
     updateBooths()
   }
 
+  function onZoomChange() {
+    const zoom = mapRef.current?.getZoom()
+    if (zoom === undefined) return
+
+    if (zoom < 18.5) setMarkerScale(0.2)
+    else if (zoom < 20.5) setMarkerScale(0.5)
+    else setMarkerScale(1.0)
+  }
+
   // Effects ----------------------------------------------
 
   function initializeDraw() {
@@ -200,6 +210,7 @@ export default function EditorMapComponent({
       <MapboxMap
         ref={mapRef}
         onLoad={() => setMapLoaded(true)}
+        onZoom={onZoomChange}
         initialViewState={{
           longitude: 18.070567,
           latitude: 59.34726,
@@ -213,8 +224,6 @@ export default function EditorMapComponent({
           [18.079, 59.35]
         ]}
         mapStyle="https://api.maptiler.com/maps/376fa556-c405-4a91-8e9e-15be82eb3a58/style.json?key=mgMcr2yF2fWUHzf27ygv">
-        <Layer {...backgroundLayerStyle}></Layer>
-
         {/** Order sensitive! */}
         <Source
           id="buildings"

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

@@ -53,10 +53,7 @@ const style = {
   routeHintColor: "#F3ECC3",
   routeHintWidth: 1,
 
-  roomBackgroundColor: "#1f2b24",
-
-  backgroundColor: "#40d07e",
-  backgroundOpacity: 0.0
+  roomBackgroundColor: "#1f2b24"
 } as const
 
 export enum LineType {
@@ -158,15 +155,6 @@ export const roomLayerStyle: FillLayer = {
   }
 }
 
-export const backgroundLayerStyle: BackgroundLayer = {
-  id: "background",
-  type: "background",
-  paint: {
-    "background-color": style.backgroundColor,
-    "background-opacity": style.backgroundOpacity
-  }
-}
-
 export const lineLayerStyle: LineLayer = {
   source: "lines",
   id: "lines",
@@ -183,6 +171,7 @@ export const routeLayerStyle: LineLayer = {
   id: "routes",
   type: "line",
   filter: ["==", "$type", "LineString"],
+  minzoom: 19,
   paint: {
     "line-color": [
       "case",
@@ -210,6 +199,7 @@ export const symbolLayerStyle: SymbolLayer = {
   id: "points",
   type: "symbol",
   filter: ["==", "$type", "Point"],
+  minzoom: 19,
   layout: {
     // Specify which image to use for each PointType
     "icon-image": [

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

@@ -7,15 +7,15 @@ export type Location = {
 }
 
 const nymbleCenter = {
-  longitude: 18.070408551823675,
-  latitude: 59.34726434961294,
-  zoom: 19
+  longitude: 18.070592659323438,
+  latitude: 59.347274028818134,
+  zoom: 18.891181298825842
 }
 
 const libraryCenter = {
-  longitude: 18.072008997107673,
-  latitude: 59.347931139608846,
-  zoom: 19
+  longitude: 18.072310911561203,
+  latitude: 59.3479216743261,
+  zoom: 18.11485244486189
 }
 
 export const locations: Location[] = [