From ab4288d328e1af25ac74561f80b7d2f56d7f1601 Mon Sep 17 00:00:00 2001
From: Claude Dev <claude-dev@aegis-sight.de>
Date: Fri, 27 Mar 2026 21:10:41 +0100
Subject: [PATCH] feat: NASA Earthdata/GIBS Integration - Imagery-Switcher +
 FIRMS Layer

- imagery.js: WMTS-Support fuer NASA GIBS + 4 neue Quellen (MODIS Terra, VIIRS SNPP, GOES East/West)
- firms.js: Neuer VIIRS Thermal Anomalies Layer (375m, tagesaktuell, Braende/Industriewaerme)
- nightlights.js: NRT-Upgrade (dynamisches Datum statt hardcodiert 2024-01-01)
- index.html: Optgroups im Imagery-Select, FIRMS-Checkbox, Script-Tag
- app.js: FIRMS Toggle
- globe.css: dot-firms Farbe

Alle NASA-Daten kostenlos via GIBS WMTS, kein API-Key noetig.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 static/css/globe.css            |   1 +
 static/index.html               |  14 +--
 static/js/app.js                |   1 +
 static/js/layers/firms.js       |  38 ++++++++
 static/js/layers/nightlights.js |  19 ++--
 static/js/ui/imagery.js         | 154 ++++++++++++++++++++++++--------
 6 files changed, 173 insertions(+), 54 deletions(-)
 create mode 100644 static/js/layers/firms.js

