From 48f1b499a1bcbb9dfb604e5be09ff587211f2a22 Mon Sep 17 00:00:00 2001
From: Adam Soltys <asoltys@gmail.com>
Date: Fri, 17 Nov 2023 00:30:07 -0800
Subject: add avatars to map

---
 src/components/LocationsMap.svelte | 87 +++++++++++++-------------------------
 src/components/Popup.svelte        | 40 ++++++++++++++++++
 src/components/index.js            |  1 +
 3 files changed, 70 insertions(+), 58 deletions(-)
 create mode 100644 src/components/Popup.svelte

(limited to 'src/components')

diff --git a/src/components/LocationsMap.svelte b/src/components/LocationsMap.svelte
index 4b1b1b82..ebbf8df4 100644
--- a/src/components/LocationsMap.svelte
+++ b/src/components/LocationsMap.svelte
@@ -1,8 +1,8 @@
 <script>
-	import { onMount, onDestroy } from 'svelte';
+	import { tick, onMount, onDestroy } from 'svelte';
 	import { browser } from '$app/environment';
 	import html2canvas from 'html2canvas';
-	import { Icon } from '$comp';
+	import { Icon, Popup } from '$comp';
 
 	import 'maplibre-gl/dist/maplibre-gl.css';
 
@@ -29,7 +29,7 @@
 				mapWrapper.msRequestFullscreen();
 			}
 
-      map.resize();
+			map.resize();
 		} else {
 			if (document.exitFullscreen) {
 				document.exitFullscreen();
@@ -53,19 +53,19 @@
 	}
 
 	async function flyToMarker(marker) {
-		marker.getElement().click();
-
 		map.flyTo({
-			zoom: 14,
+			zoom: 12,
 			center: marker.getLngLat(),
 			essential: true,
 			easing: function (t) {
 				return 1 - Math.pow(1 - t, 3);
 			},
-			duration: 5000
+			duration: 3000
 		});
 
-		await new Promise((r) => setTimeout(r, 5000));
+		await new Promise((r) => setTimeout(r, 3000));
+		marker.getElement().click();
+		await new Promise((r) => setTimeout(r, 1500));
 
 		if (!timeout) return;
 
@@ -76,7 +76,7 @@
 			easing: function (t) {
 				return 1 - Math.pow(1 - t, 3);
 			},
-			duration: 2000
+			duration: 1500
 		});
 	}
 
@@ -93,7 +93,7 @@
 		if (currentIndex >= inview.length) currentIndex = 0;
 		flyToMarker(inview[currentIndex]);
 
-		timeout = setTimeout(startFlying, 7000);
+		timeout = setTimeout(startFlying, 6000);
 	}
 
 	function stopFlying() {
@@ -108,20 +108,6 @@
 		map.off('moveend'); // Remove moveend listener if set
 	}
 
-	let checkAddress = (location) => {
-		if (location['addr:housenumber'] && location['addr:street'] && location['addr:city']) {
-			return `${
-				location['addr:housenumber'] + ' ' + location['addr:street'] + ', ' + location['addr:city']
-			}`;
-		} else if (location['addr:street'] && location['addr:city']) {
-			return `${location['addr:street'] + ', ' + location['addr:city']}`;
-		} else if (location['addr:city']) {
-			return `${location['addr:city']}`;
-		} else {
-			return '';
-		}
-	};
-
 	let inview = [];
 
 	function updateLabelVisibility() {
@@ -142,20 +128,6 @@
 		inview = inview.sort((a, b) => a.tags.name.localeCompare(b.tags.name));
 	}
 
-	let html = (tags) => `${
-		tags && tags.name ? `<span class='block font-bold'>${tags.name}</span>` : ''
-	}
-
-  <span class='block'>${tags && checkAddress(tags)}</span>
-
-  ${tags && tags.phone ? `<a href='tel:${tags.phone}' class='block'>${tags.phone}</a>` : ''}
-
-  ${
-		tags && tags.website
-			? `<a href=${tags.website} target="_blank" rel="noreferrer" class='block text-blue-400 break-all'>${tags.website}</a>`
-			: ''
-	}`;
-
 	let popups = {};
 	let counter = 0;
 
