From aa6debcd83c0b4067e0f8ce9a11d9c9ac02476ad Mon Sep 17 00:00:00 2001
From: secondl1ght <85003930+secondl1ght@users.noreply.github.com>
Date: Tue, 25 Oct 2022 18:01:42 -0600
Subject: hook up locations map to btc map api and OSM data

---
 src/components/About.svelte        |   4 +-
 src/components/LocationsMap.svelte | 101 ++++++++++++++++++++++++++++++++++---
 2 files changed, 97 insertions(+), 8 deletions(-)

(limited to 'src/components')

diff --git a/src/components/About.svelte b/src/components/About.svelte
index cf45a253..86c5bd03 100644
--- a/src/components/About.svelte
+++ b/src/components/About.svelte
@@ -1,4 +1,6 @@
 <script>
+export let locations
+
 	import { Image, Icon, LocationsMap } from '$comp';
 	import { t } from '$lib/translations';
 
@@ -102,5 +104,5 @@
 	<p class="text-secondary text-xl w-full md:w-10/12 lg:w-2/3 2xl:w-[800px] mx-auto mb-10">
 		{@html $t('about.locations.description')}
 	</p>
-	<LocationsMap />
+	<LocationsMap locations={locations} />
 </div>
diff --git a/src/components/LocationsMap.svelte b/src/components/LocationsMap.svelte
index 6d0b086e..520788cd 100644
--- a/src/components/LocationsMap.svelte
+++ b/src/components/LocationsMap.svelte
@@ -1,4 +1,6 @@
 <script>
+export let locations
+
 	import { onMount, onDestroy } from 'svelte';
 	import { browser } from '$app/environment';
 
@@ -34,7 +36,9 @@
 				html: `<span style="${markerHtmlStyles}" />`
 			});
 
-			const locations = [
+locations = locations.filter(location => location['osm_json'].tags && location['osm_json'].tags['payment:coinos'] === 'yes')
+
+		/*	const locations = [
 				{
 					lat: 49.27034,
 					lng: -123.141373,
@@ -66,22 +70,105 @@
 					lng: -123.10124,
 					info: 'General Strike Coffee <br> Artisan coffee shop <br> 1965 Main St, Vancouver, BC V5T 2K6 <br> <a href="https://www.instagram.com/generalstrikecoffee/" target="_blank" rel="noreferrer">IG: generalstrikecoffee</a>'
 				}
-			];
+			];*/
 
 			L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/toner/{z}/{x}/{y}.png', {
-				maxZoom: 19,
+				maxZoom: 18,
 				subdomains: ['a', 'b', 'c', 'd']
 			}).addTo(map);
 
+const 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 markers = new MarkerClusterGroup();
-			locations.forEach(({ lat, lng, info }) => {
-				let marker = L.marker([lat, lng]);
+			locations.forEach((location) => {
+			if (location['deleted_at']) {
+					return;
+				}
+
+				location = location['osm_json'];
+
+				let marker = L.marker([location.lat, location.lon]);
+
+				marker.bindPopup(`${
+							location.tags && location.tags.name
+								? `<span class='block'>${location.tags.name}</span>`
+								: ''
+						}
+
+                <span class='block'>${
+									location.tags && checkAddress(location.tags)
+								}</span>
+
+
+                  ${
+										location.tags && location.tags.phone
+											? `<a href='tel:${location.tags.phone}' class='block'>${location.tags.phone}</a>`
+											: ''
+									}
+
+                  ${
+										location.tags && location.tags.website
+											? `<a href=${location.tags.website} target="_blank" rel="noreferrer" class='block'>${location.tags.website}</a>`
+											: ''
+									}
+
+					        ${
+										location.tags && location.tags['contact:twitter']
+											? `<a href=${
+													location.tags['contact:twitter'].startsWith('http')
+														? location.tags['contact:twitter']
+														: `https://twitter.com/${location.tags['contact:twitter']}`
+											  } target="_blank" rel="noreferrer" class='block'>TWT: ${location.tags['contact:twitter']}</a>`
+											: ''
+									}
+
+	        ${
+						location.tags && location.tags['contact:instagram']
+							? `<a href=${
+									location.tags['contact:instagram'].startsWith('http')
+										? location.tags['contact:instagram']
+										: `https://instagram.com/${location.tags['contact:instagram']}`
+								} target="_blank" rel="noreferrer" class='block'>IG: ${location.tags['contact:instagram']}</a>`
+							: ''
+					}
+
+	        ${
+						location.tags && location.tags['contact:facebook']
+							? `<a href=${
+									location.tags['contact:facebook'].startsWith('http')
+										? location.tags['contact:facebook']
+										: `https://facebook.com/${location.tags['contact:facebook']}`
+								} target="_blank" rel="noreferrer" class='block'>FB: ${location.tags['contact:facebook']}</a>`
+							: ''
+					}
+
+	        ${
+						location.tags && location.tags['contact:linkedin']
+							? `<a href=${
+									location.tags['contact:linkedin'].startsWith('http')
+										? location.tags['contact:linkedin']
+										: `https://linkedin.com/${location.tags['contact:linkedin']}`
+								} target="_blank" rel="noreferrer" class='block'>LI: ${location.tags['contact:linkedin']}</a>`
+							: ''
+					}
 
-				marker.bindPopup(info);
+`);
 				markers.addLayer(marker);
 			});
 
-			map.fitBounds(locations.map(({ lat, lng }) => [lat, lng]));
+			map.fitBounds(locations.map(({ osm_json: {lat, lon} }) => [lat, lon]));
 			map.addLayer(markers);
 		}
 	});
-- 
cgit v1.2.3