big map

5 files changed, 130 insertions, 14 deletions

diff --git a/package.json b/package.json
index 3789e2ad..fb749bc5 100644
--- a/package.json
+++ b/package.json
@@ -51,5 +51,9 @@
 			}
 		}
 	},
-	"type": "module"
+	"type": "module",
+	"dependencies": {
+		"html2canvas": "^1.4.1",
+		"leaflet-tooltip-layout": "^0.1.2"
+	}
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 2113cc28..b0c66862 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1,5 +1,17 @@
 lockfileVersion: '6.0'
 
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false
+
+dependencies:
+  html2canvas:
+    specifier: ^1.4.1
+    version: 1.4.1
+  leaflet-tooltip-layout:
+    specifier: ^0.1.2
+    version: 0.1.2([email protected])
+
 devDependencies:
   '@scure/base':
     specifier: ^1.1.1
@@ -604,6 +616,11 @@ packages:
     engines: {node: '>= 8'}
     dev: true
 
+  /[email protected]:
+    resolution: {integrity: sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==}
+    engines: {node: '>= 0.6.0'}
+    dev: false
+
   /[email protected]:
     resolution: {integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==}
     dev: true
@@ -733,6 +750,12 @@ packages:
     engines: {node: '>= 0.6'}
     dev: true
 
+  /[email protected]:
+    resolution: {integrity: sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==}
+    dependencies:
+      utrie: 1.0.2
+    dev: false
+
   /[email protected]:
     resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
     engines: {node: '>=4'}
@@ -955,6 +978,14 @@ packages:
       function-bind: 1.1.1
     dev: true
 
+  /[email protected]:
+    resolution: {integrity: sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==}
+    engines: {node: '>=8.0.0'}
+    dependencies:
+      css-line-break: 2.1.0
+      text-segmentation: 1.0.3
+    dev: false
+
   /[email protected]:
     resolution: {integrity: sha512-jsr4vafJhwoLVEDW3n1KvPnCCXWaQfRng0/EEYk1vNcQGcG/htAdhJX0be8YyqMoSz7+hZvOZSTAepsabiuhiQ==}
     dev: true
@@ -1026,6 +1057,14 @@ packages:
     engines: {node: '>=6'}
     dev: true
 
+  /[email protected]([email protected]):
+    resolution: {integrity: sha512-bc3hhaJQ2vldHE5jg4lnq0D1C83XqDUA2eN/fKF5P9CzBjAn9JBnKjnKJsxWG0TScRt4L6KoRKlYlsKksuKrFA==}
+    peerDependencies:
+      leaflet: ^1.3.4
+    dependencies:
+      leaflet: 1.9.3
+    dev: false
+
   /[email protected]([email protected]):
     resolution: {integrity: sha512-vPTw/Bndq7eQHjLBVlWpnGeLa3t+3zGiuM7fJwCkiMFq+nmRuG3RI3f7f4N4TDX7T4NpbAXpR2+NTRSEGfCSeA==}
     peerDependencies:
@@ -1036,7 +1075,6 @@ packages:
 
   /[email protected]:
     resolution: {integrity: sha512-iB2cR9vAkDOu5l3HAay2obcUHZ7xwUBBjph8+PGtmW/2lYhbLizWtG7nTeYht36WfOslixQF9D/uSIzhZgGMfQ==}
-    dev: true
 
   /[email protected]:
     resolution: {integrity: sha512-9JROoBW7pobfsx+Sq2JsASvCo6Pfo6WWoUW79HuB1BCoBXD4PLWJPqDF6fNj67pqBYTbAHkE57M1kS/+L1neOg==}
@@ -1612,6 +1650,12 @@ packages:
       - ts-node
     dev: true
 
+  /[email protected]:
+    resolution: {integrity: sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==}
+    dependencies:
+      utrie: 1.0.2
+    dev: false
+
   /[email protected]:
     resolution: {integrity: sha512-g/55ssRPUjShh+xkfx9UPDXqhckHEsHr4Vd9zX55oSdGZc/MD0m3sferOkwWtp98bv+kcVfEHtRJgBVJzelrzg==}
     dependencies:
@@ -1653,6 +1697,12 @@ packages:
     resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
     dev: true
 
+  /[email protected]:
+    resolution: {integrity: sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==}
+    dependencies:
+      base64-arraybuffer: 1.0.2
+    dev: false
+
   /[email protected]:
     resolution: {integrity: sha512-MXcSTerfPa4uqyzStbRoTgt5XIe3x5+42+q1sDuy3R5MDk66URdLMOZe5aPX/SQd+kuYAh0FdP/pO28IkQyTeg==}
     hasBin: true