@@ -179,18 +151,26 @@
 						let element = document.createElement('div');
 						element.className = 'marker';
 
+						let popupContainer = document.createElement('div');
+
+						let popup = new Popup({
+							target: popupContainer,
+							props: { tags }
+						});
+
+            if (tags.name?.startsWith("Cord")) console.log(location)
+
 						let marker = new maplibre.Marker({ color: '#F7931A' })
 							.setLngLat([lon, lat])
-							.setPopup(new maplibre.Popup().setHTML(html(tags)))
+							.setPopup(new maplibre.Popup().setDOMContent(popupContainer))
 							.addTo(map);
 
 						marker.id = counter++;
 
 						marker.getElement().addEventListener('click', () => {
-							let h = html(marker.tags);
 							let p = marker.getPopup();
 							popups[marker.id] = p;
-							p.setHTML(h);
+							p.setDOMContent(popupContainer);
 							p.on('close', () => {
 								delete popups[marker.id];
 							});
@@ -221,26 +201,17 @@
 				map.on('wheel', stopFlying);
 				map.on('dragstart', stopFlying);
 
-				document.addEventListener('fullscreenchange', onFullScreenChange, false);
-				document.addEventListener('webkitfullscreenchange', onFullScreenChange, false);
-				document.addEventListener('mozfullscreenchange', onFullScreenChange, false);
-				document.addEventListener('MSFullscreenChange', onFullScreenChange, false);
-
-				function onFullScreenChange() {
-          console.log("resizing")
-					if (map) {
-						map.resize(); // This will adjust the map size to fit the new container size
-					}
-				}
+				let resize = () => map && map.resize();
+
+				document.addEventListener('fullscreenchange', resize, false);
+				document.addEventListener('webkitfullscreenchange', resize, false);
+				document.addEventListener('mozfullscreenchange', resize, false);
+				document.addEventListener('MSFullscreenChange', resize, false);
 			});
 		}
 	});
 
-	onDestroy(() => {
-		if (map) {
-			map.remove();
-		}
-	});
+	onDestroy(() => map && map.remove());
 </script>
 
 <div class="container mx-auto max-w-4xl">
@@ -301,6 +272,6 @@
 		color: black;
 		background-color: white;
 		overflow: hidden;
-		width: 280px;
+		width: 260px;
 	}
 </style>
diff --git a/src/components/Popup.svelte b/src/components/Popup.svelte
new file mode 100644
index 00000000..e0cec12e
--- /dev/null
+++ b/src/components/Popup.svelte
@@ -0,0 +1,40 @@
+<script>
+	import { Avatar } from '$comp';
+	export let tags;
+
+	let addr = (tags) => {
+		let { 'addr:housenumber': house, 'addr:street': street, 'addr:city': city } = tags;
+		if (house) return `${house} ${street}, ${city}`;
+		if (street) return `${street}, ${city}`;
+		if (city) return city;
+		return '';
+	};
+</script>
+
+{#if tags}
+	<span class="block font-bold">{tags.name}</span>
+
+	<span class="block">{addr(tags)}</span>
+
+	{#if tags.phone}
+		<a href="tel:${tags.phone}" class="block">{tags.phone}</a>
+	{/if}
+
+	{#if tags.website}
+		<a href="${tags.website}" target="_blank" rel="noreferrer" class="block text-blue-400 break-all"
+			>{tags.website}</a
+		>
+	{/if}
+
+	{#if tags.user}
+    <a href={`/${tags.user.username}`}>
+		<div class="flex gap-1">
+			<Avatar user={tags.user} size={16} />
+			<div class="my-auto">
+				{tags.user.username}
+			</div>
+		</div>
+    </a>
+	{/if}
+
+{/if}
diff --git a/src/components/index.js b/src/components/index.js
index 1853e7c9..53838581 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -1,3 +1,4 @@
+export { default as Popup } from './Popup.svelte';
 export { default as Code } from './Code.svelte';
 export { default as Slider } from './Slider.svelte';
 export { default as Pinpad } from './Pinpad.svelte';
-- 
cgit v1.2.3