From 25c58ea0aa8a4a3c083ccc80874e11b4b9064883 Mon Sep 17 00:00:00 2001
From: trancen <genspark_dev@genspark.ai>
Date: Tue, 3 Feb 2026 18:58:10 +0000
Subject: [PATCH] feat: Replace volcano emoji with custom seismic wave SVG icon

- Created custom SVG icon with epicenter burst and side waves
- Represents earthquake/seismic activity visually
- White SVG on colored circle background
- More professional and recognizable than emoji
- Matches the lightning bolt style
---
 src/plugins/layers/useEarthquakes.js | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/plugins/layers/useEarthquakes.js b/src/plugins/layers/useEarthquakes.js
index 6837d01..c00907c 100644
--- a/src/plugins/layers/useEarthquakes.js
+++ b/src/plugins/layers/useEarthquakes.js
@@ -104,7 +104,15 @@ 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 with high visibility
+      // Create earthquake icon marker with seismic wave visualization
+      const waveIcon = `
+        <svg width="${size*0.7}" height="${size*0.7}" viewBox="0 0 24 24" style="fill: white;">
+          <path d="M12 2L8 10h3v10h2V10h3L12 2z"/>
+          <path d="M4 12l2 2 2-2-2-2-2 2z"/>
+          <path d="M20 12l-2 2-2-2 2-2 2 2z"/>
+        </svg>
+      `;
+      
       const icon = L.divIcon({
         className: 'earthquake-icon',
         html: `<div style="
@@ -116,11 +124,10 @@ export function useLayer({ enabled = false, opacity = 0.9, map = null }) {
           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>`,
+        ">${waveIcon}</div>`,
         iconSize: [size, size],
         iconAnchor: [size/2, size/2]
       });