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

2
VERSION
View file

@ -1 +1 @@
1188
1189

24
backend/static/index.html
View file

@ -86,14 +86,14 @@
<title>Ban Yaro</title>
<!-- Theme + theme-color Statusleiste vor CSS setzen -->
<script src="/js/boot-early.js?v=1188"></script>
<script src="/js/boot-early.js?v=1189"></script>
<!-- CSS: Reihenfolge ist wichtig — ?v= zwingt Browser zur Neuladung -->
<link rel="stylesheet" href="/css/design-system.css?v=1188">
<link rel="stylesheet" href="/css/layout.css?v=1188">
<link rel="stylesheet" href="/css/components.css?v=1188">
<link rel="stylesheet" href="/css/utilities.css?v=1188">
<link rel="stylesheet" href="/css/lists.css?v=1188">
<link rel="stylesheet" href="/css/design-system.css?v=1189">
<link rel="stylesheet" href="/css/layout.css?v=1189">
<link rel="stylesheet" href="/css/components.css?v=1189">
<link rel="stylesheet" href="/css/utilities.css?v=1189">
<link rel="stylesheet" href="/css/lists.css?v=1189">
</head>
<body>
@ -617,11 +617,11 @@
<div id="modal-container"></div>
<!-- JS: Reihenfolge ist wichtig — erst Basis, dann Features -->
<script src="/js/api.js?v=1188"></script>
<script src="/js/ui.js?v=1188"></script>
<script src="/js/app.js?v=1188"></script>
<script src="/js/worlds.js?v=1188"></script>
<script src="/js/offline-indicator.js?v=1188"></script>
<script src="/js/api.js?v=1189"></script>
<script src="/js/ui.js?v=1189"></script>
<script src="/js/app.js?v=1189"></script>
<script src="/js/worlds.js?v=1189"></script>
<script src="/js/offline-indicator.js?v=1189"></script>
<!-- Feature-Seiten werden lazy geladen -->
@ -631,7 +631,7 @@
<!-- Boot: Offline-Banner + SW-Registration (extrahiert für CSP) -->
<script src="/js/boot.js?v=1188"></script>
<script src="/js/boot.js?v=1189"></script>
</body>

2
backend/static/js/app.js
View file

@ -3,7 +3,7 @@
Router, State-Management, Navigation, Initialisierung.
============================================================ */
const APP_VER = '1188'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
const APP_VER = '1189'; // ← 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;

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.

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

@ -422,6 +422,8 @@ window.Page_map = (() => {
let _radarTimer = null;
let _tempLayer = null;
let _tempActive = false;
let _tempUrl = null; // GL: zum Re-Add nach Theme-Wechsel (setStyle löscht Raster-Layer)
let _tempMaxZoom = 18;
let _tempMarkers = [];
let _tempDebounce = null;
@ -466,7 +468,8 @@ window.Page_map = (() => {
btn?.classList.add('active');
try {
const cfg = await API.get('/weather/layer-tiles?layer=temp_new');
_tempLayer = _wxAddRaster('temp', cfg.url, 1.0, cfg.maxNativeZoom ?? 18);
_tempUrl = cfg.url; _tempMaxZoom = cfg.maxNativeZoom ?? 18;
_tempLayer = _wxAddRaster('temp', _tempUrl, 1.0, _tempMaxZoom);
_showTempLegend();
_mapOnMove(_debounceTempLabels);
await _loadTempLabels();
@ -650,12 +653,16 @@ window.Page_map = (() => {
// MapLibre-GL-Engine (zentrale Karte) — GPU/Worker, performant.
// Flag-gated; Raster-Leaflet bleibt Default. [lng,lat]-Reihenfolge!
// ==========================================================
// Flag: ?mapgl=1/0 → localStorage 'by_map_gl'. Default AUS (bis vollständig portiert).
// Flag: ?mapgl=1/0 → localStorage 'by_map_gl'. Default: auf Staging AN (Breitentest),
// auf Produktion AUS (bis Freigabe). Explizit per Flag überschreibbar.
function _useGL() {
try {
const u = new URLSearchParams(location.search);
if (u.has('mapgl')) localStorage.setItem('by_map_gl', u.get('mapgl') === '0' ? '0' : '1');
return localStorage.getItem('by_map_gl') === '1';
const flag = localStorage.getItem('by_map_gl');
if (flag === '1') return true;
if (flag === '0') return false;
return /(^|\.)staging\.banyaro\.app$/.test(location.hostname);
} catch (e) { return false; }
}
@ -808,9 +815,14 @@ window.Page_map = (() => {
_glLayersReady = false;
_map.setStyle(MapGLStyle.build({ dark: _isDarkMode() }));
// setStyle entfernt eigene Sources/Layer → nach Style-Load neu anlegen + Daten neu setzen.
// (DOM-basierte maplibregl.Marker — Standort/Temp-Pillen/Rec-Dot — überleben setStyle.)
_map.once('styledata', () => {
_initPoiLayersGL();
Object.keys(TYPEN).forEach(_glPushLayer);
// Wetter-Raster + Rec-Track waren Style-Layer → neu anlegen, falls aktiv.
if (_radarActive) _loadRadar();
if (_tempActive && _tempUrl) _tempLayer = _wxAddRaster('temp', _tempUrl, 1.0, _tempMaxZoom);
if (_recActive && _recTrack.length) _recTrackGL();
_scheduleOsmLoad();
});
}

2
backend/static/landing.html
View file

@ -4,7 +4,7 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="color-scheme" content="light dark">
<script src="/js/landing-init.js?v=1188"></script>
<script src="/js/landing-init.js?v=1189"></script>
<title>Ban Yaro — Die Hunde-App für Deutschland, Österreich & Schweiz</title>
<meta name="description" content="Ban Yaro: Die kostenlose All-in-One Hunde-App für DACH. Tagebuch, Giftköder-Alarm, Training mit KI, Forum, Wurfbörse, Stammbaum, Inzucht-Check — DSGVO-konform, offline-fähig, ohne App Store.">
<meta name="keywords" content="Hunde App, Hunde Community, Wurfbörse, Züchter, Welpen kaufen, Stammbaum Hund, Inzuchtkoeffizient, Hundezucht, Impfpass Hund, Giftköder Alarm, Gassi Community, Hundetraining App, Hunde Forum, Hunde KI, Hundefilm Datenbank, Welpen Marktplatz">

2
backend/static/sw.js
View file

@ -4,7 +4,7 @@
============================================================ */
// ← EINZIGE Stelle für die Version — STATIC_ASSETS und CACHE_VERSION leiten sich ab
const VER = '1188';
const VER = '1189';
const CACHE_VERSION = `by-v${VER}`;
const CACHE_STATIC = `${CACHE_VERSION}-static`;
const CACHE_TILES = 'ban-yaro-tiles-v1'; // bleibt über SW-Updates erhalten