From ee0e4f7e62738f5f0941bf34c48b2470df7e6368 Mon Sep 17 00:00:00 2001
From: trancen <genspark_dev@genspark.ai>
Date: Tue, 3 Feb 2026 18:52:19 +0000
Subject: [PATCH] fix: Use highly visible circle backgrounds for
 earthquake/lightning icons
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Changed from transparent emoji to solid colored circles
- Added white border and box-shadow for visibility
- Background color = magnitude/age color
- Emoji (🌋/⚡) centered on colored circle
- Much more visible on all map backgrounds
- Size: 12-36px for earthquakes, 12-32px for lightning
---
 src/plugins/layers/useEarthquakes.js | 17 +++++++++++++++--
 src/plugins/layers/useLightning.js   | 17 +++++++++++++++--
 2 files changed, 30 insertions(+), 4 deletions(-)

diff --git a/src/plugins/layers/useEarthquakes.js b/src/plugins/layers/useEarthquakes.js
index bf4c60a..6837d01 100644
--- a/src/plugins/layers/useEarthquakes.js
+++ b/src/plugins/layers/useEarthquakes.js
@@ -104,10 +104,23 @@ export function useLayer({ enabled = false, opacity = 0.9, map = null }) {
       else if (mag < 7) color = '#cc0000'; // Dark red - major
       else color = '#990000'; // Very dark red - great
 
-      // Create earthquake icon marker (using circle with waves emoji or special char)
+      // Create earthquake icon marker with high visibility
       const icon = L.divIcon({
         className: 'earthquake-icon',
-        html: `<div style="color: ${color}; font-size: ${size}px; text-shadow: 0 0 3px rgba(0,0,0,0.5); transition: all 0.3s;">🌋</div>`,
+        html: `<div style="
+          background-color: ${color}; 
+          color: white; 
+          width: ${size}px; 
+          height: ${size}px; 
+          border-radius: 50%; 
+          display: flex; 
+          align-items: center; 
+          justify-content: center;
+          font-size: ${size * 0.7}px;
+          font-weight: bold;
+          border: 2px solid white;
+          box-shadow: 0 2px 8px rgba(0,0,0,0.5);
+        ">🌋</div>`,
         iconSize: [size, size],
         iconAnchor: [size/2, size/2]
       });
diff --git a/src/plugins/layers/useLightning.js b/src/plugins/layers/useLightning.js
index 126f188..a6be711 100644
--- a/src/plugins/layers/useLightning.js
+++ b/src/plugins/layers/useLightning.js
@@ -159,10 +159,23 @@ export function useLayer({ enabled = false, opacity = 0.9, map = null }) {
       // Size based on intensity (12-32px)
       const size = Math.min(Math.max(intensity / 8, 12), 32);
       
-      // Create lightning bolt icon marker
+      // Create lightning bolt icon marker with high visibility
       const icon = L.divIcon({
         className: 'lightning-strike-icon',
-        html: `<div style="color: ${color}; font-size: ${size}px; text-shadow: 0 0 3px rgba(255,215,0,0.5); transition: all 0.3s;">⚡</div>`,
+        html: `<div style="
+          background-color: ${color}; 
+          color: white; 
+          width: ${size}px; 
+          height: ${size}px; 
+          border-radius: 50%; 
+          display: flex; 
+          align-items: center; 
+          justify-content: center;
+          font-size: ${size * 0.7}px;
+          font-weight: bold;
+          border: 2px solid white;
+          box-shadow: 0 2px 8px rgba(0,0,0,0.5);
+        ">⚡</div>`,
         iconSize: [size, size],
         iconAnchor: [size/2, size/2]
       });