marker cluster wip

3 files changed, 35 insertions, 31 deletions

diff --git a/package.json b/package.json
index 07deb599..9a577534 100644
--- a/package.json
+++ b/package.json
@@ -15,11 +15,12 @@
 		"@sveltejs/kit": "1.0.0-next.505",
 		"@zerodevx/svelte-toast": "^0.7.2",
 		"autoprefixer": "^10.4.11",
-		"bitcoin-address-validation": "^2.2.1",
 		"bip21": "^2.0.3",
+		"bitcoin-address-validation": "^2.2.1",
 		"bolt11": "^1.4.0",
 		"cookie": "^0.5.0",
 		"leaflet": "^1.8.0",
+		"leaflet.markercluster": "^1.5.3",
 		"postcss": "^8.4.16",
 		"prettier": "^2.7.1",
 		"prettier-plugin-svelte": "^2.7.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d4a3c75f..feff2c63 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -11,6 +11,7 @@ specifiers:
   bolt11: ^1.4.0
   cookie: ^0.5.0
   leaflet: ^1.8.0
+  leaflet.markercluster: ^1.5.3
   postcss: ^8.4.16
   prettier: ^2.7.1
   prettier-plugin-svelte: ^2.7.0
@@ -35,6 +36,7 @@ devDependencies:
   bolt11: 1.4.0
   cookie: 0.5.0
   leaflet: 1.8.0
+  leaflet.markercluster: [email protected]
   postcss: 8.4.16
   prettier: 2.7.1
   prettier-plugin-svelte: 2.7.0_nk6d2fkgcllkkdynqbuearcure
@@ -1017,6 +1019,14 @@ packages:
     engines: {node: '>=6'}
     dev: true
 
+  /leaflet.markercluster/[email protected]:
+    resolution: {integrity: sha512-vPTw/Bndq7eQHjLBVlWpnGeLa3t+3zGiuM7fJwCkiMFq+nmRuG3RI3f7f4N4TDX7T4NpbAXpR2+NTRSEGfCSeA==}
+    peerDependencies:
+      leaflet: ^1.3.1
+    dependencies:
+      leaflet: 1.8.0
+    dev: true
+
   /leaflet/1.8.0:
     resolution: {integrity: sha512-gwhMjFCQiYs3x/Sf+d49f10ERXaEFCPr+nVTryhAW8DWbMGqJqt9G4XuIaHmFW08zYvhgdzqXGr8AlW8v8dQkA==}
     dev: true
diff --git a/src/components/LocationsMap.svelte b/src/components/LocationsMap.svelte
index 56dd44e1..9b7c9997 100644
--- a/src/components/LocationsMap.svelte
+++ b/src/components/LocationsMap.svelte
@@ -7,9 +7,10 @@
 
 	onMount(async () => {
 		if (browser) {
-			const leaflet = await import('leaflet');
+			const L = await import('leaflet');
+			const { MarkerClusterGroup } = await import('leaflet.markercluster');
 
-			map = leaflet.map(mapElement, { attributionControl: false }).setView([0, 0], 0);
+			map = L.map(mapElement, { attributionControl: false }).setView([0, 0], 0);
 
 			const myCustomColour = 'orange';
 
@@ -36,61 +37,52 @@
 			const locations = [
 				{
 					lat: 49.27034,
-					long: -123.141373,
+					lng: -123.141373,
 					info: 'Rolf Vancouver <br> 1628 W 1st Ave #231, Vancouver <br> <a href="https://www.rolfbodywork.com" target="_blank" rel="noreferrer">www.rolfbodywork.com</a>'
 				},
-				{ lat: 49.26419, long: -123.15702, info: 'Tacos Jorge <br> 2287 W Broadway, Vancouver' },
+				{ lat: 49.26419, lng: -123.15702, info: 'Tacos Jorge <br> 2287 W Broadway, Vancouver' },
 				{
 					lat: 49.28273,
-					long: -123.120735,
+					lng: -123.120735,
 					info: 'Engage Strategies <br> <a href="https://www.linkedin.com/in/shauna-collister-32905214" target="_blank" rel="noreferrer">LinkedIn</a>'
 				},
 				{
 					lat: 49.28134,
-					long: -123.02373,
+					lng: -123.02373,
 					info: 'Lumota Collection <br> Clothing Design/Upcycling - Appointment Only <br> <a href="tel:778-726-3776">778-726-3776</a> <br> 369 Boundary Rd, Vancouver, BC V5K 2B1 <br> <a href="https://www.instagram.com/lumotacollection/" target="_blank" rel="noreferrer">IG: Lumotacollection</a> <br> <a href="https://www.facebook.com/LumotaCollection/posts" target="_blank" rel="noreferrer">FB: Lumotacollection</a>'
 				},
 				{
 					lat: 49.22643,
-					long: -122.93085,
+					lng: -122.93085,
 					info: 'Goodwin Contracting <br> Project Management/Consulting - Appointment Only <br> <a href="tel:403-812-1085">403-812-1085</a> <br> 8017 17th Ave, Burnaby, BC V3N 1M5'
 				},
 				{
 					lat: 51.04813,
-					long: -114.07999,
+					lng: -114.07999,
 					info: 'Goodwin Contracting <br> Project Management/Consulting - Appointment Only <br> <a href="tel:403-812-1085">403-812-1085</a> <br> 8017 17th Ave, Burnaby, BC V3N 1M5'
 				},
 				{
 					lat: 49.2677,
-					long: -123.10124,
+					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>'
 				}
 			];
 
-			leaflet
-				.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/toner/{z}/{x}/{y}.png', {
-					maxZoom: 19,
-					subdomains: ['a', 'b', 'c', 'd']
-				})
-				.addTo(map);
+			L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/toner/{z}/{x}/{y}.png', {
+				maxZoom: 19,
+				subdomains: ['a', 'b', 'c', 'd']
+			}).addTo(map);
 
-			locations.forEach((location) => {
-				leaflet
-					.marker([location.lat, location.long])
-					.addTo(map)
-					.bindPopup(location.info)
-					._icon.classList.add('huechange');
+			let markers = new MarkerClusterGroup();
+			locations.forEach(({ lat, lng, info }) => {
+				let marker = L.marker([lat, lng]);
+
+				marker.addTo(map).bindPopup(info)._icon.classList.add('huechange');
+				markers.addLayer(marker);
 			});
 
-			map.fitBounds([
-				[locations[0].lat, locations[0].long],
-				[locations[1].lat, locations[1].long],
-				[locations[2].lat, locations[2].long],
-				[locations[3].lat, locations[3].long],
-				[locations[4].lat, locations[4].long],
-				[locations[5].lat, locations[5].long],
-				[locations[6].lat, locations[6].long]
-			]);
+			map.fitBounds(locations.map(({ lat, lng }) => [lat, lng]));
+			map.addLayer(markers);
 		}
 	});
 
@@ -109,4 +101,5 @@
 
 <style>
 	@import 'leaflet/dist/leaflet.css';
+	@import 'leaflet.markercluster/dist/MarkerCluster.css';
 </style>