Exakte Ort-Artikel-Zuordnung + Lage zentriert im Header

Monitor-Feed liefert jetzt pro Standort die vollstaendigen Artikel:
Headline, Quelle, URL, Inhalts-Auszug, Datum.
Keine globale Summary mehr, keine Proximity-Heuristik.

Klick auf Waldbrand USA -> zeigt US-Waldbrand-Artikel
Klick auf Kenia -> zeigt Kenia-Ueberschwemmungs-Artikel
Klick auf Erdbeben -> zeigt naechsten passenden Artikel

Lage-Auswahl zentriert in der Header-Leiste.

static/css/globe.css

@@ -33,7 +33,7 @@ html, body { height: 100%; overflow: hidden; background: var(--bg-primary); colo
 }
 .header-brand { display: flex; align-items: center; gap: 8px; }
 .header-title { font-size: 13px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--accent); }
-.header-stats { flex: 1; text-align: center; font-size: 11px; color: var(--text-dim); letter-spacing: 1px; }
+.header-stats { text-align: center; font-size: 11px; color: var(--text-dim); letter-spacing: 1px; }
 .header-actions { display: flex; gap: 8px; }
 .header-btn {
     background: none; border: 1px solid var(--border); border-radius: 4px;
@@ -415,7 +415,7 @@ html, body { height: 100%; overflow: hidden; background: var(--bg-primary); colo
 
 
 /* === Lage-Selector === */
-.header-lage { display: flex; align-items: center; }
+.header-lage { display: flex; align-items: center; flex: 1; justify-content: center; }
 .lage-select {
     background: rgba(255,255,255,0.05);
     border: 1px solid var(--border);

static/js/layers/disasters.js

@@ -35,75 +35,36 @@ const DisastersLayer = {
         .catch(function() {});
     },
 
-    _findMonitorInfo(lat, lon) {
+    _buildMonitorHtml(lat, lon) {
-        if (!this._monitorData) return null;
+        if (!this._monitorData) return '';
-        var selectedId = (typeof Globe !== 'undefined') ? Globe._currentLageId : null;
-        if (!selectedId) return null;
-
-        // Naechsten Monitor-Standort zur Klickposition finden
         var features = this._monitorData.features || [];
         var best = null, bestDist = 999;
         for (var i = 0; i < features.length; i++) {
-            var f = features[i];
+            var c = features[i].geometry.coordinates;
-            var c = f.geometry.coordinates;
             var d = Math.abs(c[1] - lat) + Math.abs(c[0] - lon);
-            if (d < bestDist) { bestDist = d; best = f; }
+            if (d < bestDist) { bestDist = d; best = features[i]; }
         }
+        if (!best || bestDist > 3) return '';
 
-        // Lage-Infos
+        var p = best.properties;
-        var incidents = this._monitorData.incidents || [];
+        var articles = p.articles || [];
-        var incident = null;
+        if (!articles.length) return '';
-        for (var j = 0; j < incidents.length; j++) {
-            if (incidents[j].id === selectedId) { incident = incidents[j]; break; }
-        }
-
-        if (!best || bestDist > 5) return { incident: incident, feature: null };
-        return { incident: incident, feature: best };
-    },
-
-    _buildMonitorHtml(lat, lon) {
-        var info = this._findMonitorInfo(lat, lon);
-        if (!info || !info.incident) return '';
 
         var html = '<div style="border-top:1px solid #333;padding-top:8px;margin-top:8px">';
-        html += '<div style="color:#00ff88;font-size:10px;letter-spacing:1px;margin-bottom:6px">MONITOR: ' +
+        html += '<div style="color:#00ff88;font-size:10px;letter-spacing:1px;margin-bottom:4px">MONITOR: ' +
-            (info.incident.title || 'LAGE').toUpperCase() + '</div>';
+            (p.name || '').toUpperCase() + ' (' + (p.article_count || 0) + ' Artikel)</div>';
-
+        articles.forEach(function(a) {
-        // Ortsspezifische Headlines wenn passender Standort gefunden
+            html += '<div style="border-left:2px solid #00ff88;padding-left:8px;margin-bottom:6px">';
-        if (info.feature) {
+            html += '<div style="color:#e0e0e0;font-size:11px;font-weight:700">' + (a.headline || '') + '</div>';
-            var p = info.feature.properties;
+            if (a.summary) html += '<div style="color:#bbb;font-size:10px;margin-top:2px">' + a.summary.substring(0, 200) + '</div>';
-            var headlines = p.headlines || [];
+            if (a.source) html += '<div style="color:#666;font-size:9px">' + a.source + '</div>';
-            if (headlines.length && headlines[0]) {
+            html += '</div>';
-                html += '<div style="color:#00ff88;font-size:11px;margin-bottom:4px">' + (p.name || '') +
+        });
-                    ' (' + (p.article_count || 0) + ' Artikel)</div>';
-                html += '<div style="border-left:2px solid #00ff88;padding-left:8px;margin-bottom:8px">';
-                for (var h = 0; h < Math.min(headlines.length, 3); h++) {
-                    if (headlines[h] && headlines[h].trim()) {
-                        html += '<div style="color:#e0e0e0;font-size:11px;margin-bottom:3px">&bull; ' +
-                            headlines[h].trim().substring(0, 120) + '</div>';
-                    }
-                }
-                html += '</div>';
-            }
-        } else {
-            // Kein passender Standort in der Naehe — globale Summary
-            if (info.incident.summary) {
-                var summary = info.incident.summary
-                    .replace(/##?\s*/g, '').replace(/\*\*/g, '').replace(/\[(\d+)\]/g, '')
-                    .substring(0, 400);
-                html += '<div style="color:#ccc;font-size:11px;line-height:1.5">' + summary + '</div>';
-            }
-        }
-
-        if (info.incident.updated_at) {
-            html += '<div style="color:#666;font-size:9px;margin-top:4px">Stand: ' +
-                new Date(info.incident.updated_at).toLocaleString('de-DE') + '</div>';
-        }
         html += '</div>';
         return html;
     },
 
-    _fetch() {
+        _fetch() {
         var self = this;
         var loadEl = document.getElementById('loading-disasters');
         var statusEl = document.getElementById('status-disasters');

static/js/layers/monitor.js

@@ -1,6 +1,5 @@
 /**
- * Monitor-Layer: OSINT-Daten aus dem AegisSight Monitor.
+ * Monitor-Layer: OSINT-Daten mit ortsspezifischen Artikeln.
- * Zeigt geoparsete Standorte mit Zusammenfassungen auf dem Globus.
  */
 const MonitorLayer = {
     _viewer: null,
@@ -17,15 +16,9 @@ const MonitorLayer = {
         this._viewer = viewer;
         this._points = viewer.scene.primitives.add(new Cesium.PointPrimitiveCollection());
         this._labels = viewer.scene.primitives.add(new Cesium.LabelCollection());
-        this._fetch();
         var self = this;
-        this._interval = setInterval(function() { self._fetch(); }, 120000);
-
-        // Klick-Handler
         this._handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
-        this._handler.setInputAction(function(click) {
+        this._handler.setInputAction(function(click) { self._onClick(click.position); }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
-            self._onClick(click.position);
-        }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
     },
 
     stop() {
@@ -36,90 +29,6 @@ const MonitorLayer = {
         this._count = 0; this._data = []; this._incidents = [];
     },
 
-    _onClick(position) {
-        if (!this._viewer || !this._data.length) return;
-        var cartesian = this._viewer.scene.pickPosition(position);
-        if (!cartesian) {
-            var ray = this._viewer.scene.camera.getPickRay(position);
-            cartesian = this._viewer.scene.globe.pick(ray, this._viewer.scene);
-        }
-        if (!cartesian) return;
-        var carto = Cesium.Cartographic.fromCartesian(cartesian);
-        var clickLat = Cesium.Math.toDegrees(carto.latitude);
-        var clickLon = Cesium.Math.toDegrees(carto.longitude);
-
-        // Naechsten Monitor-Punkt finden
-        var best = null, bestDist = 999;
-        for (var i = 0; i < this._data.length; i++) {
-            var f = this._data[i];
-            var c = f.geometry.coordinates;
-            var d = Math.abs(c[1] - clickLat) + Math.abs(c[0] - clickLon);
-            if (d < bestDist) { bestDist = d; best = f; }
-        }
-        if (!best || bestDist > 2) return;
-
-        var p = best.properties;
-        var incident = null;
-        for (var j = 0; j < this._incidents.length; j++) {
-            if (this._incidents[j].id === p.incident_id) { incident = this._incidents[j]; break; }
-        }
-
-        // Info-Panel bauen
-        var catColors = { primary: '#ff2222', secondary: '#ff8800', tertiary: '#4499ff', mentioned: '#888888' };
-        var catLabels = { primary: 'Hauptgeschehen', secondary: 'Reaktionen', tertiary: 'Beteiligte', mentioned: 'Erwaehnt' };
-        var catColor = catColors[p.category] || '#888';
-        var catLabel = catLabels[p.category] || p.category;
-
-        var html = '<div style="font-family:monospace;font-size:12px;padding:10px;max-width:400px;line-height:1.6">';
-
-        // Ort + Kategorie
-        html += '<div style="margin-bottom:10px">';
-        html += '<span style="color:' + catColor + ';font-size:14px;font-weight:700">' + (p.name || '?') + '</span>';
-        if (p.country) html += ' <span style="color:#888;font-size:11px">(' + p.country + ')</span>';
-        html += '<br><span style="color:' + catColor + ';font-size:10px;letter-spacing:1px">' + catLabel.toUpperCase() + '</span>';
-        html += ' &middot; <span style="color:#aaa">' + (p.article_count || 0) + ' Artikel</span>';
-        html += '</div>';
-
-        // Headlines
-        var headlines = p.headlines || [];
-        if (headlines.length && headlines[0]) {
-            html += '<div style="border-left:2px solid ' + catColor + ';padding-left:8px;margin-bottom:10px">';
-            for (var h = 0; h < Math.min(headlines.length, 3); h++) {
-                if (headlines[h] && headlines[h].trim()) {
-                    html += '<div style="color:#e0e0e0;font-size:11px;margin-bottom:4px">&bull; ' + headlines[h].trim().substring(0, 120) + '</div>';
-                }
-            }
-            html += '</div>';
-        }
-
-        // Lage-Zusammenfassung
-        if (incident && incident.summary) {
-            html += '<div style="border-top:1px solid #333;padding-top:8px;margin-top:4px">';
-            html += '<div style="color:#00ff88;font-size:10px;letter-spacing:1px;margin-bottom:4px">' + (incident.title || 'LAGE').toUpperCase() + '</div>';
-            // Summary kuerzen und Markdown-Formatierung entfernen
-            var summary = incident.summary
-                .replace(/##?\s*/g, '')
-                .replace(/\*\*/g, '')
-                .replace(/\[(\d+)\]/g, '')
-                .substring(0, 500);
-            html += '<div style="color:#ccc;font-size:11px;line-height:1.5">' + summary;
-            if (incident.summary.length > 500) html += '...';
-            html += '</div>';
-            if (incident.updated_at) {
-                html += '<div style="color:#666;font-size:9px;margin-top:6px">Stand: ' + new Date(incident.updated_at).toLocaleString('de-DE') + '</div>';
-            }
-            html += '</div>';
-        }
-
-        html += '</div>';
-
-        this._viewer.trackedEntity = undefined;
-        this._viewer.selectedEntity = new Cesium.Entity({
-            name: (p.name || '?') + ' — ' + (incident ? incident.title : 'Monitor'),
-            description: html,
-        });
-    },
-
     _fetchForLage(lageId) {
         var self = this;
         var loadEl = document.getElementById('loading-monitor');
@@ -141,68 +50,96 @@ const MonitorLayer = {
     },
 
     _fetch() {
-        var self = this;
-        var loadEl = document.getElementById('loading-monitor');
-        var statusEl = document.getElementById('status-monitor');
-        if (loadEl) loadEl.classList.add('active');
-        if (statusEl) { statusEl.textContent = 'Lade Monitor-Daten...'; statusEl.classList.add('active'); }
         var lageId = (typeof Globe !== 'undefined' && Globe._currentLageId) ? Globe._currentLageId : '';
-        fetch('/api/monitor-feed' + (lageId ? '?incident_id=' + lageId : ''))
+        if (lageId) this._fetchForLage(lageId);
-        .then(function(r) { return r.json(); })
+    },
-        .then(function(data) {
+
-            self._data = data.features || [];
+    _onClick(position) {
-            self._incidents = data.incidents || [];
+        if (!this._viewer || !this._data.length) return;
-            self._count = self._data.length;
+        var cartesian = this._viewer.scene.pickPosition(position);
-            self._render();
+        if (!cartesian) {
-            if (statusEl) {
+            var ray = this._viewer.scene.camera.getPickRay(position);
-                var incCount = self._incidents.length;
+            cartesian = this._viewer.scene.globe.pick(ray, this._viewer.scene);
-                statusEl.textContent = self._count + ' Orte aus ' + incCount + ' Lagen';
+        }
-            }
+        if (!cartesian) return;
-        })
+        var carto = Cesium.Cartographic.fromCartesian(cartesian);
-        .catch(function(e) { console.warn('Monitor error:', e); if (statusEl) statusEl.textContent = 'Fehler'; })
+        var clickLat = Cesium.Math.toDegrees(carto.latitude);
-        .finally(function() { if (loadEl) loadEl.classList.remove('active'); setTimeout(function() { if (statusEl) statusEl.classList.remove('active'); }, 8000); });
+        var clickLon = Cesium.Math.toDegrees(carto.longitude);
+
+        var best = null, bestDist = 999;
+        for (var i = 0; i < this._data.length; i++) {
+            var f = this._data[i];
+            var c = f.geometry.coordinates;
+            var d = Math.abs(c[1] - clickLat) + Math.abs(c[0] - clickLon);
+            if (d < bestDist) { bestDist = d; best = f; }
+        }
+        if (!best || bestDist > 2) return;
+
+        var p = best.properties;
+        var catColors = { primary: '#ff2222', secondary: '#ff8800', tertiary: '#4499ff', mentioned: '#888888' };
+        var color = catColors[p.category] || '#888';
+
+        var html = '<div style="font-family:monospace;font-size:12px;padding:10px;max-width:400px;line-height:1.6">';
+        html += '<span style="color:' + color + ';font-size:14px;font-weight:700">' + (p.name || '?') + '</span>';
+        if (p.country) html += ' <span style="color:#888">(' + p.country + ')</span>';
+        html += '<br><span style="color:#aaa">' + (p.article_count || 0) + ' Artikel</span>';
+
+        // Ortsspezifische Artikel
+        var articles = p.articles || [];
+        if (articles.length) {
+            html += '<div style="margin-top:8px">';
+            articles.forEach(function(a) {
+                html += '<div style="border-left:2px solid ' + color + ';padding-left:8px;margin-bottom:8px">';
+                html += '<div style="color:#e0e0e0;font-size:12px;font-weight:700">' + (a.headline || '?') + '</div>';
+                if (a.summary) {
+                    html += '<div style="color:#bbb;font-size:11px;margin-top:2px">' + a.summary + '</div>';
+                }
+                html += '<div style="color:#666;font-size:9px;margin-top:2px">';
+                if (a.source) html += a.source;
+                if (a.date) html += ' | ' + new Date(a.date).toLocaleDateString('de-DE');
+                html += '</div></div>';
+            });
+            html += '</div>';
+        }
+        html += '</div>';
+
+        this._viewer.trackedEntity = undefined;
+        this._viewer.selectedEntity = new Cesium.Entity({
+            name: (p.name || '?') + ' — ' + (p.incident_title || ''),
+            description: html,
+        });
     },
 
     _render() {
         if (!this._points) return;
         this._points.removeAll();
         this._labels.removeAll();
-
         var colors = {
             'primary': Cesium.Color.fromCssColorString('#ff2222'),
             'secondary': Cesium.Color.fromCssColorString('#ff8800'),
             'tertiary': Cesium.Color.fromCssColorString('#4499ff'),
             'mentioned': Cesium.Color.fromCssColorString('#888888'),
         };
-
         for (var i = 0; i < this._data.length; i++) {
             var f = this._data[i];
             var coords = f.geometry.coordinates;
             var p = f.properties;
-            var cat = p.category || 'mentioned';
+            var color = colors[p.category] || colors.mentioned;
-            var color = colors[cat] || colors.mentioned;
             var count = p.article_count || 1;
             var size = Math.min(Math.max(Math.sqrt(count) * 2.5, 4), 14);
-
             this._points.add({
                 position: Cesium.Cartesian3.fromDegrees(coords[0], coords[1], 1000),
-                pixelSize: size,
+                pixelSize: size, color: color,
-                color: color,
+                outlineColor: Cesium.Color.WHITE.withAlpha(0.6), outlineWidth: 1,
-                outlineColor: Cesium.Color.WHITE.withAlpha(0.6),
-                outlineWidth: 1,
             });
-
             if (count >= 2) {
                 this._labels.add({
                     position: Cesium.Cartesian3.fromDegrees(coords[0], coords[1], 1000),
                     text: (p.name || '?') + ' (' + count + ')',
-                    font: '11px sans-serif',
+                    font: '11px sans-serif', fillColor: color,
-                    fillColor: color,
+                    outlineColor: Cesium.Color.BLACK, outlineWidth: 3,
-                    outlineColor: Cesium.Color.BLACK,
-                    outlineWidth: 3,
                     style: Cesium.LabelStyle.FILL_AND_OUTLINE,
-                    pixelOffset: new Cesium.Cartesian2(0, -size - 6),
+                    pixelOffset: new Cesium.Cartesian2(0, -size - 6), scale: 0.8,
-                    scale: 0.8,
                     horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
                     distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 3000000),
                 });