bigbigmap

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);