diff --git a/src/plugins/layers/useEarthquakes.js b/src/plugins/layers/useEarthquakes.js index a8c19a0..ba85f77 100644 --- a/src/plugins/layers/useEarthquakes.js +++ b/src/plugins/layers/useEarthquakes.js @@ -151,10 +151,10 @@ export function useLayer({ enabled = false, opacity = 0.9, map = null }) { }); console.log(`📍 Creating marker for ${quakeId}: M${mag.toFixed(1)} at [lat=${lat}, lon=${lon}] - ${props.place}`); - // CRITICAL FIX: This Leaflet setup requires [longitude, latitude] format - // Even though standard Leaflet docs say [lat, lng], this specific map configuration - // expects [lon, lat] to plot correctly. Verified by testing with known coordinates. - const circle = L.marker([lon, lat], { + // Use standard Leaflet [latitude, longitude] format (same as all other markers in this app) + const markerCoords = [lat, lon]; + console.log(` → Calling L.marker([${markerCoords[0]}, ${markerCoords[1]}]) - Should be [latitude, longitude]`); + const circle = L.marker(markerCoords, { icon, opacity, zIndexOffset: 10000 // Ensure markers appear on top @@ -187,8 +187,8 @@ export function useLayer({ enabled = false, opacity = 0.9, map = null }) { } }, 10); - // Create pulsing ring effect - also use [lon, lat] format - 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/test_earthquake_coords.js b/test_earthquake_coords.js new file mode 100644 index 0000000..3e70a8b --- /dev/null +++ b/test_earthquake_coords.js @@ -0,0 +1,28 @@ +// Test to understand the coordinate flow + +// Sample Dominican Republic earthquake from USGS +const geojsonData = { + geometry: { + coordinates: [-68.625, 18.0365, 75.0] // [lon, lat, depth] - GeoJSON format + }, + properties: { + place: "37 km S of Boca de Yuma, Dominican Republic" + } +}; + +// Current code extraction +const coords = geojsonData.geometry.coordinates; +const lat = coords[1]; // 18.0365 +const lon = coords[0]; // -68.625 + +console.log("GeoJSON coordinates:", coords); +console.log("Extracted lat:", lat, "(should be 18.0365)"); +console.log("Extracted lon:", lon, "(should be -68.625)"); +console.log(""); +console.log("If we call L.marker([lat, lon]):"); +console.log(" L.marker([" + lat + ", " + lon + "])"); +console.log(" This should plot at: 18.0365°N, 68.625°W (Dominican Republic)"); +console.log(""); +console.log("If we call L.marker([lon, lat]):"); +console.log(" L.marker([" + lon + ", " + lat + "])"); +console.log(" This would plot at: -68.625°S, 18.0365°E (Indian Ocean!)");