@ -274,24 +274,45 @@ export function useLayer({ enabled = false, opacity = 0.9, map = null }) {
div . innerHTML = `
< div style = "background: rgba(0, 0, 0, 0.8); color: white; padding: 10px; border-radius: 8px; font-family: 'JetBrains Mono', monospace; font-size: 11px; min-width: 180px;" >
< div style = "font-weight: bold; font-size: 14px; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; ">
< div style = "font-weight: bold; font-size: 14px; margin-bottom: 8px; display: flex; align-items: center; justify-content: space-between; cursor: pointer;" class = "lightning-stats-header ">
< span > ⚡ Lightning Activity < / s p a n >
< span class = "lightning-stats-toggle" style = "font-size: 12px; cursor: pointer; user-select: none;" > ▼ < / s p a n >
< / d i v >
< table style = "width: 100%; font-size: 11px;" >
< tr > < td > Fresh ( & lt ; 1 min ) : < / t d > < t d s t y l e = " t e x t - a l i g n : r i g h t ; c o l o r : # F F D 7 0 0 ; " > $ { f r e s h } < / t d > < / t r >
< tr > < td > Recent ( & lt ; 5 min ) : < / t d > < t d s t y l e = " t e x t - a l i g n : r i g h t ; c o l o r : # F F A 5 0 0 ; " > $ { r e c e n t } < / t d > < / t r >
< tr > < td > Total ( 30 min ) : < / t d > < t d s t y l e = " t e x t - a l i g n : r i g h t ; c o l o r : # F F 6 B 6 B ; " > $ { t o t a l } < / t d > < / t r >
< tr > < td colspan = "2" style = "padding-top: 8px; border-top: 1px solid #444;" > < / t d > < / t r >
< tr > < td > Avg Intensity : < / t d > < t d s t y l e = " t e x t - a l i g n : r i g h t ; " > $ { a v g I n t e n s i t y . t o F i x e d ( 1 ) } k A < / t d > < / t r >
< tr > < td > Positive : < / t d > < t d s t y l e = " t e x t - a l i g n : r i g h t ; c o l o r : # F F D 7 0 0 ; " > + $ { p o s i t i v e S t r i k e s } < / t d > < / t r >
< tr > < td > Negative : < / t d > < t d s t y l e = " t e x t - a l i g n : r i g h t ; c o l o r : # 8 7 C E E B ; " > - $ { n e g a t i v e S t r i k e s } < / t d > < / t r >
< / t a b l e >
< div style = "margin-top: 8px; padding-top: 8px; border-top: 1px solid #444; font-size: 9px; color: #aaa; text-align: center;" >
Updates every 30 s
< div class = "lightning-stats-content" >
< table style = "width: 100%; font-size: 11px;" >
< tr > < td > Fresh ( & lt ; 1 min ) : < / t d > < t d s t y l e = " t e x t - a l i g n : r i g h t ; c o l o r : # F F D 7 0 0 ; " > $ { f r e s h } < / t d > < / t r >
< tr > < td > Recent ( & lt ; 5 min ) : < / t d > < t d s t y l e = " t e x t - a l i g n : r i g h t ; c o l o r : # F F A 5 0 0 ; " > $ { r e c e n t } < / t d > < / t r >
< tr > < td > Total ( 30 min ) : < / t d > < t d s t y l e = " t e x t - a l i g n : r i g h t ; c o l o r : # F F 6 B 6 B ; " > $ { t o t a l } < / t d > < / t r >
< tr > < td colspan = "2" style = "padding-top: 8px; border-top: 1px solid #444;" > < / t d > < / t r >
< tr > < td > Avg Intensity : < / t d > < t d s t y l e = " t e x t - a l i g n : r i g h t ; " > $ { a v g I n t e n s i t y . t o F i x e d ( 1 ) } k A < / t d > < / t r >
< tr > < td > Positive : < / t d > < t d s t y l e = " t e x t - a l i g n : r i g h t ; c o l o r : # F F D 7 0 0 ; " > + $ { p o s i t i v e S t r i k e s } < / t d > < / t r >
< tr > < td > Negative : < / t d > < t d s t y l e = " t e x t - a l i g n : r i g h t ; c o l o r : # 8 7 C E E B ; " > - $ { n e g a t i v e S t r i k e s } < / t d > < / t r >
< / t a b l e >
< div style = "margin-top: 8px; padding-top: 8px; border-top: 1px solid #444; font-size: 9px; color: #aaa; text-align: center;" >
Updates every 30 s
< / d i v >
< / d i v >
< / d i v >
` ;
// 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 ) ;