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

Karte: MarkerCluster mit Popups, Hero-CTAs scrollen zu Demos

Quellcode durchsuchen 
Lagebild-Karte auf geclusterte Marker umgebaut (primary/secondary als Pulse, rest als CircleMarker). Popups zeigen jetzt Top-Artikel mit Links. Vorschau Hero-Buttons scrollen zum Demo-Karussell statt direkt zu den Lagen.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Dieser Commit ist enthalten in:
Claude Code
2026-04-11 18:18:31 +02:00
Ursprung 3cd5623fa6
Commit 0a6ec07374
6 geänderte Dateien mit 130 neuen und 25 gelöschten Zeilen
Patch-Datei herunterladen Vergleichs-Datei herunterladen Alle Dateien ausklappen Alle Dateien einklappen

3
lagen/iran-konflikt/index.html
Datei anzeigen

@@ -11,6 +11,8 @@
<link rel="stylesheet" href="/css/mobile.css">
<link rel="stylesheet" href="lagebild.css">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.5.3/dist/MarkerCluster.css">
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.5.3/dist/MarkerCluster.Default.css">
</head>
<body class="lagebild-page">
<!-- Scroll Progress Bar -->
@@ -186,6 +188,7 @@
<script src="/js/translations.js"></script>
<script src="/js/mobile-nav.js"></script>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script src="https://unpkg.com/leaflet.markercluster@1.5.3/dist/leaflet.markercluster.js"></script>
<script src="lagebild.js"></script>
</body>
</html>

14
lagen/iran-konflikt/lagebild.css
Datei anzeigen

@@ -1553,3 +1553,17 @@ a.source-detail-article-title:hover {
margin-top: 1rem;
}
}
/* Marker-Cluster Dark Theme */
.marker-cluster-small,
.marker-cluster-medium,
.marker-cluster-large {
background: rgba(21, 29, 46, 0.8);
}
.marker-cluster-small div,
.marker-cluster-medium div,
.marker-cluster-large div {
background: rgba(200, 168, 81, 0.9);
color: #0A1832;
font-weight: 600;
}

56
lagen/iran-konflikt/lagebild.js
Datei anzeigen

