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/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';