diff --git a/static/css/globe.css b/static/css/globe.css
index 9f85d9b..601a8dd 100644
--- a/static/css/globe.css
+++ b/static/css/globe.css
@@ -790,6 +790,7 @@ html, body { height: 100%; overflow: hidden; background: var(--bg-primary); colo
 /* === GEOINT Tools === */
 .dot-nightlights { background: #ffd740; box-shadow: 0 0 4px rgba(255,215,64,0.4); }
 .dot-celltowers { background: #e040fb; }
+.dot-firms { background: #ff4400; box-shadow: 0 0 4px rgba(255,68,0,0.4); }
 
 .geoint-btn-row {
     display: flex;
diff --git a/static/index.html b/static/index.html
index ec6b66d..9111e19 100644
--- a/static/index.html
+++ b/static/index.html
@@ -146,6 +146,7 @@
             </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>
             <label class="layer-toggle">
                 <input type="checkbox" id="layer-weather" title="Regenradar weltweit (RainViewer, 5min Refresh)">
                 <span class="layer-dot dot-weather"></span>
@@ -196,17 +197,7 @@
         <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)">
-                <option value="default">Cesium Ion (Standard)</option>
-                <option value="esri">Esri World Imagery</option>
-                <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>
-                <option value="topo">OpenTopoMap</option>
-                <option value="osm">OpenStreetMap</option>
-            </select>
+<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>
@@ -278,6 +269,7 @@
     <script src="/static/js/layers/iss.js"></script>
     <script src="/static/js/layers/terminator.js"></script>
     <script src="/static/js/layers/timezones.js"></script>
+    <script src="/static/js/layers/firms.js"></script>
     <script src="/static/js/layers/weather.js"></script>
     <script src="/static/js/ui/imagery.js"></script>
     <script src="/static/js/ui/search.js"></script>
diff --git a/static/js/app.js b/static/js/app.js
index 9d8be74..4950fa8 100644
--- a/static/js/app.js
+++ b/static/js/app.js
@@ -176,6 +176,7 @@ const Globe = {
             'layer-iss': function(on) { on ? ISSLayer.start(Globe.viewer) : ISSLayer.stop(); },
             'layer-disasters': function(on) { on ? DisastersLayer.start(Globe.viewer) : DisastersLayer.stop(); },
             'layer-weather': function(on) { on ? WeatherLayer.start(Globe.viewer) : WeatherLayer.stop(); },
+            'layer-firms': function(on) { on ? FirmsLayer.start(Globe.viewer) : FirmsLayer.stop(); },
             'layer-daynight': function(on) { Globe.viewer.scene.globe.enableLighting = on; },
             'layer-terminator': function(on) { on ? TerminatorLayer.start(Globe.viewer) : TerminatorLayer.stop(); },
             'layer-timezones': function(on) { on ? TimezonesLayer.start(Globe.viewer) : TimezonesLayer.stop(); },
diff --git a/static/js/layers/firms.js b/static/js/layers/firms.js
new file mode 100644
index 0000000..f98aeaf
--- /dev/null
+++ b/static/js/layers/firms.js
@@ -0,0 +1,38 @@
+/**
+ * FIRMS Layer: NASA VIIRS Thermal Anomalies (375m).
+ * Zeigt aktive Braende, Industriewaerme und Vulkanaktivitaet als Overlay.
+ * Datenquelle: NASA GIBS WMTS (kostenlos, kein API-Key).
+ */
+const FirmsLayer = {
+    _viewer: null,
+    _layer: null,
+
+    start(viewer) {
+        if (this._layer) return;
+        this._viewer = viewer;
+        var today = new Date().toISOString().slice(0, 10);
+        this._layer = viewer.imageryLayers.addImageryProvider(
+            new Cesium.WebMapTileServiceImageryProvider({
+                url: "https://gibs.earthdata.nasa.gov/wmts/epsg4326/best/wmts.cgi",
+                layer: "VIIRS_SNPP_Thermal_Anomalies_375m_All",
+                tileMatrixSetID: "250m",
+                format: "image/png",
+                style: "default",
+                time: today,
+                tileWidth: 512,
+                tileHeight: 512,
+                tilingScheme: new Cesium.GeographicTilingScheme(),
+                tileMatrixLabels: ["0","1","2","3","4","5","6","7","8"],
+                credit: "NASA VIIRS Thermal Anomalies",
+            })
+        );
+        this._layer.alpha = 0.9;
+    },
+
+    stop() {
+        if (this._layer && this._viewer) {
+            this._viewer.imageryLayers.remove(this._layer);
+            this._layer = null;
+        }
+    },
+};
diff --git a/static/js/layers/nightlights.js b/static/js/layers/nightlights.js
index 8085dc4..bb76bb7 100644
--- a/static/js/layers/nightlights.js
+++ b/static/js/layers/nightlights.js
@@ -1,5 +1,6 @@
 /**
- * Nachtlicht-Layer: NASA VIIRS Black Marble Nighttime Lights.
+ * Nachtlicht-Layer: NASA VIIRS Black Marble Nighttime Lights (NRT).
+ * Verwendet tagesaktuelle Daten statt statischem Datum.
  */
 const NightlightsLayer = {
     _viewer: null,
@@ -8,20 +9,22 @@ const NightlightsLayer = {
     start: function(viewer) {
         if (this._layer) return;
         this._viewer = viewer;
+        // NRT-Daten brauchen ~12-24h Processing, daher Datum von gestern
+        var yesterday = new Date(Date.now() - 86400000).toISOString().slice(0, 10);
         this._layer = viewer.imageryLayers.addImageryProvider(
             new Cesium.WebMapTileServiceImageryProvider({
-                url: 'https://gibs.earthdata.nasa.gov/wmts/epsg4326/best/VIIRS_Black_Marble/default/2024-01-01/500m/{TileMatrix}/{TileRow}/{TileCol}.png',
-                layer: 'VIIRS_Black_Marble',
-                style: 'default',
-                tileMatrixSetID: '500m',
+                url: "https://gibs.earthdata.nasa.gov/wmts/epsg4326/best/VIIRS_Black_Marble/default/" + yesterday + "/500m/{TileMatrix}/{TileRow}/{TileCol}.png",
+                layer: "VIIRS_Black_Marble",
+                style: "default",
+                tileMatrixSetID: "500m",
                 tileMatrixLabels: [
-                    '0', '1', '2', '3', '4', '5', '6', '7', '8',
+                    "0", "1", "2", "3", "4", "5", "6", "7", "8",
                 ],
-                format: 'image/png',
+                format: "image/png",
                 tilingScheme: new Cesium.GeographicTilingScheme(),
                 tileWidth: 512,
                 tileHeight: 512,
-                credit: 'NASA VIIRS Black Marble',
+                credit: "NASA VIIRS Black Marble (NRT)",
             })
         );
         this._layer.alpha = 0.85;
diff --git a/static/js/ui/imagery.js b/static/js/ui/imagery.js
index 54a07d2..26a0057 100644
--- a/static/js/ui/imagery.js
+++ b/static/js/ui/imagery.js
@@ -1,44 +1,89 @@
 /**
  * Imagery Switcher: Verschiedene Satellitenbilder + historische Aufnahmen.
+ * Unterstuetzt URL-Template (Esri, Sentinel, OSM) und WMTS (NASA GIBS).
  */
 const ImagerySwitch = {
     _viewer: null,
     _currentLayer: null,
-    _currentId: 'default',
+    _currentId: "default",
 
     _sources: {
-        'default': { name: 'Cesium Ion (Standard)', url: null },
-        'esri': {
-            name: 'Esri World Imagery',
-            url: 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
+        "default": { name: "Cesium Ion (Standard)", url: null },
+        "esri": {
+            name: "Esri World Imagery",
+            url: "https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}",
         },
-        's2-2024': {
-            name: 'Sentinel-2 (2024)',
-            url: 'https://tiles.maps.eox.at/wmts/1.0.0/s2cloudless-2024_3857/default/GoogleMapsCompatible/{z}/{x}/{y}.jpg',
+        "nasa-modis": {
+            name: "NASA MODIS Terra (Heute)",
+            wmts: {
+                url: "https://gibs.earthdata.nasa.gov/wmts/epsg4326/best/wmts.cgi",
+                layer: "MODIS_Terra_CorrectedReflectance_TrueColor",
+                tileMatrixSetID: "250m",
+                format: "image/jpeg",
+                time: "today",
+                maxLevel: 8,
+            },
         },
-        's2-2023': {
-            name: 'Sentinel-2 (2023)',
-            url: 'https://tiles.maps.eox.at/wmts/1.0.0/s2cloudless-2023_3857/default/GoogleMapsCompatible/{z}/{x}/{y}.jpg',
+        "nasa-viirs": {
+            name: "NASA VIIRS SNPP (Heute)",
+            wmts: {
+                url: "https://gibs.earthdata.nasa.gov/wmts/epsg4326/best/wmts.cgi",
+                layer: "VIIRS_SNPP_CorrectedReflectance_TrueColor",
+                tileMatrixSetID: "250m",
+                format: "image/jpeg",
+                time: "today",
+                maxLevel: 8,
+            },
         },
-        's2-2022': {
-            name: 'Sentinel-2 (2022)',
-            url: 'https://tiles.maps.eox.at/wmts/1.0.0/s2cloudless-2022_3857/default/GoogleMapsCompatible/{z}/{x}/{y}.jpg',
+        "nasa-goes-east": {
+            name: "NASA GOES East (Live)",
+            wmts: {
+                url: "https://gibs.earthdata.nasa.gov/wmts/epsg4326/best/wmts.cgi",
+                layer: "GOES-East_ABI_GeoColor",
+                tileMatrixSetID: "2km",
+                format: "image/jpeg",
+                time: null,
+                maxLevel: 5,
+            },
         },
-        's2-2020': {
-            name: 'Sentinel-2 (2020)',
-            url: 'https://tiles.maps.eox.at/wmts/1.0.0/s2cloudless-2020_3857/default/GoogleMapsCompatible/{z}/{x}/{y}.jpg',
+        "nasa-goes-west": {
+            name: "NASA GOES West (Live)",
+            wmts: {
+                url: "https://gibs.earthdata.nasa.gov/wmts/epsg4326/best/wmts.cgi",
+                layer: "GOES-West_ABI_GeoColor",
+                tileMatrixSetID: "2km",
+                format: "image/jpeg",
+                time: null,
+                maxLevel: 5,
+            },
         },
-        's2-2018': {
-            name: 'Sentinel-2 (2018)',
-            url: 'https://tiles.maps.eox.at/wmts/1.0.0/s2cloudless-2018_3857/default/GoogleMapsCompatible/{z}/{x}/{y}.jpg',
+        "s2-2024": {
+            name: "Sentinel-2 (2024)",
+            url: "https://tiles.maps.eox.at/wmts/1.0.0/s2cloudless-2024_3857/default/GoogleMapsCompatible/{z}/{x}/{y}.jpg",
         },
-        'topo': {
-            name: 'OpenTopoMap',
-            url: 'https://tile.opentopomap.org/{z}/{x}/{y}.png',
+        "s2-2023": {
+            name: "Sentinel-2 (2023)",
+            url: "https://tiles.maps.eox.at/wmts/1.0.0/s2cloudless-2023_3857/default/GoogleMapsCompatible/{z}/{x}/{y}.jpg",
         },
-        'osm': {
-            name: 'OpenStreetMap',
-            url: 'https://a.tile.openstreetmap.org/{z}/{x}/{y}.png',
+        "s2-2022": {
+            name: "Sentinel-2 (2022)",
+            url: "https://tiles.maps.eox.at/wmts/1.0.0/s2cloudless-2022_3857/default/GoogleMapsCompatible/{z}/{x}/{y}.jpg",
+        },
+        "s2-2020": {
+            name: "Sentinel-2 (2020)",
+            url: "https://tiles.maps.eox.at/wmts/1.0.0/s2cloudless-2020_3857/default/GoogleMapsCompatible/{z}/{x}/{y}.jpg",
+        },
+        "s2-2018": {
+            name: "Sentinel-2 (2018)",
+            url: "https://tiles.maps.eox.at/wmts/1.0.0/s2cloudless-2018_3857/default/GoogleMapsCompatible/{z}/{x}/{y}.jpg",
+        },
+        "topo": {
+            name: "OpenTopoMap",
+            url: "https://tile.opentopomap.org/{z}/{x}/{y}.png",
+        },
+        "osm": {
+            name: "OpenStreetMap",
+            url: "https://a.tile.openstreetmap.org/{z}/{x}/{y}.png",
         },
     },
 
@@ -46,22 +91,64 @@ const ImagerySwitch = {
         this._viewer = viewer;
     },
 
+    _getGibsLabels(maxLevel) {
+        var labels = [];
+        for (var i = 0; i <= maxLevel; i++) labels.push(String(i));
+        return labels;
+    },
+
     switchTo(id) {
         if (!this._viewer || this._currentId === id) return;
         var src = this._sources[id];
         if (!src) return;
 
-        // Alle eigenen Imagery-Layer entfernen (nicht den Cesium-Default und nicht Labels)
+        // Alten Layer entfernen
         if (this._currentLayer) {
             this._viewer.imageryLayers.remove(this._currentLayer);
             this._currentLayer = null;
         }
 
-        if (id === 'default') {
-            // Cesium Ion Default wiederherstellen — nichts tun, der ist immer da
+        if (id === "default") {
+            this._currentId = id;
+        } else if (src.wmts) {
+            // NASA GIBS WMTS Provider
+            var w = src.wmts;
+            var opts = {
+                url: w.url,
+                layer: w.layer,
+                tileMatrixSetID: w.tileMatrixSetID,
+                format: w.format,
+                style: "default",
+                tileWidth: 512,
+                tileHeight: 512,
+                tilingScheme: new Cesium.GeographicTilingScheme(),
+                tileMatrixLabels: this._getGibsLabels(w.maxLevel),
+                credit: "NASA GIBS",
+            };
+            if (w.time === "today") {
+                opts.times = new Cesium.TimeIntervalCollection([
+                    new Cesium.TimeInterval({
+                        start: Cesium.JulianDate.fromIso8601(new Date().toISOString().slice(0, 10)),
+                        stop: Cesium.JulianDate.fromIso8601("9999-12-31"),
+                    }),
+                ]);
+                opts.clock = this._viewer.clock;
+            } else if (w.time) {
+                opts.times = new Cesium.TimeIntervalCollection([
+                    new Cesium.TimeInterval({
+                        start: Cesium.JulianDate.fromIso8601(w.time),
+                        stop: Cesium.JulianDate.fromIso8601("9999-12-31"),
+                    }),
+                ]);
+                opts.clock = this._viewer.clock;
+            }
+            this._currentLayer = this._viewer.imageryLayers.addImageryProvider(
+                new Cesium.WebMapTileServiceImageryProvider(opts)
+            );
+            this._viewer.imageryLayers.lower(this._currentLayer);
             this._currentId = id;
         } else {
-            // Neuen Layer als untersten hinzufuegen (ueber dem Default)
+            // URL Template Provider (Esri, Sentinel, OSM)
             this._currentLayer = this._viewer.imageryLayers.addImageryProvider(
                 new Cesium.UrlTemplateImageryProvider({
                     url: src.url,
@@ -69,17 +156,14 @@ const ImagerySwitch = {
                     credit: src.name,
                 })
             );
-            // Unter Labels aber ueber Default
             this._viewer.imageryLayers.lower(this._currentLayer);
             this._currentId = id;
         }
 
         // Dropdown aktualisieren
-        var sel = document.getElementById('imagery-select');
+        var sel = document.getElementById("imagery-select");
         if (sel) sel.value = id;
-
-        // Status
-        var label = document.getElementById('imagery-label');
+        var label = document.getElementById("imagery-label");
         if (label) label.textContent = src.name;
     },
 };