diff --git a/src/plugins/layers/useLightning.js b/src/plugins/layers/useLightning.js index bfe81a8..1f5adbe 100644 --- a/src/plugins/layers/useLightning.js +++ b/src/plugins/layers/useLightning.js @@ -274,24 +274,45 @@ export function useLayer({ enabled = false, opacity = 0.9, map = null }) { div.innerHTML = `
-
+
⚡ Lightning Activity + ▼
- - - - - - - - -
Fresh (<1 min):${fresh}
Recent (<5 min):${recent}
Total (30 min):${total}
Avg Intensity:${avgIntensity.toFixed(1)} kA
Positive:+${positiveStrikes}
Negative:-${negativeStrikes}
-
- Updates every 30s +
+ + + + + + + + +
Fresh (<1 min):${fresh}
Recent (<5 min):${recent}
Total (30 min):${total}
Avg Intensity:${avgIntensity.toFixed(1)} kA
Positive:+${positiveStrikes}
Negative:-${negativeStrikes}
+
+ Updates every 30s +
`; + // Add minimize/maximize functionality + const header = div.querySelector('.lightning-stats-header'); + const content = div.querySelector('.lightning-stats-content'); + const toggle = div.querySelector('.lightning-stats-toggle'); + + const minimized = localStorage.getItem('lightning-stats-minimized') === 'true'; + if (minimized) { + content.style.display = 'none'; + toggle.textContent = '▶'; + } + + header.addEventListener('click', () => { + const isMinimized = content.style.display === 'none'; + content.style.display = isMinimized ? 'block' : 'none'; + toggle.textContent = isMinimized ? '▼' : '▶'; + localStorage.setItem('lightning-stats-minimized', !isMinimized); + }); + // Prevent map interaction on control L.DomEvent.disableClickPropagation(div); L.DomEvent.disableScrollPropagation(div);