diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/components/LocationsMap.svelte | 92 |
1 files changed, 7 insertions, 85 deletions
diff --git a/src/components/LocationsMap.svelte b/src/components/LocationsMap.svelte index df4edaef..a967542f 100644 --- a/src/components/LocationsMap.svelte +++ b/src/components/LocationsMap.svelte @@ -42,20 +42,20 @@ zoomSnap: 0, zoomControl: false, attributionControl: false - }).setView([49.26, -123.05], 12.5); + }).setView([49.26, -123.05], 15); const myCustomColour = '#F7931A'; const markerHtmlStyles = ` background-color: ${myCustomColour}; - width: 2rem; - height: 2rem; + width: 9rem; + height: 9rem; display: block; position: relative; border-radius: 100% 100% 0; transform: rotate(45deg); opacity: 0.9; - border: 5px solid #000`; + border: 2px solid #000`; const icon = L.divIcon({ className: 'my-custom-pin', @@ -82,9 +82,6 @@ location['osm_json'].lon <= northEast.lng ); - console.log('Southwest corner:', southWest); - console.log('Northeast corner:', northEast); - L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/toner/{z}/{x}/{y}.png', { maxZoom: 18, subdomains: ['a', 'b', 'c', 'd'] @@ -187,91 +184,16 @@ : '' }` ); + marker.addTo(map); }); } }); - let positionTooltips = () => { - const MAX_ITERATIONS = 1000; - const REPULSION_STRENGTH = 0.05; - const SPRING_STRENGTH = 0.02; - const MAX_DISTANCE = 120; // maximum distance a tooltip is allowed to drift from its marker - - // Get all tooltips - const tooltips = document.querySelectorAll('.leaflet-tooltip'); - - // Convert NodeList to Array for easier operations - const tooltipArray = Array.from(tooltips); - - // Initial setup for each tooltip -tooltipArray.forEach(tooltip => { - const computedStyle = getComputedStyle(tooltip); - const markerX = parseFloat(computedStyle.left); - const markerY = parseFloat(computedStyle.top); - - tooltip.desiredX = markerX; - tooltip.desiredY = markerY; - tooltip.velocityX = 0; - tooltip.velocityY = 0; -}); - - for (let i = 0; i < MAX_ITERATIONS; i++) { - tooltipArray.forEach((tooltipA) => { - let forceX = 0, - forceY = 0; - - // Calculate repulsion from all other tooltips - tooltipArray.forEach((tooltipB) => { - if (tooltipA !== tooltipB) { - const rectA = tooltipA.getBoundingClientRect(); - const rectB = tooltipB.getBoundingClientRect(); - - let dx = rectA.x - rectB.x; - let dy = rectA.y - rectB.y; - let distance = Math.sqrt(dx * dx + dy * dy); - - if (distance < Math.max(rectA.width, rectA.height)) { - // Adjust this threshold if necessary - forceX += (dx / distance) * REPULSION_STRENGTH; - forceY += (dy / distance) * REPULSION_STRENGTH; - } - } - }); - - // Apply spring force towards desired position - let dx = tooltipA.desiredX - tooltipA.offsetLeft; - let dy = tooltipA.desiredY - tooltipA.offsetTop; - - forceX += dx * SPRING_STRENGTH; - forceY += dy * SPRING_STRENGTH; - - // Update position - tooltipA.style.left = `${tooltipA.offsetLeft + forceX}px`; - tooltipA.style.top = `${tooltipA.offsetTop + forceY}px`; - - // Ensure tooltip doesn't move too far from its marker - let dxFromDesired = tooltipA.offsetLeft - tooltipA.desiredX; - let dyFromDesired = tooltipA.offsetTop - tooltipA.desiredY; - let distanceFromDesired = Math.sqrt( - dxFromDesired * dxFromDesired + dyFromDesired * dyFromDesired - ); - - if (distanceFromDesired > MAX_DISTANCE) { - tooltipA.style.left = `${tooltipA.desiredX}px`; - tooltipA.style.top = `${tooltipA.desiredY}px`; - } - }); - } - }; - onDestroy(async () => map && map.remove()); </script> -<!-- <div class="mx-auto w-[14043px] h-[9933px] w-full z-0" bind:this={mapElement} /> --> -<div class="mx-auto w-[1000px] h-[600px] w-full z-0" bind:this={mapElement} /> - -<button on:click={positionTooltips}>Iterate</button> +<div class="mx-auto w-[14043px] h-[9933px] w-full z-0" bind:this={mapElement} /> <style> @import 'leaflet/dist/leaflet.css'; @@ -279,7 +201,7 @@ tooltipArray.forEach(tooltip => { :global(.leaflet-tooltip) { border: none; border-radius: 4px; - font-size: 1rem; + font-size: 8rem; font-weight: bolder; color: black; background-color: rgba(255, 255, 255, 0.5); |