Vektor-Basemap: zentrale Karte (pages/map.js) integrieren — sie umging UI.map.create

- map.js _addBasemap: Vektor-Layer (Flag) mit Raster-Fallback, eigener Basemap-Code
- Theme-Wechsel baut Vektor-Layer mit passendem Flavor neu (kein CSS-Filter bei Vektor)
- ui.js: UI.map.vectorEnabled()/vectorLayer() exponiert für Karten mit eigenem Layer-Mgmt
- APP_VER bump

backend/static/js/app.js

@@ -3,7 +3,7 @@
    Router, State-Management, Navigation, Initialisierung.
    ============================================================ */
 
-const APP_VER     = '1175'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
+const APP_VER     = '1176'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
 const APP_VERSION = '1.6.0'; // ← semantische Version, wird bei make release gesetzt
 window.APP_VER     = APP_VER;       // global verfügbar für andere Module (z.B. offline-indicator)
 window.APP_VERSION = APP_VERSION;

backend/static/js/pages/map.js

@@ -15,6 +15,7 @@ window.Page_map = (() => {
   let _placingMarker   = false;
   let _tempMarker      = null;
   let _tileLayer       = null;
+  let _usingVector     = false;   // true wenn Vektor-Basemap (PMTiles) statt OSM-Raster
   let _themeObserver   = null;
 
   // Standort-Tracking
@@ -633,16 +634,11 @@ window.Page_map = (() => {
     if (!_userPos) {
       _frankfurtTimer = setTimeout(() => _map.flyTo(center, 14, { duration: 2.5 }), 1200);
     }
-    _tileLayer = _buildTileLayer();
-    _tileLayer.addTo(_map);
-
-    // Sofort Dark-Filter anwenden wenn nötig (nach Tile-Load)
-    _tileLayer.on('load', _applyTileTheme);
-    _applyTileTheme();
-    // Theme-Wechsel → Filter aktualisieren
-    _themeObserver = new MutationObserver(() => _applyTileTheme());
+    _addBasemap();
+    // Theme-Wechsel → Basemap aktualisieren (Vektor: Layer neu bauen / Raster: CSS-Filter)
+    _themeObserver = new MutationObserver(() => _onThemeChange());
     _themeObserver.observe(document.documentElement, { attributes: true, attributeFilter: ['data-theme'] });
-    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', _applyTileTheme);
+    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', _onThemeChange);
 
     setTimeout(() => _map.invalidateSize(), 100);
     setTimeout(() => _map.invalidateSize(), 600);
@@ -742,8 +738,52 @@ window.Page_map = (() => {
     return L.tileLayer(_OSM_URL, { maxZoom: 19 });
   }
 
+  // Basemap hinzufügen: Vektor-PMTiles (Feature-Flag) mit sauberem Raster-Fallback.
+  // Marker/Cluster/Overlays/Scan bleiben in beiden Fällen identisch.
+  function _addBasemap() {
+    const _addRaster = () => {
+      _usingVector = false;
+      _tileLayer = _buildTileLayer();
+      _tileLayer.addTo(_map);
+      _tileLayer.on('load', _applyTileTheme);
+      _applyTileTheme();
+    };
+    if (window.UI && UI.map.vectorEnabled && UI.map.vectorEnabled()) {
+      UI.map.vectorLayer({ dark: _isDarkMode() }).then(layer => {
+        if (!_map) return;
+        _usingVector = true;
+        _tileLayer = layer;
+        layer.addTo(_map);
+        _applyTileTheme();   // no-op bei Vektor (Theme steckt in den Tile-Farben)
+        if (!_map._byVectorAttr) {
+          _map._byVectorAttr = L.control.attribution({ prefix: false }).addTo(_map)
+            .addAttribution('© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors');
+        }
+      }).catch(err => {
+        console.warn('Vektor-Basemap nicht verfügbar — Fallback auf Raster:', err);
+        if (_map) _addRaster();
+      });
+    } else {
+      _addRaster();
+    }
+  }
+
+  // Theme-Wechsel: Vektor → Layer mit passendem Flavor neu bauen; Raster → CSS-Filter.
+  function _onThemeChange() {
+    if (_usingVector && _map && _tileLayer) {
+      UI.map.vectorLayer({ dark: _isDarkMode() }).then(layer => {
+        if (!_map) return;
+        if (_tileLayer) _map.removeLayer(_tileLayer);
+        _tileLayer = layer;
+        layer.addTo(_map);
+      }).catch(() => {});
+    } else {
+      _applyTileTheme();
+    }
+  }
+
   function _applyTileTheme() {
-    if (!_map) return;
+    if (!_map || _usingVector) return;   // bei Vektor kein CSS-Filter (würde doppelt abdunkeln)
     const tilePaneEl = _map.getPane('tilePane');
     if (tilePaneEl) tilePaneEl.style.filter = _isDarkMode() ? _DARK_FILTER : '';
   }

backend/static/js/ui.js

@@ -491,6 +491,17 @@ const UI = (() => {
       });
       return L.marker([lat, lon], { icon });
     },
+
+    // Feature-Flag-Status der Vektor-Basemap (für Karten, die ihren Basemap-Layer
+    // selbst verwalten, z.B. pages/map.js).
+    vectorEnabled() { return _vectorMapEnabled(); },
+
+    // Lädt protomaps-leaflet + Regeln und liefert den fertigen Vektor-Basemap-Layer
+    // (Promise). dark=true → dunkles Theme.
+    async vectorLayer(opts = {}) {
+      await loadProtomaps();
+      return MapVector.basemapLayer(opts);
+    },
   };
 
   // ----------------------------------------------------------