Lagebild-Karte: dynamische Locations aus API statt hardcoded

Karte zeigt jetzt Orte aus der Monitor-API (article_locations)
statt einer festen Liste. Kategorien target/response/actor/mentioned
werden dynamisch angezeigt mit Legende.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

lagebild/lagebild.js

@@ -628,39 +628,59 @@ var Lagebild = {
             });
         }
 
-        var red = '#ef4444';
-        var orange = '#f59e0b';
-        var blue = '#3b82f6';
+        // Kategorie-Farben
+        var categoryColors = {
+            target: '#ef4444',
+            retaliation: '#f59e0b',
+            response: '#f59e0b',
+            actor: '#3b82f6',
+            mentioned: '#7b7b7b'
+        };
+        var categoryLabels = {
+            target: 'Angegriffene Ziele',
+            retaliation: 'Vergeltung / Eskalation',
+            response: 'Reaktion / Gegenmassnahmen',
+            actor: 'Strategische Akteure',
+            mentioned: 'Erwaehnt'
+        };
 
-        var locs = [
-            {n:'Teheran, Iran',lat:35.6892,lng:51.3890,d:'Hauptziel der US-israelischen Luftschl\u00e4ge. \u00dcber 1.000 Tote nach f\u00fcnf Tagen Krieg.',c:red},
-            {n:'Beirut, Libanon',lat:33.8938,lng:35.5018,d:'Gleichzeitige US-israelische Luftschl\u00e4ge auf Beirut und Teheran [6].',c:red},
-            {n:'Juffair, Bahrain',lat:26.2235,lng:50.6001,d:'US-Marinebasis \u2013 Ziel iranischer Vergeltungsraketen [3].',c:orange},
-            {n:'Al Udeid, Katar',lat:25.1173,lng:51.3150,d:'US-Luftwaffenst\u00fctzpunkt \u2013 Ziel iranischer Gegenangriffe.',c:orange},
-            {n:'Tel Aviv, Israel',lat:32.0853,lng:34.7818,d:'Operationsbasis f\u00fcr israelische Angriffe auf den Iran.',c:blue},
-            {n:'Ankara, T\u00fcrkei',lat:39.9334,lng:32.8597,d:'NATO vermutet iranischen Raketenbeschuss auf T\u00fcrkei [10]. Keine NATO-Beteiligung geplant.',c:orange},
-            {n:'Bagdad, Irak',lat:33.3152,lng:44.3661,d:'Lage im Irak als Faktor im Kriegsverlauf [2].',c:blue},
-            {n:'Persischer Golf',lat:27.0,lng:51.5,d:'Iran greift Energieinfrastruktur und diplomatische Einrichtungen in der Golfregion an.',c:orange},
-            {n:'Dubai, VAE',lat:25.2048,lng:55.2708,d:'US-Botschaft in Dubai durch iranischen Angriff getroffen.',c:red},
-            {n:'Washington D.C., USA',lat:38.9072,lng:-77.0369,d:'War-Powers-Abstimmung im Senat gescheitert (47:53). Trump verteidigt Iran-Krieg vor Kongress.',c:blue}
-        ];
+        // Locations aus API-Daten laden
+        var locs = (this.data && this.data.locations) ? this.data.locations : [];
 
-        for (var i = 0; i < locs.length; i++) {
-            var l = locs[i];
-            L.marker([l.lat, l.lng], { icon: pulseIcon(l.c) })
-                .addTo(this.map)
-                .bindPopup('<strong style="color:#E8ECF4;">' + l.n + '</strong><br><span style="font-size:0.85rem;color:#8896AB;">' + l.d + '</span>');
+        if (locs.length === 0) {
+            var emptyDiv = document.createElement('div');
+            emptyDiv.style.cssText = 'position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1000;background:#151D2E;padding:20px 30px;border-radius:8px;border:1px solid #1E2D45;color:#8896AB;text-align:center;';
+            emptyDiv.innerHTML = 'Keine Standortdaten verfuegbar';
+            document.getElementById('map-container').appendChild(emptyDiv);
         }
 
-        // Dark legend
+        var usedCategories = {};
+        for (var i = 0; i < locs.length; i++) {
+            var l = locs[i];
+            if (!l.lat || !l.lon) continue;
+            var cat = l.category || 'mentioned';
+            var color = categoryColors[cat] || '#7b7b7b';
+            usedCategories[cat] = true;
+            var popupText = '<strong style="color:#E8ECF4;">' + (l.name || '') + '</strong>';
+            if (l.country_code) popupText += ' <span style="color:#8896AB;font-size:0.8rem;">(' + l.country_code + ')</span>';
+            popupText += '<br><span style="font-size:0.85rem;color:#8896AB;">' + (l.article_count || 0) + ' Artikel</span>';
+            L.marker([l.lat, l.lon], { icon: pulseIcon(color) })
+                .addTo(this.map)
+                .bindPopup(popupText);
+        }
+
+        // Dark legend (dynamisch)
         var legend = L.control({ position: 'bottomright' });
         legend.onAdd = function() {
             var div = L.DomUtil.create('div', 'map-legend');
             div.style.cssText = 'background:#151D2E;padding:10px 14px;border-radius:4px;border:1px solid #1E2D45;box-shadow:0 2px 8px rgba(0,0,0,0.3);font-size:0.8rem;line-height:1.8;color:#E8ECF4;';
-            div.innerHTML = '<strong style="color:#C8A851;">Legende</strong><br>'
-                + '<span style="color:#ef4444;">&#9679;</span> Angegriffene Ziele<br>'
-                + '<span style="color:#f59e0b;">&#9679;</span> Vergeltung / Eskalation<br>'
-                + '<span style="color:#3b82f6;">&#9679;</span> Strategische Akteure';
+            var html = '<strong style="color:#C8A851;">Legende</strong><br>';
+            ['target', 'response', 'retaliation', 'actor', 'mentioned'].forEach(function(cat) {
+                if (usedCategories[cat]) {
+                    html += '<span style="color:' + categoryColors[cat] + ';">&#9679;</span> ' + categoryLabels[cat] + '<br>';
+                }
+            });
+            div.innerHTML = html;
             return div;
         };
         legend.addTo(this.map);