menu update

5 files changed, 56 insertions, 9 deletions

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>
diff --git a/src/locales/en.json b/src/locales/en.json
index dbc8bf3d..7dd7c258 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -145,6 +145,8 @@
 		"failed": "Login failed"
 	},
 	"nav": {
+    "map": "Map",
+    "merch": "Merch",
 		"profile": "Profile",
 		"startInSeconds": "Start in Seconds",
 		"account": "Account",
diff --git a/src/routes/(app)/[username]/map/+page.server.js b/src/routes/(app)/[username]/map/+page.server.js
new file mode 100644
index 00000000..7936e88b
--- /dev/null
+++ b/src/routes/(app)/[username]/map/+page.server.js
@@ -0,0 +1,12 @@
+import { get } from '$lib/utils';
+
+// export const prerender = true;
+export let load = async () => {
+	let data = { locations: [] };
+
+	try {
+		data = await get('/locations');
+	} catch (e) {}
+
+	return data;
+};
diff --git a/src/routes/(app)/[username]/map/+page.svelte b/src/routes/(app)/[username]/map/+page.svelte
new file mode 100644
index 00000000..b5e4dfad
--- /dev/null
+++ b/src/routes/(app)/[username]/map/+page.svelte
@@ -0,0 +1,8 @@
+<script>
+  import { LocationsMap } from "$comp";
+  export let data;
+
+	let { locations } = data;
+</script>
+
+<LocationsMap {locations} />