From 2f1c0403588eda7d9795c72704e1613ebb9358d5 Mon Sep 17 00:00:00 2001
From: trancen <genspark_dev@genspark.ai>
Date: Tue, 3 Feb 2026 18:49:50 +0000
Subject: [PATCH] fix: Make earthquake and lightning icons visible with z-index
 10000

- Added zIndexOffset: 10000 to marker options
- Increased CSS z-index from 1000 to 10000 !important
- Added position: relative to icon containers
- This ensures icons appear on top of all other map layers
- Markers are created and logged correctly but were behind other layers
---
 src/plugins/layers/useEarthquakes.js |  6 +++++-
 src/plugins/layers/useLightning.js   |  6 +++++-
 src/styles/main.css                  | 10 ++++++++--
 3 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/src/plugins/layers/useEarthquakes.js b/src/plugins/layers/useEarthquakes.js
index ce1d310..bf4c60a 100644
--- a/src/plugins/layers/useEarthquakes.js
+++ b/src/plugins/layers/useEarthquakes.js
@@ -113,7 +113,11 @@ export function useLayer({ enabled = false, opacity = 0.9, map = null }) {
       });
       
       console.log('Creating earthquake marker:', quakeId, 'at', lat, lon, 'size:', size, 'color:', color);
-      const circle = L.marker([lat, lon], { icon, opacity });
+      const circle = L.marker([lat, lon], { 
+        icon, 
+        opacity,
+        zIndexOffset: 10000 // Ensure markers appear on top
+      });
 
       // Add to map first
       circle.addTo(map);
diff --git a/src/plugins/layers/useLightning.js b/src/plugins/layers/useLightning.js
index ad2f994..126f188 100644
--- a/src/plugins/layers/useLightning.js
+++ b/src/plugins/layers/useLightning.js
@@ -167,7 +167,11 @@ export function useLayer({ enabled = false, opacity = 0.9, map = null }) {
         iconAnchor: [size/2, size/2]
       });
       
-      const marker = L.marker([lat, lon], { icon, opacity });
+      const marker = L.marker([lat, lon], { 
+        icon, 
+        opacity,
+        zIndexOffset: 10000 // Ensure markers appear on top
+      });
       
       // Add to map first
       marker.addTo(map);
diff --git a/src/styles/main.css b/src/styles/main.css
index 6a5c551..022b7a4 100644
--- a/src/styles/main.css
+++ b/src/styles/main.css
@@ -874,8 +874,9 @@ body::before {
 
 /* Earthquake icon markers */
 .earthquake-icon {
-  z-index: 1000 !important;
+  z-index: 10000 !important;
   pointer-events: auto;
+  position: relative !important;
 }
 
 .earthquake-icon div {
@@ -884,12 +885,15 @@ body::before {
   justify-content: center;
   cursor: pointer;
   user-select: none;
+  position: relative;
+  z-index: 10000 !important;
 }
 
 /* Lightning icon markers */
 .lightning-icon {
-  z-index: 1000 !important;
+  z-index: 10000 !important;
   pointer-events: auto;
+  position: relative !important;
 }
 
 .lightning-icon div {
@@ -898,4 +902,6 @@ body::before {
   justify-content: center;
   cursor: pointer;
   user-select: none;
+  position: relative;
+  z-index: 10000 !important;
 }