fix: Earthquake animation classList error - wait for DOM element

The error 'Cannot read properties of undefined (reading classList)' was
caused by trying to access circle._path before the marker was added to
the map and rendered in the DOM.

Fix:
- Add marker to map FIRST (circle.addTo(map))
- THEN wait 10ms for DOM element to be created
- Only then access circle._path.classList
- Added try/catch with console.warn for safety
- Remove duplicate circle.addTo(map) call

This ensures the SVG path element exists before we try to animate it.
pull/82/head
trancen 1 day ago
parent c2ff09f857
commit 895f5c0c28

@ -108,19 +108,30 @@ export function useLayer({ enabled = false, opacity = 0.9, map = null }) {
className: 'earthquake-marker'
});
// Add to map first
circle.addTo(map);
// Add pulsing animation for new earthquakes ONLY
if (isNew) {
// Add animation class temporarily
circle._path.classList.add('earthquake-pulse-new');
// Remove animation class after it completes (0.6s)
// Wait for DOM element to be created, then add animation class
setTimeout(() => {
try {
if (circle._path) {
circle._path.classList.remove('earthquake-pulse-new');
circle._path.classList.add('earthquake-pulse-new');
// Remove animation class after it completes (0.6s)
setTimeout(() => {
try {
if (circle._path) {
circle._path.classList.remove('earthquake-pulse-new');
}
} catch (e) {}
}, 600);
}
} catch (e) {}
}, 600);
} catch (e) {
console.warn('Could not animate earthquake marker:', e);
}
}, 10);
// Create pulsing ring effect
const pulseRing = L.circle([lat, lon], {
@ -170,7 +181,7 @@ export function useLayer({ enabled = false, opacity = 0.9, map = null }) {
</div>
`);
circle.addTo(map);
// Already added to map above (before animation)
newMarkers.push(circle);
});

Loading…
Cancel
Save

Powered by TurnKey Linux.