add leaflet back in and add locations section to landing page

5 files changed, 72 insertions, 1 deletions

diff --git a/package.json b/package.json
index 00f90aba..04dbf4ae 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
 		"@zerodevx/svelte-toast": "^0.7.2",
 		"autoprefixer": "^10.4.7",
 		"cookie": "^0.5.0",
+		"leaflet": "^1.8.0",
 		"postcss": "^8.4.14",
 		"prettier": "^2.7.1",
 		"prettier-plugin-svelte": "^2.7.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 73e3501f..b68a7e3f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -6,6 +6,7 @@ specifiers:
   '@zerodevx/svelte-toast': ^0.7.2
   autoprefixer: ^10.4.7
   cookie: ^0.5.0
+  leaflet: ^1.8.0
   postcss: ^8.4.14
   prettier: ^2.7.1
   prettier-plugin-svelte: ^2.7.0
@@ -23,6 +24,7 @@ devDependencies:
   '@zerodevx/svelte-toast': 0.7.2
   autoprefixer: [email protected]
   cookie: 0.5.0
+  leaflet: 1.8.0
   postcss: 8.4.14
   prettier: 2.7.1
   prettier-plugin-svelte: 2.7.0_o3ioganyptcsrh6x4hnxvjkpqi
@@ -942,6 +944,10 @@ packages:
     engines: {node: '>=6'}
     dev: true
 
+  /leaflet/1.8.0:
+    resolution: {integrity: sha512-gwhMjFCQiYs3x/Sf+d49f10ERXaEFCPr+nVTryhAW8DWbMGqJqt9G4XuIaHmFW08zYvhgdzqXGr8AlW8v8dQkA==}
+    dev: true
+
   /lilconfig/2.0.6:
     resolution: {integrity: sha512-9JROoBW7pobfsx+Sq2JsASvCo6Pfo6WWoUW79HuB1BCoBXD4PLWJPqDF6fNj67pqBYTbAHkE57M1kS/+L1neOg==}
     engines: {node: '>=10'}
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';