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>
Dieser Commit ist enthalten in:
@@ -628,39 +628,59 @@ var Lagebild = {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
var red = '#ef4444';
|
// Kategorie-Farben
|
||||||
var orange = '#f59e0b';
|
var categoryColors = {
|
||||||
var blue = '#3b82f6';
|
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 = [
|
// Locations aus API-Daten laden
|
||||||
{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},
|
var locs = (this.data && this.data.locations) ? this.data.locations : [];
|
||||||
{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}
|
|
||||||
];
|
|
||||||
|
|
||||||
for (var i = 0; i < locs.length; i++) {
|
if (locs.length === 0) {
|
||||||
var l = locs[i];
|
var emptyDiv = document.createElement('div');
|
||||||
L.marker([l.lat, l.lng], { icon: pulseIcon(l.c) })
|
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;';
|
||||||
.addTo(this.map)
|
emptyDiv.innerHTML = 'Keine Standortdaten verfuegbar';
|
||||||
.bindPopup('<strong style="color:#E8ECF4;">' + l.n + '</strong><br><span style="font-size:0.85rem;color:#8896AB;">' + l.d + '</span>');
|
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' });
|
var legend = L.control({ position: 'bottomright' });
|
||||||
legend.onAdd = function() {
|
legend.onAdd = function() {
|
||||||
var div = L.DomUtil.create('div', 'map-legend');
|
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.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>'
|
var html = '<strong style="color:#C8A851;">Legende</strong><br>';
|
||||||
+ '<span style="color:#ef4444;">●</span> Angegriffene Ziele<br>'
|
['target', 'response', 'retaliation', 'actor', 'mentioned'].forEach(function(cat) {
|
||||||
+ '<span style="color:#f59e0b;">●</span> Vergeltung / Eskalation<br>'
|
if (usedCategories[cat]) {
|
||||||
+ '<span style="color:#3b82f6;">●</span> Strategische Akteure';
|
html += '<span style="color:' + categoryColors[cat] + ';">●</span> ' + categoryLabels[cat] + '<br>';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
div.innerHTML = html;
|
||||||
return div;
|
return div;
|
||||||
};
|
};
|
||||||
legend.addTo(this.map);
|
legend.addTo(this.map);
|
||||||
|
|||||||
In neuem Issue referenzieren
Einen Benutzer sperren