fix(earthquakes): Revert to standard Leaflet [lat, lon] format and enhance debugging

Issue: Markers were moving when zooming and appearing off-screen, indicating
coordinate system mismatch.

Changes:
- Reverted L.marker() and L.circle() to use standard [lat, lon] format
- Enhanced debug logging to show:
  * GeoJSON format with labeled coordinates
  * Extracted lat/lon with source indices
  * Actual Leaflet marker call format
  * Explanation of coordinate system
- Added clearer marker creation log

The standard Leaflet coordinate format is [latitude, longitude]:
- Latitude: -90 to +90 (South to North)
- Longitude: -180 to +180 (West to East)

This should fix markers drifting when zooming and appearing outside map bounds.

src/plugins/layers/useEarthquakes.js

@@ -94,9 +94,10 @@ export function useLayer({ enabled = false, opacity = 0.9, map = null }) {
       console.log(`🌋 Earthquake ${quakeId}:`, {
         place: props.place,
         mag: mag,
-        geojson: `[${coords[0]}, ${coords[1]}, ${coords[2]}]`,
-        extracted: `lat=${lat}, lon=${lon}`,
-        marker: `L.marker([${lat}, ${lon}])`
+        geojson: `[lon=${coords[0]}, lat=${coords[1]}, depth=${coords[2]}]`,
+        extracted: `lat=${lat} (coords[1]), lon=${lon} (coords[0])`,
+        leafletMarkerCall: `L.marker([${lat}, ${lon}])`,
+        explanation: `Leaflet expects [latitude, longitude] format`
       });
 
       currentQuakeIds.add(quakeId);
@@ -149,10 +150,9 @@ export function useLayer({ enabled = false, opacity = 0.9, map = null }) {
         iconAnchor: [size/2, size/2]
       });
       
-      console.log('Creating earthquake marker:', quakeId, 'M' + mag.toFixed(1), 'at lat:', lat, 'lon:', lon, 'size:', size + 'px', 'color:', color);
-      // FIX: Swap coordinates - empirically markers were appearing in wrong locations
-      // Even though standard Leaflet expects [lat, lng], this specific setup requires [lon, lat]
-      const circle = L.marker([lon, lat], { 
+      console.log(`📍 Creating marker for ${quakeId}: M${mag.toFixed(1)} at [lat=${lat}, lon=${lon}] - ${props.place}`);
+      // Leaflet expects [latitude, longitude] format for all markers
+      const circle = L.marker([lat, lon], { 
         icon, 
         opacity,
         zIndexOffset: 10000 // Ensure markers appear on top
@@ -185,8 +185,8 @@ export function useLayer({ enabled = false, opacity = 0.9, map = null }) {
           }
         }, 10);
         
-        // Create pulsing ring effect - also swap coordinates to match marker location
-        const pulseRing = L.circle([lon, lat], {
+        // Create pulsing ring effect
+        const pulseRing = L.circle([lat, lon], {
           radius: 50000, // 50km radius in meters
           fillColor: color,
           fillOpacity: 0,

test_coords.py

@@ -0,0 +1,26 @@
+# Test coordinate wrapping for Kamchatka, Russia
+# Kamchatka is around: 56°N, 162°E
+
+lat = 56.0  # Correct latitude
+lon = 162.0  # Correct longitude (Eastern hemisphere)
+
+print(f"Kamchatka, Russia:")
+print(f"  Correct coordinates: lat={lat}, lon={lon}")
+print(f"  Leaflet marker: L.marker([{lat}, {lon}])")
+print(f"  This should plot in: Eastern Russia (Kamchatka Peninsula)")
+print()
+
+# What if longitude is negative?
+lon_neg = -162.0
+print(f"If longitude was negative:")
+print(f"  L.marker([{lat}, {lon_neg}])")
+print(f"  This would plot in: Western Alaska (near Bering Strait)")
+print()
+
+# Peru example
+peru_lat = -15.6
+peru_lon = -70.6
+print(f"Peru earthquake:")
+print(f"  Correct coordinates: lat={peru_lat}, lon={peru_lon}")
+print(f"  Leaflet marker: L.marker([{peru_lat}, {peru_lon}])")
+print(f"  This should plot in: Peru, South America")