From fa8878e0eb910a72033b441c91e1351ae1d877f8 Mon Sep 17 00:00:00 2001
From: Adam Soltys <asoltys@gmail.com>
Date: Mon, 25 Sep 2023 20:57:09 -0700
Subject: menu update

---
 src/components/AppHeader.svelte    |  2 ++
 src/components/LocationsMap.svelte | 41 +++++++++++++++++++++++++++++---------
 2 files changed, 34 insertions(+), 9 deletions(-)

(limited to 'src/components')

diff --git a/src/components/AppHeader.svelte b/src/components/AppHeader.svelte
index ac815211..8f1fe947 100644
--- a/src/components/AppHeader.svelte
+++ b/src/components/AppHeader.svelte
@@ -17,6 +17,8 @@
 		menuButtons = [
 			{ key: 'nav.settings', icon: 'settings', href: `/${user.username}/settings` },
 			{ key: 'nav.support', icon: 'support', href: `/support` },
+			{ key: 'nav.map', icon: 'map', href: `/${user.username}/map` },
+			{ key: 'nav.merch', icon: 'shirt', href: `https://coinosmerch.com` },
 			{ key: 'nav.signOut', icon: 'logout', href: `/logout` }
 		];
 
diff --git a/src/components/LocationsMap.svelte b/src/components/LocationsMap.svelte
index 37dd60ba..b9833c6c 100644
--- a/src/components/LocationsMap.svelte
+++ b/src/components/LocationsMap.svelte
@@ -34,16 +34,32 @@
 	let mapElement;
 	let map;
 
+	function updateLabelVisibility() {
+		const zoom = map.getZoom();
+		map.eachLayer((layer) => {
+			if (layer.getTooltip) {
+				const tooltip = layer.getTooltip();
+				if (tooltip) {
+					if (zoom > 14) {
+						// Show labels at zoom levels greater than 14
+						tooltip.setOpacity(1.0);
+					} else {
+						tooltip.setOpacity(0.0);
+					}
+				}
+			}
+		});
+	}
+
 	onMount(async () => {
 		if (browser) {
 			const L = await import('leaflet');
 
 			map = L.map(mapElement, {
-        zoomSnap: 0,
-				attributionControl: false,
+				zoomSnap: 0,
+				attributionControl: false
 			}).setView([49.26, -123.05], 12);
 
-
 			const myCustomColour = '#F7931A';
 
 			const markerHtmlStyles = `
@@ -178,17 +194,22 @@
 				marker.addTo(map);
 			});
 
+			updateLabelVisibility();
+			map.on('zoomend', updateLabelVisibility);
 			// map.fitBounds(locations.map(({ osm_json: { lat, lon } }) => [lat, lon]));
 		}
 	});
 
-	onDestroy(async () => map && map.remove());
+	onDestroy(async () => {
+		map.off('zoomend', updateLabelVisibility);
+		map && map.remove();
+	});
 </script>
 
 <div class="container mx-auto max-w-4xl">
-    <div class="flex w-full">
-        <div class="mx-auto h-[550px] w-full z-0" bind:this={mapElement} />
-    </div>
+	<div class="flex w-full">
+		<div class="mx-auto h-[550px] w-full z-0" bind:this={mapElement} />
+	</div>
 </div>
 
 <style>
@@ -197,9 +218,11 @@
 	:global(.leaflet-tooltip) {
 		border: none;
 		border-radius: 4px;
-    font-size: 12px;
+		font-size: 12px;
 		font-weight: bolder;
 		color: black;
-		background-color: rgba(255, 255, 255, 0.5);
+		background-color: rgba(255, 255, 255, 0.9);
+    left: 1.3rem;
+    top: -1rem;
 	}
 </style>
-- 
cgit v1.2.3