@@ -655,7 +655,7 @@ var Lagebild = {
renderArticlesTab: function() {},
/* ===== TAB: KARTE (Pulse Markers) ===== */
/* ===== TAB: KARTE (Clustered Pulse Markers) ===== */
renderMap: function() {
if (this.map) { this.map.remove(); this.map = null; }
this.map = L.map('map-container', {
@@ -664,7 +664,6 @@ var Lagebild = {
maxBoundsViscosity: 1.0
}).setView([33.0, 48.0], 5);
// Deutsche OSM-Kacheln
L.tileLayer('https://tile.openstreetmap.de/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
maxZoom: 19,
@@ -685,7 +684,6 @@ var Lagebild = {
});
}
// Kategorie-Farben
var categoryColors = {
primary: '#ef4444',
secondary: '#f59e0b',
@@ -698,7 +696,6 @@ var Lagebild = {
tertiary: 'Beteiligte',
mentioned: 'Erwaehnt'
};
// Dynamische Labels aus API verwenden (falls vorhanden)
var categoryLabels = {};
if (this.data && this.data.category_labels) {
var apiLabels = this.data.category_labels;
@@ -710,7 +707,6 @@ var Lagebild = {
categoryLabels = defaultCategoryLabels;
}
// Locations aus API-Daten laden
var locs = (this.data && this.data.locations) ? this.data.locations : [];
if (locs.length === 0) {
@@ -720,22 +716,60 @@ var Lagebild = {
document.getElementById('map-container').appendChild(emptyDiv);
}
var clusterGroup = L.markerClusterGroup({
maxClusterRadius: 50,
spiderfyOnMaxZoom: true,
showCoverageOnHover: false,
zoomToBoundsOnClick: true,
disableClusteringAtZoom: 10
});
var usedCategories = {};
var bounds = [];
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;
// Popup mit Artikel-Links
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);
if (l.top_articles && l.top_articles.length > 0) {
popupText += '<div style="margin-top:6px;border-top:1px solid #1E2D45;padding-top:6px;">';
for (var j = 0; j < l.top_articles.length; j++) {
var a = l.top_articles[j];
var hl = (a.headline || '').replace(/\*\*/g, '');
if (hl.length > 60) hl = hl.substring(0, 60) + '\u2026';
if (a.url) {
popupText += '<a href="' + a.url + '" target="_blank" rel="noopener" style="color:#C8A851;font-size:0.8rem;display:block;margin-top:3px;text-decoration:none;">' + hl + '</a>';
} else {
popupText += '<span style="color:#8896AB;font-size:0.8rem;display:block;margin-top:3px;">' + hl + '</span>';
}
popupText += '<span style="color:#556B7A;font-size:0.7rem;">' + (a.source || '') + '</span>';
}
popupText += '</div>';
}
// Dark legend (dynamisch)
var marker;
if (cat === 'primary' || cat === 'secondary') {
marker = L.marker([l.lat, l.lon], { icon: pulseIcon(color) });
} else {
marker = L.circleMarker([l.lat, l.lon], {
radius: 5, fillColor: color, fillOpacity: 0.7,
color: color, weight: 1, opacity: 0.9
});
}
marker.bindPopup(popupText, { maxWidth: 300 });
clusterGroup.addLayer(marker);
bounds.push([l.lat, l.lon]);
}
this.map.addLayer(clusterGroup);
// Dark legend
var legend = L.control({ position: 'bottomright' });
legend.onAdd = function() {
var div = L.DomUtil.create('div', 'map-legend');
@@ -751,6 +785,10 @@ var Lagebild = {
};
legend.addTo(this.map);
if (bounds.length > 0) {
this.map.fitBounds(bounds, { padding: [30, 30], maxZoom: 7 });
}
// Dark popup styling
if (!document.getElementById('leaflet-dark-style')) {
var style = document.createElement('style');

14
vorschau/css/style.css
Datei anzeigen

@@ -372,3 +372,17 @@ a { color:inherit; text-decoration:none; }
.container { padding:0 16px; }
}
/* Marker-Cluster Dark Theme */
.marker-cluster-small,
.marker-cluster-medium,
.marker-cluster-large {
background: rgba(21, 29, 46, 0.8);
}
.marker-cluster-small div,
.marker-cluster-medium div,
.marker-cluster-large div {
background: rgba(200, 168, 81, 0.9);
color: #0A1832;
font-weight: 600;
}

11
vorschau/index.html
Datei anzeigen

@@ -8,6 +8,8 @@
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="apple-touch-icon" href="/assets/images/logos/AegisSightLogo_NavyGold.svg">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css">
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.5.3/dist/MarkerCluster.css">
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.5.3/dist/MarkerCluster.Default.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
@@ -95,7 +97,7 @@
<p class="hero-slide-text">Der AegisSight Monitor überwacht hunderte Quellen rund um die Uhr und erstellt strukturierte Lagebilder, ohne manuellen Aufwand. Neue Entwicklungen werden in Minuten erfasst, analysiert und eingeordnet. Sie entscheiden, was überwacht wird, der Monitor liefert das Lagebild.</p>
<p class="hero-slide-example">Live-Beispiel: Der Iran-Konflikt wird mit über 14.900 Artikeln aus 375 Quellen kontinuierlich überwacht.</p>
<div class="hero-slide-cta">
<a href="/lagen/iran-konflikt/" class="btn btn-primary">Live-Beispiel ansehen</a>
<a href="#demos" class="btn btn-primary" onclick="positionCards(0)">Live-Beispiel ansehen</a>
</div>
</div>
<div class="hero-slide-media-col"></div>
@@ -125,7 +127,7 @@
<p class="hero-slide-text">Definieren Sie ein Thema, der Monitor recherchiert, strukturiert und belegt vollautomatisch. Quellenbasierte Analyse mit Faktenprüfung, kein Copy-Paste aus Suchmaschinen. Das Ergebnis: ein vollständiges Dossier mit Quellenbelegen und Faktenchecks.</p>
<p class="hero-slide-example">Beispiel: Ein Dossier zur rechtlichen Lage von Deepfakes in Deutschland, 121 Artikel aus 90 Quellen, automatisch erstellt.</p>
<div class="hero-slide-cta">
<a href="/lagen/deepfakes/" class="btn btn-primary">Recherche-Beispiel ansehen</a>
<a href="#demos" class="btn btn-primary" onclick="positionCards(2)">Recherche-Beispiel ansehen</a>
</div>
</div>
<div class="hero-slide-media-col"></div>
@@ -141,7 +143,7 @@
<p class="hero-slide-text">Arabisch, Persisch, Hebräisch, Russisch, Chinesisch: Der Monitor verarbeitet Quellen, die den meisten Analystenteams sprachlich verschlossen bleiben. Automatische Übersetzung, Kontextanalyse und Einordnung. Globale Abdeckung ohne globale Personalkosten.</p>
<p class="hero-slide-example">Im Iran-Konflikt werden Primärquellen in Farsi, Arabisch und Hebräisch direkt ausgewertet.</p>
<div class="hero-slide-cta">
<a href="/lagen/iran-konflikt/" class="btn btn-primary">Live-Beispiel ansehen</a>
<a href="#demos" class="btn btn-primary" onclick="positionCards(0)">Live-Beispiel ansehen</a>
</div>
</div>
<div class="hero-slide-media-col"></div>
@@ -157,7 +159,7 @@
<p class="hero-slide-text">Geopolitische Konflikte, Unternehmensrisiken, regionale Krisen oder Einzelpersonen: Der AegisSight Monitor skaliert mit Ihrem Bedarf. Definieren Sie Ihr Thema, wählen Sie Ihre Quellen, der Rest läuft automatisch. Jede Lage erhält ihr eigenes Lagebild mit Quellenbelegen, Karte und Faktencheck.</p>
<p class="hero-slide-example">Beispiel: Cyberangriffe auf deutsche Infrastruktur, 93 Artikel aus 41 Quellen, automatisch überwacht.</p>
<div class="hero-slide-cta">
<a href="/lagen/cyberangriffe/" class="btn btn-primary">Live-Beispiel ansehen</a>
<a href="#demos" class="btn btn-primary" onclick="positionCards(1)">Live-Beispiel ansehen</a>
</div>
</div>
<div class="hero-slide-media-col"></div>
@@ -478,6 +480,7 @@
</div>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script src="https://unpkg.com/leaflet.markercluster@1.5.3/dist/leaflet.markercluster.js"></script>
<script src="js/app.js"></script>
</body>
</html>

57
vorschau/js/app.js
Datei anzeigen

@@ -292,7 +292,7 @@ function mdToHtml(md) {
/* ==================== LEAFLET MAP ==================== */
function clearMarkers() {
if (markerLayer) markerLayer.clearLayers();
if (markerLayer) { mapInstance.removeLayer(markerLayer); markerLayer = null; }
if (legendControl && mapInstance) { mapInstance.removeControl(legendControl); legendControl = null; }
}
@@ -311,7 +311,6 @@ function mdToHtml(md) {
maxZoom: 19, noWrap: true
}).addTo(mapInstance);
markerLayer = L.layerGroup().addTo(mapInstance);
setTimeout(function () { mapInstance.invalidateSize(); }, 500);
}
@@ -327,11 +326,31 @@ function mdToHtml(md) {
});
}
function buildPopup(loc) {
var html = '<strong style="color:#E8ECF4;">' + (loc.name || '') + '</strong>';
if (loc.country_code) html += ' <span style="color:#8896AB;font-size:0.8rem;">(' + loc.country_code + ')</span>';
html += '<br><span style="font-size:0.85rem;color:#8896AB;">' + (loc.article_count || 0) + ' Artikel</span>';
if (loc.top_articles && loc.top_articles.length > 0) {
html += '<div style="margin-top:6px;border-top:1px solid #1E2D45;padding-top:6px;">';
loc.top_articles.forEach(function (a) {
var hl = (a.headline || '').replace(/\*\*/g, '');
if (hl.length > 60) hl = hl.substring(0, 60) + '\u2026';
if (a.url) {
html += '<a href="' + a.url + '" target="_blank" rel="noopener" style="color:#C8A851;font-size:0.8rem;display:block;margin-top:3px;text-decoration:none;">' + hl + '</a>';
} else {
html += '<span style="color:#8896AB;font-size:0.8rem;display:block;margin-top:3px;">' + hl + '</span>';
}
html += '<span style="color:#556B7A;font-size:0.7rem;">' + (a.source || '') + '</span>';
});
html += '</div>';
}
return html;
}
function showMarkers(locations, apiLabels) {
if (!mapInstance) createMap();
clearMarkers();
var categoryColors = {
primary: '#ef4444',
secondary: '#f59e0b',
@@ -343,7 +362,7 @@ function mdToHtml(md) {
primary: 'Hauptgeschehen',
secondary: 'Reaktionen',
tertiary: 'Beteiligte',
mentioned: 'Erwähnt'
mentioned: 'Erw\u00e4hnt'
};
var categoryLabels = {};
@@ -351,6 +370,14 @@ function mdToHtml(md) {
categoryLabels[k] = (apiLabels && apiLabels[k]) || defaultLabels[k];
});
var clusterGroup = L.markerClusterGroup({
maxClusterRadius: 50,
spiderfyOnMaxZoom: true,
showCoverageOnHover: false,
zoomToBoundsOnClick: true,
disableClusteringAtZoom: 10
});
var usedCategories = {};
var bounds = [];
@@ -360,17 +387,23 @@ function mdToHtml(md) {
var color = categoryColors[cat] || '#7b7b7b';
usedCategories[cat] = true;
var popup = '<strong style="color:#E8ECF4;">' + (loc.name || '') + '</strong>';
if (loc.country_code) popup += ' <span style="color:#8896AB;font-size:0.8rem;">(' + loc.country_code + ')</span>';
popup += '<br><span style="font-size:0.85rem;color:#8896AB;">' + (loc.article_count || 0) + ' Artikel</span>';
L.marker([loc.lat, loc.lon], { icon: pulseIcon(color) })
.addTo(markerLayer)
.bindPopup(popup);
var marker;
if (cat === 'primary' || cat === 'secondary') {
marker = L.marker([loc.lat, loc.lon], { icon: pulseIcon(color) });
} else {
marker = L.circleMarker([loc.lat, loc.lon], {
radius: 5, fillColor: color, fillOpacity: 0.7,
color: color, weight: 1, opacity: 0.9
});
}
marker.bindPopup(buildPopup(loc), { maxWidth: 300 });
clusterGroup.addLayer(marker);
bounds.push([loc.lat, loc.lon]);
});
// Dark legend (exact lagebild style)
markerLayer = clusterGroup;
mapInstance.addLayer(markerLayer);
var legend = L.control({ position: 'bottomright' });
legend.onAdd = function () {
var div = L.DomUtil.create('div');