diff --git a/src/components/LocationsMap.svelte b/src/components/LocationsMap.svelte
index 14418069..b7a02ab5 100644
--- a/src/components/LocationsMap.svelte
+++ b/src/components/LocationsMap.svelte
@@ -4,6 +4,33 @@
 	import { onMount, onDestroy } from 'svelte';
 	import { browser } from '$app/environment';
 
+	import html2canvas from 'html2canvas';
+
+	function captureHighResMap(mapElement, scale = 2) {
+		// Backup original size
+		let originalWidth = mapElement.offsetWidth;
+		let originalHeight = mapElement.offsetHeight;
+
+		// Scale the map element
+		mapElement.style.transform = `scale(${scale})`;
+		mapElement.style.transformOrigin = 'top left';
+		mapElement.style.width = originalWidth * scale + 'px';
+		mapElement.style.height = originalHeight * scale + 'px';
+
+		return html2canvas(mapElement, {
+			width: originalWidth * scale,
+			height: originalHeight * scale,
+			scale: scale
+		}).then((canvas) => {
+			// Restore the original size
+			mapElement.style.transform = '';
+			mapElement.style.width = originalWidth + 'px';
+			mapElement.style.height = originalHeight + 'px';
+
+			return canvas;
+		});
+	}
+
 	let mapElement;
 	let map;
 
@@ -11,17 +38,22 @@
 		if (browser) {
 			const L = await import('leaflet');
 
-      map = L.map(mapElement, { attributionControl: false }).setView([49.29, -123.1], 11.5);
+			map = L.map(mapElement, {
+        zoomSnap: 0,
+				zoomControl: false,
+				attributionControl: false,
+			}).setView([49.26, -123.05], 15.25);
+
 
 			const myCustomColour = '#F7931A';
 
 			const markerHtmlStyles = `
 			  background-color: ${myCustomColour};
-			  width: 1.25rem;
-			  height: 1.25rem;
+			  width: 22rem;
+			  height: 22rem;
 			  display: block;
 			  position: relative;
-			  border-radius: 1rem 1rem 0;
+        border-radius: 100% 100% 0;
 			  transform: rotate(45deg);
         opacity: 0.9;
 			  border: 1px solid #666`;
@@ -69,8 +101,12 @@
 				if (location['deleted_at']) return;
 
 				location = location['osm_json'];
-        let marker = L.marker([location.lat, location.lon], { icon });
+				let marker = L.marker([location.lat, location.lon], { icon });
 
+				// if (location.tags && location.tags.name) {
+				// 	marker.bindTooltip(location.tags.name, { permanent: true }).openTooltip();
+				// }
+        //
 				marker.bindPopup(
 					`${
 						location.tags && location.tags.name
@@ -140,7 +176,7 @@
 							: ''
 					}`
 				);
-        marker.addTo(map);
+				marker.addTo(map);
 			});
 
 			// map.fitBounds(locations.map(({ osm_json: { lat, lon } }) => [lat, lon]));
@@ -150,13 +186,19 @@
 	onDestroy(async () => map && map.remove());
 </script>
 
-<div class="container mx-auto max-w-4xl">
-	<div class="flex w-full">
-		<div class="mx-auto h-[550px] w-full z-0" bind:this={mapElement} />
-	</div>
-</div>
+<div class="absolute w-[14043px] h-[9933px] z-0" bind:this={mapElement} />
 
 <style>
 	@import 'leaflet/dist/leaflet.css';
-	@import 'leaflet.markercluster/dist/MarkerCluster.Default.css';
+
+	:global(.leaflet-tooltip) {
+		border: none;
+		border-radius: 4px;
+		font-size: 5rem;
+		font-weight: bolder;
+		color: black;
+		background-color: rgba(255, 255, 255, 0.5);
+    top: 14rem;
+    left: 12rem;
+	}
 </style>
diff --git a/src/routes/map/+page.server.js b/src/routes/map/+page.server.js
new file mode 100644
index 00000000..7936e88b
--- /dev/null
+++ b/src/routes/map/+page.server.js
@@ -0,0 +1,12 @@
+import { get } from '$lib/utils';
+
+// export const prerender = true;
+export let load = async () => {
+	let data = { locations: [] };
+
+	try {
+		data = await get('/locations');
+	} catch (e) {}
+
+	return data;
+};
diff --git a/src/routes/map/+page.svelte b/src/routes/map/+page.svelte
new file mode 100644
index 00000000..b5e4dfad
--- /dev/null
+++ b/src/routes/map/+page.svelte
@@ -0,0 +1,8 @@
+<script>
+  import { LocationsMap } from "$comp";
+  export let data;
+
+	let { locations } = data;
+</script>
+
+<LocationsMap {locations} />