rene/banyaro
1
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source 
- 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
This commit is contained in:
rene 2026-06-05 08:28:11 +02:00
parent b2262a8e86
commit 647aa684db
7 changed files with 77 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

60
backend/static/js/pages/map.js
View file

@ -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 : '';
}