GL-Cluster: weißes Kategorie-Icon mittig auf Cluster-Kreis (clsym-Layer + cli-Icon-Variante)
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.
This commit is contained in:
parent
2ccf75e076
commit
d447de2b8d
6 changed files with 43 additions and 24 deletions
2
VERSION
2
VERSION
|
|
@ -1 +1 @@
|
|||
1183
|
||||
1184
|
||||
|
|
@ -86,14 +86,14 @@
|
|||
<title>Ban Yaro</title>
|
||||
|
||||
<!-- Theme + theme-color Statusleiste vor CSS setzen -->
|
||||
<script src="/js/boot-early.js?v=1183"></script>
|
||||
<script src="/js/boot-early.js?v=1184"></script>
|
||||
|
||||
<!-- CSS: Reihenfolge ist wichtig — ?v= zwingt Browser zur Neuladung -->
|
||||
<link rel="stylesheet" href="/css/design-system.css?v=1183">
|
||||
<link rel="stylesheet" href="/css/layout.css?v=1183">
|
||||
<link rel="stylesheet" href="/css/components.css?v=1183">
|
||||
<link rel="stylesheet" href="/css/utilities.css?v=1183">
|
||||
<link rel="stylesheet" href="/css/lists.css?v=1183">
|
||||
<link rel="stylesheet" href="/css/design-system.css?v=1184">
|
||||
<link rel="stylesheet" href="/css/layout.css?v=1184">
|
||||
<link rel="stylesheet" href="/css/components.css?v=1184">
|
||||
<link rel="stylesheet" href="/css/utilities.css?v=1184">
|
||||
<link rel="stylesheet" href="/css/lists.css?v=1184">
|
||||
</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=1183"></script>
|
||||
<script src="/js/ui.js?v=1183"></script>
|
||||
<script src="/js/app.js?v=1183"></script>
|
||||
<script src="/js/worlds.js?v=1183"></script>
|
||||
<script src="/js/offline-indicator.js?v=1183"></script>
|
||||
<script src="/js/api.js?v=1184"></script>
|
||||
<script src="/js/ui.js?v=1184"></script>
|
||||
<script src="/js/app.js?v=1184"></script>
|
||||
<script src="/js/worlds.js?v=1184"></script>
|
||||
<script src="/js/offline-indicator.js?v=1184"></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=1183"></script>
|
||||
<script src="/js/boot.js?v=1184"></script>
|
||||
|
||||
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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 = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="' + vb + '" fill="white">' + sym.innerHTML + '</svg>';
|
||||
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);
|
||||
});
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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=1183"></script>
|
||||
<script src="/js/landing-init.js?v=1184"></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">
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue