From d447de2b8d921a686892eccd283cec294fdce9b3 Mon Sep 17 00:00:00 2001 From: rene Date: Fri, 5 Jun 2026 10:47:36 +0200 Subject: [PATCH] =?UTF-8?q?GL-Cluster:=20wei=C3=9Fes=20Kategorie-Icon=20mi?= =?UTF-8?q?ttig=20auf=20Cluster-Kreis=20(clsym-Layer=20+=20cli-Icon-Varian?= =?UTF-8?q?te)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit René: 'geclusterte Marker haben kein Symbol'. Jeder Cluster ist genau eine Kategorie → weißes Phosphor-Icon in der Cluster-Mitte (icon-size skaliert mit point_count). Keine Glyphs nötig. --- VERSION | 2 +- backend/static/index.html | 24 ++++++++++---------- backend/static/js/app.js | 2 +- backend/static/js/map-gl-markers.js | 35 ++++++++++++++++++++++------- backend/static/landing.html | 2 +- backend/static/sw.js | 2 +- 6 files changed, 43 insertions(+), 24 deletions(-) diff --git a/VERSION b/VERSION index 0e129d2..6030e96 100644 --- a/VERSION +++ b/VERSION @@ -1 +1 @@ -1183 \ No newline at end of file +1184 \ No newline at end of file diff --git a/backend/static/index.html b/backend/static/index.html index 23fb7a4..3a63c16 100644 --- a/backend/static/index.html +++ b/backend/static/index.html @@ -86,14 +86,14 @@ Ban Yaro - + - - - - - + + + + + @@ -617,11 +617,11 @@ - - - - - + + + + + @@ -631,7 +631,7 @@ - + diff --git a/backend/static/js/app.js b/backend/static/js/app.js index f05bd5e..2f761f2 100644 --- a/backend/static/js/app.js +++ b/backend/static/js/app.js @@ -3,7 +3,7 @@ Router, State-Management, Navigation, Initialisierung. ============================================================ */ -const APP_VER = '1183'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen +const APP_VER = '1184'; // ← 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; diff --git a/backend/static/js/map-gl-markers.js b/backend/static/js/map-gl-markers.js index defa7a8..789d433 100644 --- a/backend/static/js/map-gl-markers.js +++ b/backend/static/js/map-gl-markers.js @@ -46,23 +46,26 @@ return { type: 'Polygon', coordinates: [coords] }; } - // Phosphor-Icon (weiß) auf farbigem Kreis → ImageData für map.addImage. - function _iconImage(spriteDoc, iconName, color) { + // Phosphor-Icon → ImageData. iconOnly=false: weißes Icon auf farbigem Kreis (Marker). + // iconOnly=true: nur weißes Icon, transparent + größer (für Cluster-Mitte). + function _iconImage(spriteDoc, iconName, color, iconOnly) { return new Promise(function (resolve) { var s = 64, c = document.createElement('canvas'); c.width = c.height = s; var x = c.getContext('2d'); function base() { x.clearRect(0, 0, s, s); + if (iconOnly) return; x.beginPath(); x.arc(s / 2, s / 2, s / 2 - 5, 0, Math.PI * 2); x.fillStyle = color; x.fill(); x.lineWidth = 4; x.strokeStyle = 'rgba(52,68,36,0.55)'; x.stroke(); } + var ic = s * (iconOnly ? 0.66 : 0.52); var sym = spriteDoc && iconName && spriteDoc.getElementById(iconName); if (!sym) { base(); resolve(x.getImageData(0, 0, s, s)); return; } var vb = sym.getAttribute('viewBox') || '0 0 256 256'; var svg = '' + sym.innerHTML + ''; var im = new Image(); - im.onload = function () { base(); var ic = s * 0.52; x.drawImage(im, (s - ic) / 2, (s - ic) / 2, ic, ic); resolve(x.getImageData(0, 0, s, s)); }; + im.onload = function () { base(); x.drawImage(im, (s - ic) / 2, (s - ic) / 2, ic, ic); resolve(x.getImageData(0, 0, s, s)); }; im.onerror = function () { base(); resolve(x.getImageData(0, 0, s, s)); }; im.src = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(svg); }); @@ -77,10 +80,18 @@ var keys = Object.keys(_types); return keys.reduce(function (chain, key) { return chain.then(function () { - if (_map.hasImage('poi-' + key)) return; - return _iconImage(doc, _types[key].iconName, _types[key].color).then(function (img) { - if (!_map.hasImage('poi-' + key)) _map.addImage('poi-' + key, img, { pixelRatio: 2 }); - }); + var p = Promise.resolve(); + // Marker-Icon (Kreis + weißes Icon) + if (!_map.hasImage('poi-' + key)) { + p = p.then(function () { return _iconImage(doc, _types[key].iconName, _types[key].color, false); }) + .then(function (img) { if (!_map.hasImage('poi-' + key)) _map.addImage('poi-' + key, img, { pixelRatio: 2 }); }); + } + // Cluster-Icon (nur weißes Icon, für die Cluster-Mitte) + if (!_map.hasImage('cli-' + key)) { + p = p.then(function () { return _iconImage(doc, _types[key].iconName, _types[key].color, true); }) + .then(function (img) { if (!_map.hasImage('cli-' + key)) _map.addImage('cli-' + key, img, { pixelRatio: 2 }); }); + } + return p; }); }, Promise.resolve()); }); @@ -100,6 +111,14 @@ 'circle-radius': ['step', ['get', 'point_count'], 14, 10, 18, 50, 24], } }); } + if (!_map.getLayer('clsym-' + key)) { + // Weißes Kategorie-Icon mittig auf dem Cluster-Kreis (Symbol für den Cluster). + _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], + } }); + } 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 } }); @@ -183,7 +202,7 @@ setVisible: function (key, on) { if (!_map) return; var vis = on ? 'visible' : 'none'; - ['cl-' + key, 'pt-' + key].forEach(function (id) { + ['cl-' + key, 'clsym-' + key, 'pt-' + key].forEach(function (id) { if (_map.getLayer(id)) _map.setLayoutProperty(id, 'visibility', vis); }); }, diff --git a/backend/static/landing.html b/backend/static/landing.html index 0f0d526..ae91cb4 100644 --- a/backend/static/landing.html +++ b/backend/static/landing.html @@ -4,7 +4,7 @@ - + Ban Yaro — Die Hunde-App für Deutschland, Österreich & Schweiz diff --git a/backend/static/sw.js b/backend/static/sw.js index a29220a..88fe40c 100644 --- a/backend/static/sw.js +++ b/backend/static/sw.js @@ -4,7 +4,7 @@ ============================================================ */ // ← EINZIGE Stelle für die Version — STATIC_ASSETS und CACHE_VERSION leiten sich ab -const VER = '1183'; +const VER = '1184'; const CACHE_VERSION = `by-v${VER}`; const CACHE_STATIC = `${CACHE_VERSION}-static`; const CACHE_TILES = 'ban-yaro-tiles-v1'; // bleibt über SW-Updates erhalten