feat: make icons disappear at distances

mahyarmirrashed · Dec 6, 2024 · 2438fd6 · 2438fd6
1 parent d3af890
commit 2438fd6
Showing 1 changed file with 12 additions and 5 deletions.
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -36,6 +36,7 @@
   );
 
   let map = $state<maplibregl.Map>(null!);
+  let mapZoom = $state<number | undefined>(0);
   const maptilerTopoLightStyle = `https://api.maptiler.com/maps/topo-v2/style.json?key=${PUBLIC_MAPTILER_KEY}`;
   const maptilerTopoDarkStyle = `https://api.maptiler.com/maps/topo-v2-dark/style.json?key=${PUBLIC_MAPTILER_KEY}`;
 
@@ -105,8 +106,14 @@
   <title>Campus Study Spots</title>
 </svelte:head>
 
-<MapLibre bind:map style={maptilerStyle} class="min-h-screen" standardControls>
-  {#if campusSelected}
+<MapLibre
+  bind:map
+  bind:zoom={mapZoom}
+  style={maptilerStyle}
+  class="min-h-screen"
+  standardControls
+>
+  {#if campusSelected && (mapZoom ?? 15) > 14}
     {#each campusSelected.spaces as space}
       <Marker
         lngLat={space.location}
@@ -200,9 +207,9 @@
 <Card.Root class="absolute bottom-10 left-2.5 z-10">
   <Card.Header>
     <Card.Title>Legend</Card.Title>
-    <Card.Description
-      >Colors indicate open status of the spaces.</Card.Description
-    >
+    <Card.Description>
+      Colors indicate open status of the spaces.
+    </Card.Description>
   </Card.Header>
   <Card.Content>
     <div class="flex flex-col gap-y-2">