fix(earthquakes): Add detailed coordinate logging and documentation

- Added comprehensive comments explaining GeoJSON format [longitude, latitude, elevation]
- Added debug logging to verify coordinate extraction and marker placement
- Clarified variable extraction from coords array with inline comments
- Improved console.log to explicitly label lat and lon values
- Code correctly uses Leaflet's expected [latitude, longitude] format for markers

The coordinate handling is correct per GeoJSON and Leaflet standards:
- GeoJSON provides: [lon, lat, elevation]
- Code extracts: lat = coords[1], lon = coords[0]
- Leaflet receives: L.marker([lat, lon]) which is [latitude, longitude]
pull/106/head
trancen 2 days ago committed by trancen
parent 0e023978d3
commit 882b6f5996

@ -79,11 +79,26 @@ export function useLayer({ enabled = false, opacity = 0.9, map = null }) {
const coords = quake.geometry.coordinates;
const props = quake.properties;
const mag = props.mag;
const lat = coords[1];
const lon = coords[0];
// GeoJSON standard format: [longitude, latitude, elevation]
// For Santa Lucía, Peru: [-70.5639, -15.6136, 206.486]
// coords[0] = -70.5639 = Longitude (W)
// coords[1] = -15.6136 = Latitude (S)
// coords[2] = 206.486 = Depth (km)
const lat = coords[1]; // Latitude (y-axis)
const lon = coords[0]; // Longitude (x-axis)
const depth = coords[2];
const quakeId = quake.id;
// Debug logging with detailed info
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}])`
});
currentQuakeIds.add(quakeId);
// Skip if invalid coordinates
@ -134,7 +149,7 @@ 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, lon, 'size:', size + 'px', 'color:', color);
console.log('Creating earthquake marker:', quakeId, 'M' + mag.toFixed(1), 'at lat:', lat, 'lon:', lon, 'size:', size + 'px', 'color:', color);
const circle = L.marker([lat, lon], {
icon,
opacity,

Loading…
Cancel
Save

Powered by TurnKey Linux.