From 47eb3ef10721c9db11096c0682151272d597736b Mon Sep 17 00:00:00 2001
From: trancen <genspark_dev@genspark.ai>
Date: Tue, 3 Feb 2026 20:34:56 +0000
Subject: [PATCH] fix(earthquakes): Remove position:relative CSS causing icon
 offset

ROOT CAUSE IDENTIFIED:
The popup was appearing in the correct location (Japan) but the icon
was appearing elsewhere (Australia). This proved the marker position
was CORRECT but the icon visual was being offset.

PROBLEM:
CSS rule 'position: relative !important' on .earthquake-icon was
breaking Leaflet's marker positioning, causing icons to render far
from their actual marker positions.

SOLUTION:
- Removed 'position: relative' from .earthquake-icon CSS
- Removed 'position: relative' from .earthquake-icon div CSS
- Reverted to standard [lat, lon] format (popup confirmed this is correct)

The popups appearing in correct locations proved:
- Coordinate extraction is correct: lat=coords[1], lon=coords[0]
- Marker positioning is correct: L.marker([lat, lon])
- Only the icon visual rendering was broken by CSS

This explains why the issue persisted regardless of [lat,lon] vs [lon,lat]
testing - the CSS was always breaking the icon positioning.
---
 src/plugins/layers/useEarthquakes.js | 25 +++++++++++--------------
 src/styles/main.css                  |  4 ++--
 2 files changed, 13 insertions(+), 16 deletions(-)

diff --git a/src/plugins/layers/useEarthquakes.js b/src/plugins/layers/useEarthquakes.js
index 56b0e97..074babe 100644
--- a/src/plugins/layers/useEarthquakes.js
+++ b/src/plugins/layers/useEarthquakes.js
@@ -96,8 +96,8 @@ export function useLayer({ enabled = false, opacity = 0.9, map = null }) {
         mag: mag,
         geojson: `[lon=${coords[0]}, lat=${coords[1]}, depth=${coords[2]}]`,
         extracted: `lat=${lat} (coords[1]), lon=${lon} (coords[0])`,
-        leafletMarkerCall: `L.marker([${lon}, ${lat}])`,
-        explanation: `TESTING: Using [longitude, latitude] format`
+        leafletMarkerCall: `L.marker([${lat}, ${lon}])`,
+        explanation: `Standard Leaflet [latitude, longitude] format - CSS position fixed`
       });
 
       currentQuakeIds.add(quakeId);
@@ -147,21 +147,18 @@ export function useLayer({ enabled = false, opacity = 0.9, map = null }) {
           box-shadow: 0 2px 8px rgba(0,0,0,0.5);
         ">${waveIcon}</div>`,
         iconSize: [size, size],
-        iconAnchor: [size/2, size/2]
+        iconAnchor: [size/2, size/2],
+        popupAnchor: [0, 0]  // Popup appears at the marker position (icon center)
       });
       
       console.log(`📍 Creating marker for ${quakeId}: M${mag.toFixed(1)} at [lat=${lat}, lon=${lon}] - ${props.place}`);
       
-      // TESTING: Try swapping to [lon, lat] format
-      // Based on user testing, [lat, lon] format is plotting in wrong locations
-      // Japan earthquake (37.6°N, 142.4°E) appearing near Tasmania with [lat, lon]
-      // This suggests coordinates need to be swapped
-      const markerCoords = [lon, lat];  // SWAPPED: [longitude, latitude]
+      // Use standard Leaflet [latitude, longitude] format
+      // The popup was appearing in the correct location, confirming marker position is correct
+      // The icon was appearing offset due to CSS position: relative issue (now fixed)
+      const markerCoords = [lat, lon];  // CORRECT: [latitude, longitude]
       
-      console.log(`   → TESTING [LON, LAT] FORMAT:`);
-      console.log(`   → markerCoords = [${markerCoords[0]}, ${markerCoords[1]}]`);
-      console.log(`   → This is [${lon}, ${lat}] = [longitude, latitude]`);
-      console.log(`   → For Japan: [142.4, 37.6] should plot in Japan, not Tasmania`);
+      console.log(`   → Creating L.marker([${markerCoords[0]}, ${markerCoords[1]}]) = [lat, lon]`);
       
       const circle = L.marker(markerCoords, { 
         icon, 
@@ -196,8 +193,8 @@ export function useLayer({ enabled = false, opacity = 0.9, map = null }) {
           }
         }, 10);
         
-        // Create pulsing ring effect - use same [lon, lat] format as marker
-        const pulseRing = L.circle([lon, lat], {
+        // Create pulsing ring effect - use same [lat, lon] format
+        const pulseRing = L.circle([lat, lon], {
           radius: 50000, // 50km radius in meters
           fillColor: color,
           fillOpacity: 0,
diff --git a/src/styles/main.css b/src/styles/main.css
index 022b7a4..ad8b710 100644
--- a/src/styles/main.css
+++ b/src/styles/main.css
@@ -876,7 +876,7 @@ body::before {
 .earthquake-icon {
   z-index: 10000 !important;
   pointer-events: auto;
-  position: relative !important;
+  /* Removed position: relative - was causing icons to appear offset from marker position */
 }
 
 .earthquake-icon div {
@@ -885,7 +885,7 @@ body::before {
   justify-content: center;
   cursor: pointer;
   user-select: none;
-  position: relative;
+  /* position: relative removed here too */
   z-index: 10000 !important;
 }