AegisSight/AegisSight-Globe
2
0
Fork 0
Code Issues Pull-Requests Actions Pakete Projekte Releases Wiki Aktivität

refactor: Layer-Panel mit einklappbaren Kategorien + ANSICHT in Bottom Bar

Quellcode durchsuchen 
- 5 einklappbare Gruppen: ECHTZEIT, INTELLIGENCE, GEOINT, INFRASTRUKTUR, UMGEBUNG
- Jede Gruppe zeigt Aktiv-Zaehler (z.B. 2/3)
- Klick auf Header klappt Gruppe auf/zu (Chevron-Indikator)
- ANSICHT (STD/NVG/FLIR/CRT) in Bottom Bar verschoben
- SATELLITENBILDER-Dropdown an Panel-Oberkante (immer sichtbar)
- Fadenkreuz + Ortsnamen immer sichtbar (nicht in Gruppe)
- Reduziert sichtbare Zeilen von ~35 auf ~18

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Dieser Commit ist enthalten in:
Claude Dev
2026-03-27 21:26:28 +01:00
Ursprung a0a8909c28
Commit bc5fdd18df
4 geänderte Dateien mit 248 neuen und 144 gelöschten Zeilen
Patch-Datei herunterladen Vergleichs-Datei herunterladen Alle Dateien ausklappen Alle Dateien einklappen

34
static/css/globe.css
Datei anzeigen

@@ -888,3 +888,37 @@ html, body { height: 100%; overflow: hidden; background: var(--bg-primary); colo
border-radius: 4px;
margin-bottom: 8px;
}
/* === Layer-Gruppen (einklappbar) === */
.layer-group { border-bottom: 1px solid rgba(255,255,255,0.04); }
.layer-group-header {
display: flex; align-items: center; gap: 6px;
padding: 7px 8px; cursor: pointer; transition: background 0.15s;
font-size: 10px; letter-spacing: 1.5px; font-weight: 700;
user-select: none;
}
.layer-group-header:hover { background: rgba(255,255,255,0.04); }
.layer-group-chevron {
font-size: 10px; color: var(--text-dim); width: 12px;
display: inline-block; text-align: center;
}
.layer-group-title { flex: 1; text-transform: uppercase; }
.layer-group-count {
font-size: 10px; color: var(--text-dim); font-weight: 400; font-family: var(--font-mono);
}
.layer-group-content {
display: none; padding: 0 0 4px; flex-direction: column; gap: 2px;
}
.layer-group.open .layer-group-content { display: flex; }
/* === Bottom Bar: Visual Mode Buttons === */
#bottom-bar { justify-content: space-between; padding: 0 12px; }
.bottom-vmodes { display: flex; gap: 3px; align-items: center; }
.vmode-btn-sm {
padding: 3px 8px; font-family: var(--font-mono); font-size: 10px;
font-weight: 700; letter-spacing: 0.5px;
background: rgba(255,255,255,0.05); border: 1px solid var(--border);
border-radius: 3px; color: var(--text-dim); cursor: pointer; transition: all 0.2s;
}
.vmode-btn-sm:hover { border-color: var(--accent); color: var(--text); }
.vmode-btn-sm.active { background: rgba(0,255,136,0.15); border-color: var(--accent); color: var(--accent); }

234
static/index.html
Datei anzeigen

