From 895f5c0c281777829e1931c98b3f15fdd29dcf82 Mon Sep 17 00:00:00 2001
From: trancen <genspark_dev@genspark.ai>
Date: Tue, 3 Feb 2026 17:32:55 +0000
Subject: [PATCH] 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.
---
 src/plugins/layers/useEarthquakes.js | 27 +++++++++++++++++++--------
 1 file changed, 19 insertions(+), 8 deletions(-)

diff --git a/src/plugins/layers/useEarthquakes.js b/src/plugins/layers/useEarthquakes.js
index 1a19172..8321f6d 100644
--- a/src/plugins/layers/useEarthquakes.js
+++ b/src/plugins/layers/useEarthquakes.js
@@ -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);
     });