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>

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.
      */