@@ -51,12 +51,49 @@
<!-- Layer Panel -->
<aside id="layer-panel" class="layer-panel">
<h3 class="panel-title">LAYER</h3>
<div class="panel-section">
<!-- Satellitenbilder: immer sichtbar -->
<div class="panel-section">
<div style="font-size:9px;letter-spacing:1.5px;color:var(--accent);margin-bottom:4px">SATELLITENBILDER</div>
<select id="imagery-select" class="imagery-select" onchange="ImagerySwitch.switchTo(this.value)">
<optgroup label="Standard">
<option value="default">Cesium Ion (Standard)</option>
<option value="esri">Esri World Imagery</option>
</optgroup>
<optgroup label="NASA Earthdata (tagesaktuell)">
<option value="nasa-modis">MODIS Terra (Heute)</option>
<option value="nasa-viirs">VIIRS SNPP (Heute)</option>
<option value="nasa-goes-east">GOES East (Live)</option>
<option value="nasa-goes-west">GOES West (Live)</option>
</optgroup>
<optgroup label="Sentinel-2 (historisch)">
<option value="s2-2024">Sentinel-2 (2024)</option>
<option value="s2-2023">Sentinel-2 (2023)</option>
<option value="s2-2022">Sentinel-2 (2022)</option>
<option value="s2-2020">Sentinel-2 (2020)</option>
<option value="s2-2018">Sentinel-2 (2018)</option>
</optgroup>
<optgroup label="Karten">
<option value="topo">OpenTopoMap</option>
<option value="osm">OpenStreetMap</option>
</optgroup>
</select>
<div id="imagery-label" style="font-size:9px;color:var(--text-dim);margin-top:2px;">Cesium Ion (Standard)</div>
</div>
<div class="panel-divider"></div>
<!-- Gruppe: ECHTZEIT -->
<div class="layer-group open" id="group-realtime">
<div class="layer-group-header" data-group="group-realtime">
<span class="layer-group-chevron">&#9662;</span>
<span class="layer-group-title" style="color:var(--accent)">ECHTZEIT</span>
<span class="layer-group-count" id="gcount-realtime">0/3</span>
</div>
<div class="layer-group-content">
<label class="layer-toggle">
<input type="checkbox" id="layer-flights" title="Echtzeit-Flugverkehr weltweit (OpenSky Network, ~7.000 Flugzeuge, 15s Refresh)">
<input type="checkbox" id="layer-flights" title="Echtzeit-Flugverkehr weltweit (~7.000 Flugzeuge, 15s Refresh)">
<span class="layer-dot dot-flights"></span>
<span class="layer-name" title="~7.000 Flugzeuge weltweit, Position + Hoehe + Geschwindigkeit">Flugverkehr</span>
<span class="layer-name">Flugverkehr</span>
<span class="layer-count" id="count-flights">-</span>
</label>
<div class="layer-loading" id="loading-flights"></div>
@@ -64,32 +101,98 @@
<label class="layer-toggle">
<input type="checkbox" id="layer-military" title="Militaerflugzeuge weltweit (adsb.lol, ~300 Flugzeuge, 20s Refresh)">
<span class="layer-dot dot-military"></span>
<span class="layer-name" title="Militaertransporter, Tanker, Aufklaerer, Kampfjets">Militaerflug</span>
<span class="layer-name">Militaerflug</span>
<span class="layer-count" id="count-military">-</span>
</label>
<div class="layer-status" id="status-military"></div>
<label class="layer-toggle">
<input type="checkbox" id="layer-ships" title="Echtzeit-Schiffsverkehr weltweit (AISStream AIS-Daten, kontinuierlich)">
<input type="checkbox" id="layer-ships" title="Echtzeit-Schiffsverkehr weltweit (AISStream AIS-Daten)">
<span class="layer-dot dot-ships"></span>
<span class="layer-name" title="Tausende Schiffe global, MMSI + SOG + COG">Schiffsverkehr</span>
<span class="layer-name">Schiffsverkehr</span>
<span class="layer-count" id="count-ships">-</span>
</label>
<div class="layer-loading" id="loading-ships"></div>
<div class="layer-status" id="status-ships"></div>
<div id="ship-filters" class="ship-filters" style="display:none"></div>
</div>
</div>
<!-- Gruppe: INTELLIGENCE -->
<div class="layer-group" id="group-intel">
<div class="layer-group-header" data-group="group-intel">
<span class="layer-group-chevron">&#9656;</span>
<span class="layer-group-title" style="color:#ff8800">INTELLIGENCE</span>
<span class="layer-group-count" id="gcount-intel">0/3</span>
</div>
<div class="layer-group-content">
<label class="layer-toggle">
<input type="checkbox" id="layer-gdelt" title="Geokodierte Nachrichten der letzten 24h (GDELT Global Event Database)">
<input type="checkbox" id="layer-gdelt" title="Geokodierte Nachrichten der letzten 24h (GDELT)">
<span class="layer-dot dot-gdelt"></span>
<span class="layer-name" title="Geokodierte News-Events, thematisch zur aktuellen Weltlage">Nachrichten</span>
<span class="layer-name">Nachrichten</span>
<span class="layer-count" id="count-gdelt">-</span>
</label>
<div class="layer-loading" id="loading-gdelt"></div>
<div class="layer-status" id="status-gdelt"></div>
<label class="layer-toggle">
<input type="checkbox" id="layer-satellites" title="Satelliten-Orbits in Echtzeit (CelesTrak TLE: ISS, GPS, Galileo, Starlink)">
<input type="checkbox" id="layer-disasters" title="Naturkatastrophen + Erdbeben (NASA EONET + USGS)">
<span class="layer-dot dot-disasters"></span>
<span class="layer-name">Katastrophen</span>
<span class="layer-count" id="count-disasters">-</span>
</label>
<div class="layer-loading" id="loading-disasters"></div>
<div class="layer-status" id="status-disasters"></div>
<label class="layer-toggle">
<input type="checkbox" id="layer-firms" title="NASA VIIRS Waermeanomalien: Braende, Industriewaerme (375m)">
<span class="layer-dot dot-firms"></span>
<span class="layer-name">Feuer (VIIRS)</span>
</label>
</div>
</div>
<!-- Gruppe: GEOINT -->
<div class="layer-group" id="group-geoint">
<div class="layer-group-header" data-group="group-geoint">
<span class="layer-group-chevron">&#9656;</span>
<span class="layer-group-title" style="color:#e040fb">GEOINT</span>
<span class="layer-group-count" id="gcount-geoint">0/3</span>
</div>
<div class="layer-group-content">
<label class="layer-toggle">
<input type="checkbox" id="layer-vlm" title="VLM-Bildanalyse: Bild hochladen, Claude analysiert, Overpass sucht">
<span class="layer-dot dot-vlm"></span>
<span class="layer-name">Bildanalyse</span>
</label>
<label class="layer-toggle">
<input type="checkbox" id="layer-nightlights" title="NASA VIIRS Nachtlicht-Karte (Black Marble NRT)">
<span class="layer-dot dot-nightlights"></span>
<span class="layer-name">Nachtlichter</span>
</label>
<label class="layer-toggle">
<input type="checkbox" id="layer-celltowers" title="Mobilfunkmasten aus OpenStreetMap (zoomabhaengig)">
<span class="layer-dot dot-celltowers"></span>
<span class="layer-name">Funkmasten</span>
<span class="layer-count" id="count-celltowers">-</span>
</label>
<div class="layer-status" id="status-celltowers"></div>
<div class="geoint-btn-row">
<button class="geoint-tool-btn" onclick="GeointTools.showSunCalc()" title="Sonnenstand und Schattenanalyse">Sonne</button>
<button class="geoint-tool-btn" onclick="GeointTools.startElevation()" title="Hoehenprofil und Sichtlinienanalyse">Hoehe</button>
</div>
</div>
</div>
<!-- Gruppe: INFRASTRUKTUR -->
<div class="layer-group" id="group-infra">
<div class="layer-group-header" data-group="group-infra">
<span class="layer-group-chevron">&#9656;</span>
<span class="layer-group-title" style="color:#ffdd00">INFRASTRUKTUR</span>
<span class="layer-group-count" id="gcount-infra">0/4</span>
</div>
<div class="layer-group-content">
<label class="layer-toggle">
<input type="checkbox" id="layer-satellites" title="Satelliten-Orbits (CelesTrak TLE: ISS, GPS, Galileo, Starlink)">
<span class="layer-dot dot-satellites"></span>
<span class="layer-name" title="ISS (rot), GPS (orange), Galileo (blau), Starlink (grau)">Satelliten</span>
<span class="layer-name">Satelliten</span>
<span class="layer-count" id="count-satellites">-</span>
</label>
<div class="layer-loading" id="loading-satellites"></div>
@@ -97,125 +200,86 @@
<label class="layer-toggle">
<input type="checkbox" id="layer-cables" title="Untersee-Glasfaserkabel weltweit (TeleGeography)">
<span class="layer-dot dot-cables"></span>
<span class="layer-name" title="Internationale Seekabel-Infrastruktur">Seekabel</span>
<span class="layer-name">Seekabel</span>
<span class="layer-count" id="count-cables">-</span>
</label>
<div class="layer-status" id="status-cables"></div>
<label class="layer-toggle">
<input type="checkbox" id="layer-infra" title="Kernkraftwerke + Militaerflughaefen (OpenStreetMap)">
<span class="layer-dot dot-infra"></span>
<span class="layer-name" title="Atomkraftwerke (gelb) + Militaerbasen (rot)">Infrastruktur</span>
<span class="layer-name">AKWs / Basen</span>
<span class="layer-count" id="count-infra">-</span>
</label>
<div class="layer-status" id="status-infra"></div>
<label class="layer-toggle">
<input type="checkbox" id="layer-vlm" title="VLM-Bildanalyse: Bild hochladen, Claude analysiert, Overpass sucht passende Orte">
<span class="layer-dot dot-vlm"></span>
<span class="layer-name" title="Satellitenbild-Analyse mit Claude VLM">Bildanalyse</span>
<span class="layer-count" id="count-vlm">-</span>
</label>
<div class="panel-divider"></div>
<div style="font-size:9px;letter-spacing:1.5px;color:#e040fb;margin-bottom:4px">GEOINT TOOLS</div>
<label class="layer-toggle">
<input type="checkbox" id="layer-nightlights" title="NASA VIIRS Nachtlicht-Karte (Black Marble)">
<span class="layer-dot dot-nightlights"></span>
<span class="layer-name" title="Globale Nachtlicht-Aktivitaet (Besiedlung, Stromausfaelle)">Nachtlichter</span>
</label>
<label class="layer-toggle">
<input type="checkbox" id="layer-celltowers" title="Mobilfunkmasten aus OpenStreetMap (zoomabhaengig)">
<span class="layer-dot dot-celltowers"></span>
<span class="layer-name" title="Sendemasten und Mobilfunkinfrastruktur">Funkmasten</span>
<span class="layer-count" id="count-celltowers">-</span>
</label>
<div class="layer-status" id="status-celltowers"></div>
<div class="geoint-btn-row">
<button class="geoint-tool-btn" onclick="GeointTools.showSunCalc()" title="Sonnenstand und Schattenanalyse berechnen">Sonne</button>
<button class="geoint-tool-btn" onclick="GeointTools.startElevation()" title="Hoehenprofil und Sichtlinienanalyse zwischen zwei Punkten">Hoehe</button>
</div>
<div class="panel-divider"></div>
<label class="layer-toggle">
<input type="checkbox" id="layer-iss" title="ISS Echtzeit-Position (5s Refresh)">
<span class="layer-dot dot-iss"></span>
<span class="layer-name" title="International Space Station, ~420km Hoehe">ISS Tracker</span>
<span class="layer-name">ISS Tracker</span>
</label>
<label class="layer-toggle">
<input type="checkbox" id="layer-disasters" title="Naturkatastrophen + Erdbeben (NASA EONET + USGS: Waldbraende, Vulkane, Stuerme, Erdbeben M2.5+)">
<span class="layer-dot dot-disasters"></span>
<span class="layer-name" title="Waldbraende, Vulkane, Stuerme, Erdbeben, Fluten, Erdrutsche">Katastrophen</span>
<span class="layer-count" id="count-disasters">-</span>
</label>
<div class="layer-loading" id="loading-disasters"></div>
<div class="layer-status" id="status-disasters"></div>
<label class="layer-toggle"> <input type="checkbox" id="layer-firms" title="NASA VIIRS Waermeanomalien: Aktive Braende, Industriewaerme, Vulkane (tagesaktuell, 375m)"> <span class="layer-dot dot-firms"></span> <span class="layer-name" title="Thermische Hotspots weltweit via NASA VIIRS Satellit">Feuer (VIIRS)</span> </label>
</div>
</div>
<!-- Gruppe: UMGEBUNG -->
<div class="layer-group" id="group-environ">
<div class="layer-group-header" data-group="group-environ">
<span class="layer-group-chevron">&#9656;</span>
<span class="layer-group-title" style="color:#44bbff">UMGEBUNG</span>
<span class="layer-group-count" id="gcount-environ">0/4</span>
</div>
<div class="layer-group-content">
<label class="layer-toggle">
<input type="checkbox" id="layer-weather" title="Regenradar weltweit (RainViewer, 5min Refresh)">
<span class="layer-dot dot-weather"></span>
<span class="layer-name" title="Niederschlagsradar als Overlay auf dem Globus">Regenradar</span>
<span class="layer-name">Regenradar</span>
</label>
<div class="layer-status" id="status-weather"></div>
</div>
<div class="panel-divider"></div>
<div class="panel-section">
<label class="layer-toggle">
<input type="checkbox" id="layer-daynight" title="Tag/Nacht-Beleuchtung basierend auf aktueller Sonnenposition">
<input type="checkbox" id="layer-daynight" title="Tag/Nacht-Beleuchtung basierend auf Sonnenposition">
<span class="layer-dot dot-daynight"></span>
<span class="layer-name" title="Sonnenlicht-Simulation zeigt aktuelle Tages-/Nachtseite">Tag/Nacht</span>
<span class="layer-name">Tag/Nacht</span>
</label>
<label class="layer-toggle">
<input type="checkbox" id="layer-terminator" title="Echtzeit Tag/Nacht-Grenze als orange Linie + Nachtschatten">
<input type="checkbox" id="layer-terminator" title="Echtzeit Tag/Nacht-Grenze + Nachtschatten">
<span class="layer-dot dot-terminator"></span>
<span class="layer-name" title="Sonnenterminatur: Grenze zwischen Tag und Nacht">Terminatur</span>
<span class="layer-name">Terminatur</span>
</label>
<label class="layer-toggle">
<input type="checkbox" id="layer-timezones" title="24 Zeitzonen-Linien mit aktueller Uhrzeit">
<span class="layer-dot dot-timezones"></span>
<span class="layer-name" title="UTC-Zonen als vertikale Linien mit Uhrzeiten">Zeitzonen</span>
<span class="layer-name">Zeitzonen</span>
</label>
</div>
</div>
<div class="panel-divider"></div>
<!-- Immer sichtbar -->
<div class="panel-section">
<label class="layer-toggle">
<input type="checkbox" id="layer-crosshairs" title="Fadenkreuz und Entfernungsringe">
<span class="layer-dot dot-crosshairs"></span>
<span class="layer-name">Fadenkreuz</span>
</label>
<label class="layer-toggle">
<input type="checkbox" id="layer-labels" title="Laendergrenzen, Staedte und Gewaessernamen (Esri World Boundaries)" checked>
<input type="checkbox" id="layer-labels" title="Laendergrenzen, Staedte und Gewaessernamen (Esri)" checked>
<span class="layer-dot dot-labels"></span>
<span class="layer-name" title="Laendergrenzen, Hauptstaedte, Fluesse, Meere">Ortsnamen</span>
<span class="layer-name">Ortsnamen</span>
</label>
</div>
<div class="panel-divider"></div>
<div class="panel-divider"></div>
<div class="panel-section">
<div style="font-size:9px;letter-spacing:1.5px;color:var(--accent);margin-bottom:6px;">ANSICHT</div>
<div style="display:flex;gap:4px;flex-wrap:wrap;">
<button class="vmode-btn active" data-mode="standard" title="Standard: Photorealistische Darstellung" onclick="VisualModes.set('standard')">STD</button>
<button class="vmode-btn" data-mode="nvg" title="Night Vision: Gruener Monochrom-Filter (Nachtsichtgeraet)" onclick="VisualModes.set('nvg')">NVG</button>
<button class="vmode-btn" data-mode="flir" title="FLIR Thermal: Infrarot-Darstellung fuer Waermesignaturen" onclick="VisualModes.set('flir')">FLIR</button>
<button class="vmode-btn" data-mode="crt" title="CRT Monitor: Retro-Ueberwachungsbildschirm mit Scanlines" onclick="VisualModes.set('crt')">CRT</button>
</div>
</div>
<div class="panel-divider"></div>
<div class="panel-divider"></div>
<div class="panel-section">
<div style="font-size:9px;letter-spacing:1.5px;color:var(--accent);margin-bottom:6px;">SATELLITENBILDER</div>
<select id="imagery-select" class="imagery-select" onchange="ImagerySwitch.switchTo(this.value)"> <optgroup label="Standard"> <option value="default">Cesium Ion (Standard)</option> <option value="esri">Esri World Imagery</option> </optgroup> <optgroup label="NASA Earthdata (tagesaktuell)"> <option value="nasa-modis">MODIS Terra (Heute)</option> <option value="nasa-viirs">VIIRS SNPP (Heute)</option> <option value="nasa-goes-east">GOES East (Live)</option> <option value="nasa-goes-west">GOES West (Live)</option> </optgroup> <optgroup label="Sentinel-2 (historisch)"> <option value="s2-2024">Sentinel-2 (2024)</option> <option value="s2-2023">Sentinel-2 (2023)</option> <option value="s2-2022">Sentinel-2 (2022)</option> <option value="s2-2020">Sentinel-2 (2020)</option> <option value="s2-2018">Sentinel-2 (2018)</option> </optgroup> <optgroup label="Karten"> <option value="topo">OpenTopoMap</option> <option value="osm">OpenStreetMap</option> </optgroup> </select>
<div id="imagery-label" style="font-size:9px;color:var(--text-dim);margin-top:2px;">Cesium Ion (Standard)</div>
</div>
<div class="panel-divider"></div>
<div class="panel-coords" id="coords-display">
LAT: --&nbsp;&nbsp;LON: --
</div>
</aside>
<!-- City Quick-Links -->
<div id="city-links" class="city-links"></div>
<!-- Rechte Sidebar: Datenpunkt-Uebersicht -->
<!-- VLM Bildanalyse Panel -->
<div id="vlm-panel" class="vlm-panel-right" style="display:none"></div>
<!-- GEOINT Tools Panel -->
<div id="geoint-panel" class="geoint-panel" style="display:none"></div>
<!-- Rechte Sidebar -->
<aside id="sidebar-right" class="sidebar-right">
<button id="sidebar-toggle" class="sidebar-toggle" title="Seitenleiste ein-/ausblenden">
<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>
@@ -241,11 +305,15 @@
</div>
<div id="visual-overlay" class="visual-overlay" style="display:none"></div>
<!-- Bottom Bar -->
<!-- Bottom Bar mit Visual Modes -->
<footer id="bottom-bar">
<div class="bottom-stats" id="bottom-stats">
Initialisiere...
<div class="bottom-vmodes">
<button class="vmode-btn-sm active" data-mode="standard" title="Standard" onclick="VisualModes.set('standard')">STD</button>
<button class="vmode-btn-sm" data-mode="nvg" title="Night Vision" onclick="VisualModes.set('nvg')">NVG</button>
<button class="vmode-btn-sm" data-mode="flir" title="FLIR Thermal" onclick="VisualModes.set('flir')">FLIR</button>
<button class="vmode-btn-sm" data-mode="crt" title="CRT Monitor" onclick="VisualModes.set('crt')">CRT</button>
</div>
<div class="bottom-stats" id="bottom-stats">Initialisiere...</div>
</footer>
<!-- Scripts -->
@@ -261,7 +329,7 @@
<script src="/static/js/layers/military.js"></script>
<script src="/static/js/layers/cables.js"></script>
<script src="/static/js/layers/infra.js"></script>
<script src="/static/js/layers/overpass.js"></script>
<script src="/static/js/layers/overpass.js"></script>
<script src="/static/js/ui/vlm.js"></script>
<script src="/static/js/layers/nightlights.js"></script>
<script src="/static/js/layers/celltowers.js"></script>

