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

MapLibre: GL als Staging-Default + Feinschliff (Cluster-Zahlen, Theme-Robustheit)

Browse source 
- _useGL: Staging default-AN (Prod aus, ?mapgl=0 überschreibt) → Breitentest
- Cluster zeigen ZAHL (point_count) statt Icon (Glyphs vorhanden)
- Theme-Wechsel: Wetter-Raster + Rec-Track nach setStyle neu anlegen; Click-Handler nur einmal binden (keine doppelten Popups)
This commit is contained in:
rene 2026-06-05 11:26:55 +02:00
parent 425f99effb
commit 3523a44a0b
7 changed files with 55 additions and 32 deletions
Download patch file Download diff file Expand all files Collapse all files

37
backend/static/js/map-gl-markers.js
View file

@ -14,6 +14,7 @@
var _onClick = null; // (props, key) -> true = Klick behandelt, Popup unterdrücken
var _activePopup = null;
var _dangerKeys = [];
var _clickBound = {}; // Click/Hover-Handler pro Kategorie nur EINMAL binden
function _empty() { return { type: 'FeatureCollection', features: [] }; }
@ -112,27 +113,37 @@
} });
}
if (!_map.getLayer('clsym-' + key)) {
// Weißes Kategorie-Icon mittig auf dem Cluster-Kreis (Symbol für den Cluster).
// Anzahl als weiße Zahl mittig auf dem Cluster (braucht Glyphs aus dem Style).
_map.addLayer({ id: 'clsym-' + key, type: 'symbol', source: src, filter: ['has', 'point_count'],
layout: {
'icon-image': 'cli-' + key, 'icon-allow-overlap': true, 'icon-ignore-placement': true,
'icon-size': ['step', ['get', 'point_count'], 0.5, 10, 0.62, 50, 0.78],
} });
'text-field': ['get', 'point_count_abbreviated'],
'text-font': ['Open Sans Regular'],
'text-size': ['step', ['get', 'point_count'], 12, 100, 14, 1000, 16],
'text-allow-overlap': true, 'text-ignore-placement': true,
},
paint: { 'text-color': '#ffffff', 'text-halo-color': 'rgba(52,68,36,0.55)', 'text-halo-width': 1 } });
}
if (!_map.getLayer('pt-' + key)) {
_map.addLayer({ id: 'pt-' + key, type: 'symbol', source: src, filter: ['!', ['has', 'point_count']],
layout: { 'icon-image': 'poi-' + key, 'icon-allow-overlap': true, 'icon-ignore-placement': true, 'icon-size': 0.9 } });
}
// Click: Einzel-POI → Popup; Cluster → reinzoomen
_map.on('click', 'pt-' + key, function (e) { _onPoiClick(e, key); });
_map.on('click', 'cl-' + key, function (e) {
var f = e.features[0];
_map.getSource(src).getClusterExpansionZoom(f.properties.cluster_id, function (err, z) {
if (!err) _map.easeTo({ center: f.geometry.coordinates, zoom: z });
// Click/Hover NUR EINMAL binden (Handler überleben setStyle/Theme-Wechsel,
// sind an die Layer-ID gebunden → sonst doppelte Popups nach Theme-Switch).
if (!_clickBound[key]) {
_clickBound[key] = true;
_map.on('click', 'pt-' + key, function (e) { _onPoiClick(e, key); });
_map.on('click', 'cl-' + key, function (e) {
var f = e.features[0];
var s = _map.getSource('poi-' + key);
if (s && s.getClusterExpansionZoom) {
s.getClusterExpansionZoom(f.properties.cluster_id, function (err, z) {
if (!err) _map.easeTo({ center: f.geometry.coordinates, zoom: z });
});
}
});
});
_map.on('mouseenter', 'pt-' + key, function () { _map.getCanvas().style.cursor = 'pointer'; });
_map.on('mouseleave', 'pt-' + key, function () { _map.getCanvas().style.cursor = ''; });
_map.on('mouseenter', 'pt-' + key, function () { _map.getCanvas().style.cursor = 'pointer'; });
_map.on('mouseleave', 'pt-' + key, function () { _map.getCanvas().style.cursor = ''; });
}
});
// Danger-Radius-Layer (poison/giftkoeder), unter den Markern.