diff options
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/LocationsMap.svelte | 66 |
1 files changed, 54 insertions, 12 deletions
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> |