2
static/js/app.js
Datei anzeigen

@@ -88,6 +88,7 @@ const Globe = {
if (typeof SearchUI !== 'undefined') SearchUI.init();
this._loadLagen();
document.getElementById('bottom-stats').textContent = 'Globe initialisiert — Lade Daten...';
// Gruppen auf-/zuklappen document.querySelectorAll(".layer-group-header").forEach(function(header) { header.addEventListener("click", function() { var group = document.getElementById(this.dataset.group); group.classList.toggle("open"); var chevron = this.querySelector(".layer-group-chevron"); chevron.innerHTML = group.classList.contains("open") ? "&#9662;" : "&#9656;"; }); });
},
_toggleLabels(on) {
@@ -222,6 +223,7 @@ const Globe = {
document.getElementById('bottom-stats').textContent = parts.join(' | ');
}
},
// Gruppen-Zaehler aktualisieren var groups = { "gcount-realtime": ["layer-flights","layer-military","layer-ships"], "gcount-intel": ["layer-gdelt","layer-disasters","layer-firms"], "gcount-geoint": ["layer-vlm","layer-nightlights","layer-celltowers"], "gcount-infra": ["layer-satellites","layer-cables","layer-infra","layer-iss"], "gcount-environ": ["layer-weather","layer-daynight","layer-terminator","layer-timezones"], }; Object.keys(groups).forEach(function(countId) { var ids = groups[countId]; var active = ids.filter(function(id) { var cb = document.getElementById(id); return cb && cb.checked; }).length; var el = document.getElementById(countId); if (el) el.textContent = active + "/" + ids.length; });
};
document.addEventListener('DOMContentLoaded', function() { Globe.init(); });

2
static/js/layers/visualmodes.js
Datei anzeigen

@@ -34,7 +34,7 @@ const VisualModes = {
}
// Button-States aktualisieren
document.querySelectorAll('.vmode-btn').forEach(function(btn) {
document.querySelectorAll('.vmode-btn, .vmode-btn-sm').forEach(function(btn) {
btn.classList.toggle('active', btn.dataset.mode === mode);
});
},