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

GL-Cluster: weißes Kategorie-Icon mittig auf Cluster-Kreis (clsym-Layer + cli-Icon-Variante)

Browse source 
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:
rene 2026-06-05 10:47:36 +02:00
parent 2ccf75e076
commit d447de2b8d
6 changed files with 43 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -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);
});
},