add leaflet back in and add locations section to landing page

3 files changed, 65 insertions, 1 deletions

diff --git a/src/components/About.svelte b/src/components/About.svelte
index 7ec0800c..4989f71e 100644
--- a/src/components/About.svelte
+++ b/src/components/About.svelte
@@ -1,5 +1,5 @@
 <script>
-	import { Image, Icon } from '$comp';
+	import { Image, Icon, LocationsMap } from '$comp';
 	import { _, json } from 'svelte-i18n';
 </script>
 
@@ -62,3 +62,14 @@
 		{/each}
 	</ul>
 </div>
+
+<div class="mt-20">
+	<h3 class="text-5xl font-medium mb-5 text-center">Locations</h3>
+	<p class="text-secondary text-xl w-full md:w-10/12 lg:w-2/3 2xl:w-[800px] mx-auto mb-10">
+		These are businesses that are accepting bitcoin using CoinOS point of sale. If you are using our
+		application, please <a href="mailto:[email protected]" class="underline underline-offset-4"
+			>let us know!</a
+		>
+	</p>
+	<LocationsMap />
+</div>
diff --git a/src/components/LocationsMap.svelte b/src/components/LocationsMap.svelte
new file mode 100644
index 00000000..42469563
--- /dev/null
+++ b/src/components/LocationsMap.svelte
@@ -0,0 +1,52 @@
+<script>
+	import { onMount, onDestroy } from 'svelte';
+	import { browser } from '$app/env';
+
+	let mapElement;
+	let map;
+
+	onMount(async () => {
+		if (browser) {
+			const leaflet = await import('leaflet');
+
+			// this sets the inital view of the map on page load
+			map = leaflet.map(mapElement).setView([49.267265, -123.1491965], 13);
+
+			leaflet
+				.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+					maxZoom: 19,
+					attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
+				})
+				.addTo(map);
+
+			// business locations
+			leaflet
+				.marker([49.27034, -123.141373])
+				.addTo(map)
+				.bindPopup(
+					'Rolf Vancouver <br> 1628 W 1st Ave #231, Vancouver <br> <a href="https://www.rolfbodywork.com" target="_blank" rel="noreferrer">www.rolfbodywork.com</a>'
+				);
+
+			leaflet
+				.marker([49.26419, -123.15702])
+				.addTo(map)
+				.bindPopup('Tacos Jorge <br> 2287 W Broadway, Vancouver');
+		}
+	});
+
+	onDestroy(async () => {
+		if (map) {
+			console.log('Unloading Leaflet map.');
+			map.remove();
+		}
+	});
+</script>
+
+<div
+	class="mx-auto w-full md:w-11/12 lg:w-3/4 2xl:w-1/2 max-w-7xl h-[450px] z-0"
+	bind:this={mapElement}
+/>
+
+<style>
+	@import 'leaflet/dist/leaflet.css';
+</style>
diff --git a/src/components/index.js b/src/components/index.js
index 39a4e5e7..eed5d3f3 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -13,3 +13,4 @@ export { default as PageNotFound } from './404.svelte';
 export { default as About } from './About.svelte';
 export { default as Footer } from './Footer.svelte';
 export { default as Toggle } from './Toggle.svelte';
+export { default as LocationsMap } from './LocationsMap.svelte';