Kartenfeature: Geoparsing + Leaflet-Karte im Dashboard

- Neues Geoparsing-Modul (spaCy NER + geonamescache/Nominatim) - article_locations-Tabelle mit Migration - Pipeline-Integration nach Artikel-Speicherung - API-Endpunkt GET /incidents/{id}/locations - Leaflet.js + MarkerCluster im Dashboard-Grid - Theme-aware Kartenkacheln (CartoDB dark / OSM light) - Gold-Akzent MarkerCluster, Popup mit Artikelliste Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-04 22:04:07 +01:00
Commit 4bfc626067
--- a/src/static/css/style.css
+++ b/src/static/css/style.css
@@ -4142,3 +4142,174 @@ a:hover {
        color: black !important;
    }
 }
+
+/* === Karten-Kachel (Leaflet) === */
+.map-card {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+}
+.map-card .card-header {
+    flex-shrink: 0;
+}
+.map-stats {
+    font-size: 12px;
+    color: var(--text-secondary);
+    font-family: var(--font-body);
+}
+.map-container {
+    flex: 1;
+    min-height: 200px;
+    position: relative;
+    z-index: 1;
+}
+.map-empty {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    min-height: 200px;
+    color: var(--text-tertiary);
+    font-size: 13px;
+    font-family: var(--font-body);
+}
+
+/* Leaflet-Popup-Overrides */
+.map-popup-container .leaflet-popup-content-wrapper {
+    background: var(--bg-card);
+    color: var(--text-primary);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-lg);
+    box-shadow: var(--shadow-md);
+}
+.map-popup-container .leaflet-popup-tip {
+    background: var(--bg-card);
+    border: 1px solid var(--border);
+}
+.map-popup-container .leaflet-popup-content {
+    margin: 10px 12px;
+    font-family: var(--font-body);
+    font-size: 13px;
+    line-height: 1.5;
+}
+.map-popup-container .leaflet-popup-close-button {
+    color: var(--text-secondary);
+}
+.map-popup-container .leaflet-popup-close-button:hover {
+    color: var(--text-primary);
+}
+.map-popup-title {
+    font-weight: 600;
+    font-family: var(--font-title);
+    font-size: 14px;
+    margin-bottom: 2px;
+}
+.map-popup-cc {
+    font-size: 10px;
+    color: var(--text-secondary);
+    font-weight: 400;
+    text-transform: uppercase;
+}
+.map-popup-count {
+    font-size: 11px;
+    color: var(--text-secondary);
+    margin-bottom: 6px;
+}
+.map-popup-articles {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+}
+.map-popup-article {
+    display: block;
+    font-size: 12px;
+    color: var(--text-primary);
+    text-decoration: none;
+    padding: 3px 0;
+    border-top: 1px solid var(--border);
+    line-height: 1.4;
+}
+a.map-popup-article:hover {
+    color: var(--accent);
+}
+.map-popup-source {
+    color: var(--text-secondary);
+    font-size: 11px;
+}
+.map-popup-more {
+    font-size: 11px;
+    color: var(--text-secondary);
+    font-style: italic;
+    padding-top: 4px;
+    border-top: 1px solid var(--border);
+}
+
+/* MarkerCluster in Gold-Akzent */
+.map-cluster {
+    background: rgba(200, 168, 81, 0.25);
+    border-radius: 50%;
+}
+.map-cluster div {
+    width: 30px;
+    height: 30px;
+    margin: 5px;
+    background: var(--accent);
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.map-cluster span {
+    font-family: var(--font-body);
+    font-size: 12px;
+    font-weight: 600;
+    color: #0B1121;
+}
+.map-cluster-medium div {
+    width: 36px;
+    height: 36px;
+    margin: 2px;
+}
+.map-cluster-medium span {
+    font-size: 13px;
+}
+.map-cluster-large div {
+    width: 44px;
+    height: 44px;
+    margin: -2px;
+}
+.map-cluster-large span {
+    font-size: 14px;
+}
+
+/* Leaflet Controls: Dark-Theme */
+.leaflet-control-zoom a {
+    background-color: var(--bg-card) !important;
+    color: var(--text-primary) !important;
+    border-color: var(--border) !important;
+}
+.leaflet-control-zoom a:hover {
+    background-color: var(--bg-hover) !important;
+}
+.leaflet-control-attribution {
+    background: rgba(11, 17, 33, 0.7) !important;
+    color: var(--text-secondary) !important;
+    font-size: 10px !important;
+}
+.leaflet-control-attribution a {
+    color: var(--text-secondary) !important;
+}
+
+/* Light-Theme Karten-Overrides */
+[data-theme="light"] .leaflet-control-zoom a {
+    background-color: #fff !important;
+    color: #333 !important;
+    border-color: #ccc !important;
+}
+[data-theme="light"] .leaflet-control-attribution {
+    background: rgba(255, 255, 255, 0.7) !important;
+    color: #666 !important;
+}
+[data-theme="light"] .map-cluster span {
+    color: #fff;
+}
--- a/src/static/dashboard.html
+++ b/src/static/dashboard.html
@@ -13,7 +13,10 @@
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/gridstack@12/dist/gridstack.min.css" rel="stylesheet">
-    <link rel="stylesheet" href="/static/css/style.css?v=20260304b">
+    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="">
+    <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="/static/css/style.css?v=20260304c">
 </head>
 <body>
    <a href="#main-content" class="skip-link">Zum Hauptinhalt springen</a>
@@ -179,6 +182,7 @@
                        <button class="layout-toggle-btn active" data-tile="faktencheck" onclick="LayoutManager.toggleTile('faktencheck')" aria-pressed="true">Faktencheck</button>
                        <button class="layout-toggle-btn active" data-tile="quellen" onclick="LayoutManager.toggleTile('quellen')" aria-pressed="true">Quellen</button>
                        <button class="layout-toggle-btn active" data-tile="timeline" onclick="LayoutManager.toggleTile('timeline')" aria-pressed="true">Timeline</button>
+                        <button class="layout-toggle-btn active" data-tile="karte" onclick="LayoutManager.toggleTile('karte')" aria-pressed="true">Karte</button>
                    </div>
                    <button class="btn btn-secondary btn-small" onclick="LayoutManager.reset()">Layout zurücksetzen</button>
                </div>
@@ -255,6 +259,20 @@
                            </div>
                        </div>
                    </div>
+
+                    <div class="grid-stack-item" gs-id="karte" gs-x="0" gs-y="9" gs-w="12" gs-h="4" gs-min-w="6" gs-min-h="3">
+                        <div class="grid-stack-item-content">
+                            <div class="card map-card">
+                                <div class="card-header">
+                                    <div class="card-title">Geografische Verteilung</div>
+                                    <span class="map-stats" id="map-stats"></span>
+                                </div>
+                                <div class="map-container" id="map-container">
+                                    <div class="map-empty" id="map-empty">Keine Orte erkannt</div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
                </div>

                <!-- Parkplatz für ausgeblendete Kacheln -->
@@ -539,10 +557,12 @@
    <div class="toast-container" id="toast-container" aria-live="polite" aria-atomic="true"></div>

    <script src="https://cdn.jsdelivr.net/npm/gridstack@12/dist/gridstack-all.js"></script>
-    <script src="/static/js/api.js?v=20260304a"></script>
-    <script src="/static/js/ws.js?v=20260304a"></script>
-    <script src="/static/js/components.js?v=20260304a"></script>
-    <script src="/static/js/layout.js?v=20260304a"></script>
-    <script src="/static/js/app.js?v=20260304a"></script>
+    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
+    <script src="https://unpkg.com/leaflet.markercluster@1.5.3/dist/leaflet.markercluster.js"></script>
+    <script src="/static/js/api.js?v=20260304c"></script>
+    <script src="/static/js/ws.js?v=20260304c"></script>
+    <script src="/static/js/components.js?v=20260304c"></script>
+    <script src="/static/js/layout.js?v=20260304c"></script>
+    <script src="/static/js/app.js?v=20260304c"></script>
 </body>
 </html>
--- a/src/static/js/api.js
+++ b/src/static/js/api.js
@@ -102,6 +102,10 @@ const API = {
        return this._request('GET', `/incidents/${incidentId}/snapshots`);
    },

+    getLocations(incidentId) {
+        return this._request('GET', `/incidents/${incidentId}/locations`);
+    },
+
    refreshIncident(id) {
        return this._request('POST', `/incidents/${id}/refresh`);
    },
--- a/src/static/js/app.js
+++ b/src/static/js/app.js
@@ -19,6 +19,7 @@ const ThemeManager = {
        document.documentElement.setAttribute('data-theme', next);
        localStorage.setItem(this._key, next);
        this._updateIcon(next);
+        UI.updateMapTheme();
    },
    _updateIcon(theme) {
        const btn = document.getElementById('theme-toggle');
@@ -589,20 +590,21 @@ const App = {

    async loadIncidentDetail(id) {
        try {
-            const [incident, articles, factchecks, snapshots] = await Promise.all([
+            const [incident, articles, factchecks, snapshots, locations] = await Promise.all([
                API.getIncident(id),
                API.getArticles(id),
                API.getFactChecks(id),
                API.getSnapshots(id),
+                API.getLocations(id).catch(() => []),
            ]);

-            this.renderIncidentDetail(incident, articles, factchecks, snapshots);
+            this.renderIncidentDetail(incident, articles, factchecks, snapshots, locations);
        } catch (err) {
            UI.showToast('Fehler beim Laden: ' + err.message, 'error');
        }
    },

-    renderIncidentDetail(incident, articles, factchecks, snapshots) {
+    renderIncidentDetail(incident, articles, factchecks, snapshots, locations) {
        // Header Strip
        document.getElementById('incident-title').textContent = incident.title;
        document.getElementById('incident-description').textContent = incident.description || '';
@@ -726,6 +728,9 @@ const App = {
        });
        this.rerenderTimeline();
        this._resizeTimelineTile();
+
+        // Karte rendern
+        UI.renderMap(locations || []);
    },

    _collectEntries(filterType, searchTerm, range) {
--- a/src/static/js/components.js
+++ b/src/static/js/components.js
@@ -596,6 +596,133 @@ const UI = {
            return url.length > 50 ? url.substring(0, 47) + '...' : url;
        }
    },
+    /**
+     * Leaflet-Karte mit Locations rendern.
+     */
+    _map: null,
+    _mapCluster: null,
+
+    renderMap(locations) {
+        const container = document.getElementById('map-container');
+        const emptyEl = document.getElementById('map-empty');
+        const statsEl = document.getElementById('map-stats');
+        if (!container) return;
+
+        if (!locations || locations.length === 0) {
+            if (emptyEl) emptyEl.style.display = 'flex';
+            if (statsEl) statsEl.textContent = '';
+            if (this._map) {
+                this._map.remove();
+                this._map = null;
+                this._mapCluster = null;
+            }
+            return;
+        }
+
+        if (emptyEl) emptyEl.style.display = 'none';
+
+        // Statistik
+        const totalArticles = locations.reduce((s, l) => s + l.article_count, 0);
+        if (statsEl) statsEl.textContent = `${locations.length} Orte / ${totalArticles} Artikel`;
+
+        // Karte initialisieren oder updaten
+        if (!this._map) {
+            this._map = L.map(container, {
+                zoomControl: true,
+                attributionControl: true,
+            }).setView([51.1657, 10.4515], 5); // Deutschland-Zentrum
+
+            this._applyMapTiles();
+            this._mapCluster = L.markerClusterGroup({
+                maxClusterRadius: 40,
+                iconCreateFunction: function(cluster) {
+                    const count = cluster.getChildCount();
+                    let size = 'small';
+                    if (count >= 10) size = 'medium';
+                    if (count >= 50) size = 'large';
+                    return L.divIcon({
+                        html: '<div><span>' + count + '</span></div>',
+                        className: 'map-cluster map-cluster-' + size,
+                        iconSize: L.point(40, 40),
+                    });
+                },
+            });
+            this._map.addLayer(this._mapCluster);
+        } else {
+            this._mapCluster.clearLayers();
+        }
+
+        // Marker hinzufuegen
+        const bounds = [];
+        locations.forEach(loc => {
+            const marker = L.marker([loc.lat, loc.lon]);
+
+            // Popup-Inhalt
+            let popupHtml = `<div class="map-popup">`;
+            popupHtml += `<div class="map-popup-title">${this.escape(loc.location_name)}`;
+            if (loc.country_code) popupHtml += ` <span class="map-popup-cc">${this.escape(loc.country_code)}</span>`;
+            popupHtml += `</div>`;
+            popupHtml += `<div class="map-popup-count">${loc.article_count} Artikel</div>`;
+            popupHtml += `<div class="map-popup-articles">`;
+            const maxShow = 5;
+            loc.articles.slice(0, maxShow).forEach(art => {
+                const headline = this.escape(art.headline || 'Ohne Titel');
+                const source = this.escape(art.source || '');
+                if (art.source_url) {
+                    popupHtml += `<a href="${this.escape(art.source_url)}" target="_blank" rel="noopener" class="map-popup-article">${headline} <span class="map-popup-source">${source}</span></a>`;
+                } else {
+                    popupHtml += `<div class="map-popup-article">${headline} <span class="map-popup-source">${source}</span></div>`;
+                }
+            });
+            if (loc.articles.length > maxShow) {
+                popupHtml += `<div class="map-popup-more">+${loc.articles.length - maxShow} weitere</div>`;
+            }
+            popupHtml += `</div></div>`;
+
+            marker.bindPopup(popupHtml, { maxWidth: 300, className: 'map-popup-container' });
+            this._mapCluster.addLayer(marker);
+            bounds.push([loc.lat, loc.lon]);
+        });
+
+        // Ansicht auf Marker zentrieren
+        if (bounds.length > 0) {
+            if (bounds.length === 1) {
+                this._map.setView(bounds[0], 8);
+            } else {
+                this._map.fitBounds(bounds, { padding: [30, 30], maxZoom: 12 });
+            }
+        }
+
+        // Resize-Fix fuer gridstack
+        setTimeout(() => { if (this._map) this._map.invalidateSize(); }, 200);
+    },
+
+    _applyMapTiles() {
+        if (!this._map) return;
+        // Alte Tile-Layer entfernen
+        this._map.eachLayer(layer => {
+            if (layer instanceof L.TileLayer) this._map.removeLayer(layer);
+        });
+
+        const theme = document.documentElement.getAttribute('data-theme') || 'dark';
+        const tileUrl = theme === 'dark'
+            ? 'https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png'
+            : 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
+        const attribution = theme === 'dark'
+            ? '&copy; <a href="https://www.openstreetmap.org/copyright">OSM</a> &copy; <a href="https://carto.com/">CARTO</a>'
+            : '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>';
+
+        L.tileLayer(tileUrl, { attribution, maxZoom: 18 }).addTo(this._map);
+    },
+
+    updateMapTheme() {
+        this._applyMapTiles();
+    },
+
+    invalidateMap() {
+        if (this._map) this._map.invalidateSize();
+    },
+
    /**
     * HTML escapen.
     */
--- a/src/static/js/layout.js
+++ b/src/static/js/layout.js
@@ -14,6 +14,7 @@ const LayoutManager = {
        { id: 'faktencheck', x: 6, y: 0, w: 6,  h: 4, minW: 4, minH: 4 },
        { id: 'quellen',     x: 0, y: 4, w: 12, h: 2, minW: 6, minH: 2 },
        { id: 'timeline',    x: 0, y: 5, w: 12, h: 4, minW: 6, minH: 4 },
+        { id: 'karte',       x: 0, y: 9, w: 12, h: 4, minW: 6, minH: 3 },
    ],

    TILE_MAP: {
@@ -21,6 +22,7 @@ const LayoutManager = {
        faktencheck: '.incident-analysis-factcheck',
        quellen:     '.source-overview-card',
        timeline:    '.timeline-card',
+        karte:       '.map-card',
    },

    init() {
@@ -44,7 +46,11 @@ const LayoutManager = {
            this._applyLayout(saved);
        }

-        this._grid.on('change', () => this._debouncedSave());
+        this._grid.on('change', () => {
+            this._debouncedSave();
+            // Leaflet-Map bei Resize invalidieren
+            if (typeof UI !== 'undefined') UI.invalidateMap();
+        });

        const toolbar = document.getElementById('layout-toolbar');
        if (toolbar) toolbar.style.display = 'flex';