MapLibre-Port Runde 2: GL-Marker-Subsystem (map-gl-markers.js) + headless Test-Harness
Eigenständiges Modul: per-Kategorie GeoJSON-Cluster, rasterisierte Phosphor-Icons, Danger-Polygone, Sichtbarkeit, Click→Popup. /maplibre-markers-test zum headless-Verifizieren VOR dem Einbau in map.js (auth-gated).
This commit is contained in:
parent
63c9be68c6
commit
11922c1d22
4 changed files with 289 additions and 0 deletions
|
|
@ -447,6 +447,12 @@ async def maplibre_perf_test():
|
|||
# Wegwerf-Perf-Test: MapLibre GPU + 600 Cluster-Marker auf DACH-Basemap (Handy-Test).
|
||||
return FileResponse(os.path.join(STATIC_DIR, "maplibre-perf-test.html"), media_type="text/html")
|
||||
|
||||
|
||||
@app.get("/maplibre-markers-test")
|
||||
async def maplibre_markers_test():
|
||||
# Headless-Proof für map-gl-markers.js (Cluster/Icons/Danger/Toggle/Popup, ohne Auth).
|
||||
return FileResponse(os.path.join(STATIC_DIR, "maplibre-markers-test.html"), media_type="text/html")
|
||||
|
||||
# User-generierte Medien (Fotos aus Tagebuch, Giftköder-Alarm, etc.)
|
||||
MEDIA_DIR = os.getenv("MEDIA_DIR", "/data/media")
|
||||
os.makedirs(MEDIA_DIR, exist_ok=True)
|
||||
|
|
|
|||
191
backend/static/js/map-gl-markers.js
Normal file
191
backend/static/js/map-gl-markers.js
Normal file
|
|
@ -0,0 +1,191 @@
|
|||
// GL-Marker-Subsystem für die zentrale Karte (MapLibre). Eigenständig + headless
|
||||
// testbar, BEVOR es in map.js verdrahtet wird. Pro Kategorie eine GeoJSON-Source mit
|
||||
// cluster:true → Cluster-Kreise (circle, GPU) + Einzel-POIs (symbol mit Phosphor-Icon).
|
||||
// Faithful zum Leaflet-Look: Kategorie-Farbe + weißes Phosphor-Icon auf Kreis.
|
||||
// Cluster-ZAHLEN brauchen Glyphs → später (Größe kodiert Dichte). Danger-Radien als Polygon.
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
var _map = null;
|
||||
var _types = {}; // { key: { color, iconName, danger } }
|
||||
var _dangerRadiusM = 100;
|
||||
var _popupHTML = null; // (props, key) -> htmlString
|
||||
var _popupWire = null; // (props, key, closeFn) -> void
|
||||
var _activePopup = null;
|
||||
var _dangerKeys = [];
|
||||
|
||||
function _empty() { return { type: 'FeatureCollection', features: [] }; }
|
||||
|
||||
// POIs ({lat,lon,...}) → GeoJSON-Features ([lng,lat] + flache Properties).
|
||||
function _toFeatures(pois) {
|
||||
return {
|
||||
type: 'FeatureCollection',
|
||||
features: (pois || []).filter(function (p) { return p && p.lat != null && p.lon != null; })
|
||||
.map(function (p) {
|
||||
var props = {};
|
||||
Object.keys(p).forEach(function (k) {
|
||||
var v = p[k];
|
||||
if (v != null && typeof v !== 'object') props[k] = v;
|
||||
});
|
||||
return { type: 'Feature', properties: props, geometry: { type: 'Point', coordinates: [p.lon, p.lat] } };
|
||||
}),
|
||||
};
|
||||
}
|
||||
|
||||
// Kreis-Polygon (Meter-genau) für Danger-Radius.
|
||||
function _circlePolygon(lon, lat, radiusM, steps) {
|
||||
steps = steps || 36;
|
||||
var coords = [], r = radiusM / 6378137, latR = lat * Math.PI / 180, lonR = lon * Math.PI / 180;
|
||||
for (var i = 0; i <= steps; i++) {
|
||||
var brng = i / steps * 2 * Math.PI;
|
||||
var lat2 = Math.asin(Math.sin(latR) * Math.cos(r) + Math.cos(latR) * Math.sin(r) * Math.cos(brng));
|
||||
var lon2 = lonR + Math.atan2(Math.sin(brng) * Math.sin(r) * Math.cos(latR), Math.cos(r) - Math.sin(latR) * Math.sin(lat2));
|
||||
coords.push([lon2 * 180 / Math.PI, lat2 * 180 / Math.PI]);
|
||||
}
|
||||
return { type: 'Polygon', coordinates: [coords] };
|
||||
}
|
||||
|
||||
// Phosphor-Icon (weiß) auf farbigem Kreis → ImageData für map.addImage.
|
||||
function _iconImage(spriteDoc, iconName, color) {
|
||||
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);
|
||||
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 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.onerror = function () { base(); resolve(x.getImageData(0, 0, s, s)); };
|
||||
im.src = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(svg);
|
||||
});
|
||||
}
|
||||
|
||||
function _buildIcons() {
|
||||
var doc = null;
|
||||
return fetch('/icons/phosphor.svg').then(function (r) { return r.text(); })
|
||||
.then(function (txt) { doc = new DOMParser().parseFromString(txt, 'image/svg+xml'); })
|
||||
.catch(function () { doc = null; })
|
||||
.then(function () {
|
||||
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 });
|
||||
});
|
||||
});
|
||||
}, Promise.resolve());
|
||||
});
|
||||
}
|
||||
|
||||
function _addCategoryLayers() {
|
||||
Object.keys(_types).forEach(function (key) {
|
||||
var src = 'poi-' + key, color = _types[key].color;
|
||||
if (!_map.getSource(src)) {
|
||||
_map.addSource(src, { type: 'geojson', data: _empty(), cluster: true, clusterRadius: 50, clusterMaxZoom: 16 });
|
||||
}
|
||||
if (!_map.getLayer('cl-' + key)) {
|
||||
_map.addLayer({ id: 'cl-' + key, type: 'circle', source: src, filter: ['has', 'point_count'],
|
||||
paint: {
|
||||
'circle-color': color, 'circle-opacity': 0.92,
|
||||
'circle-stroke-color': 'rgba(52,68,36,0.65)', 'circle-stroke-width': 2,
|
||||
'circle-radius': ['step', ['get', 'point_count'], 14, 10, 18, 50, 24],
|
||||
} });
|
||||
}
|
||||
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 });
|
||||
});
|
||||
});
|
||||
_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.
|
||||
if (_dangerKeys.length && !_map.getSource('danger')) {
|
||||
_map.addSource('danger', { type: 'geojson', data: _empty() });
|
||||
var firstSymbol = 'cl-' + Object.keys(_types)[0];
|
||||
_map.addLayer({ id: 'danger-fill', type: 'fill', source: 'danger',
|
||||
paint: { 'fill-color': '#DC2626', 'fill-opacity': 0.12 } },
|
||||
_map.getLayer(firstSymbol) ? firstSymbol : undefined);
|
||||
_map.addLayer({ id: 'danger-line', type: 'line', source: 'danger',
|
||||
paint: { 'line-color': '#DC2626', 'line-width': 2, 'line-opacity': 0.7 } },
|
||||
_map.getLayer(firstSymbol) ? firstSymbol : undefined);
|
||||
}
|
||||
}
|
||||
|
||||
function _onPoiClick(e, key) {
|
||||
if (!e.features || !e.features.length) return;
|
||||
var f = e.features[0];
|
||||
var props = f.properties || {};
|
||||
if (_activePopup) { _activePopup.remove(); _activePopup = null; }
|
||||
var html = _popupHTML ? _popupHTML(props, key) : ('<b>' + (props.name || key) + '</b>');
|
||||
if (!html) return;
|
||||
_activePopup = new maplibregl.Popup({ maxWidth: '260px' })
|
||||
.setLngLat(f.geometry.coordinates).setHTML(html).addTo(_map);
|
||||
if (_popupWire) {
|
||||
var pop = _activePopup;
|
||||
setTimeout(function () { _popupWire(props, key, function () { pop.remove(); }); }, 50);
|
||||
}
|
||||
}
|
||||
|
||||
// Danger-Source aus allen aktuell gesetzten Danger-POIs neu aufbauen.
|
||||
var _dangerPois = {}; // { key: [pois] }
|
||||
function _refreshDanger() {
|
||||
if (!_map.getSource('danger')) return;
|
||||
var feats = [];
|
||||
_dangerKeys.forEach(function (k) {
|
||||
(_dangerPois[k] || []).forEach(function (p) {
|
||||
if (p.lat != null && p.lon != null) feats.push({ type: 'Feature', properties: {}, geometry: _circlePolygon(p.lon, p.lat, _dangerRadiusM) });
|
||||
});
|
||||
});
|
||||
_map.getSource('danger').setData({ type: 'FeatureCollection', features: feats });
|
||||
}
|
||||
|
||||
// ---- Öffentliche API ----
|
||||
var API = {
|
||||
// init(map, { types, dangerKeys, dangerRadiusM, popupHTML, popupWire }) → Promise (Icons geladen)
|
||||
init: function (map, opts) {
|
||||
_map = map; opts = opts || {};
|
||||
_types = opts.types || {};
|
||||
_dangerKeys = opts.dangerKeys || [];
|
||||
_dangerRadiusM = opts.dangerRadiusM || 100;
|
||||
_popupHTML = opts.popupHTML || null;
|
||||
_popupWire = opts.popupWire || null;
|
||||
_addCategoryLayers();
|
||||
return _buildIcons();
|
||||
},
|
||||
// POIs einer Kategorie setzen (ersetzt alle).
|
||||
setLayer: function (key, pois) {
|
||||
var src = _map && _map.getSource('poi-' + key);
|
||||
if (!src) return;
|
||||
src.setData(_toFeatures(pois));
|
||||
if (_dangerKeys.indexOf(key) !== -1) { _dangerPois[key] = pois || []; _refreshDanger(); }
|
||||
},
|
||||
clear: function (key) { API.setLayer(key, []); },
|
||||
setVisible: function (key, on) {
|
||||
if (!_map) return;
|
||||
var vis = on ? 'visible' : 'none';
|
||||
['cl-' + key, 'pt-' + key].forEach(function (id) {
|
||||
if (_map.getLayer(id)) _map.setLayoutProperty(id, 'visibility', vis);
|
||||
});
|
||||
},
|
||||
ready: function () { return !!(_map && _map.getSource('poi-' + Object.keys(_types)[0])); },
|
||||
};
|
||||
|
||||
window.MapGLMarkers = API;
|
||||
})();
|
||||
64
backend/static/js/maplibre-markers-test.js
Normal file
64
backend/static/js/maplibre-markers-test.js
Normal file
|
|
@ -0,0 +1,64 @@
|
|||
// Headless-Proof für map-gl-markers.js: 4 Kategorien, ~490 Fake-Marker, Cluster,
|
||||
// Phosphor-Icons, Danger-Radien, Sichtbarkeits-Toggle, Popups — alles ohne App/Auth.
|
||||
(function () {
|
||||
'use strict';
|
||||
var st = document.getElementById('status');
|
||||
function set(t) { if (st) st.textContent = t; }
|
||||
|
||||
var TYPES = {
|
||||
restaurant: { color: '#F97316', iconName: 'fork-knife' },
|
||||
freilauf: { color: '#22C55E', iconName: 'dog' },
|
||||
tierarzt: { color: '#EF4444', iconName: 'first-aid' },
|
||||
poison: { color: '#DC2626', iconName: 'skull', danger: true },
|
||||
};
|
||||
var COUNTS = { restaurant: 250, freilauf: 150, tierarzt: 80, poison: 8 };
|
||||
|
||||
function genPois(n, seedStart) {
|
||||
var feats = [], seed = seedStart;
|
||||
function rnd() { seed = (seed * 9301 + 49297) % 233280; return seed / 233280; }
|
||||
for (var i = 0; i < n; i++) {
|
||||
feats.push({ lat: 48.03 + rnd() * 0.24, lon: 11.40 + rnd() * 0.36, name: 'POI ' + i, source: 'osm' });
|
||||
}
|
||||
return feats;
|
||||
}
|
||||
|
||||
try {
|
||||
var proto = new pmtiles.Protocol();
|
||||
maplibregl.addProtocol('pmtiles', proto.tile);
|
||||
var map = new maplibregl.Map({
|
||||
container: 'map', style: MapGLStyle.build({ dark: false }),
|
||||
center: [11.576, 48.137], zoom: 12, dragRotate: false,
|
||||
});
|
||||
map.addControl(new maplibregl.NavigationControl({ showCompass: false }), 'top-left');
|
||||
map.addControl(new maplibregl.ScaleControl());
|
||||
|
||||
map.on('error', function (e) { set('⚠️ ' + (e && e.error ? e.error.message : 'Fehler')); if (e && e.error) console.error(e.error); });
|
||||
|
||||
map.on('load', function () {
|
||||
MapGLMarkers.init(map, {
|
||||
types: TYPES, dangerKeys: ['poison'], dangerRadiusM: 100,
|
||||
popupHTML: function (p, key) { return '<b>' + (p.name || key) + '</b><br><small>' + key + '</small><br><button id="mp-x">OK</button>'; },
|
||||
popupWire: function (p, key, close) { document.getElementById('mp-x') && document.getElementById('mp-x').addEventListener('click', close); },
|
||||
}).then(function () {
|
||||
var seeds = { restaurant: 11, freilauf: 77, tierarzt: 123, poison: 200 };
|
||||
Object.keys(TYPES).forEach(function (k) { MapGLMarkers.setLayer(k, genPois(COUNTS[k], seeds[k])); });
|
||||
// Toggle-Buttons
|
||||
var box = document.getElementById('toggles');
|
||||
Object.keys(TYPES).forEach(function (k) {
|
||||
var b = document.createElement('button'); b.textContent = k; b.dataset.on = '1';
|
||||
b.style.borderColor = TYPES[k].color;
|
||||
b.addEventListener('click', function () {
|
||||
var on = b.dataset.on === '1' ? false : true;
|
||||
b.dataset.on = on ? '1' : '0'; b.classList.toggle('off', !on);
|
||||
MapGLMarkers.setVisible(k, on);
|
||||
});
|
||||
box.appendChild(b);
|
||||
});
|
||||
var total = COUNTS.restaurant + COUNTS.freilauf + COUNTS.tierarzt + COUNTS.poison;
|
||||
set('✅ ' + total + ' Marker (4 Kat.) — Cluster + Phosphor-Icons + Danger-Radius + Toggle + Popup');
|
||||
}).catch(function (e) { set('❌ init: ' + (e && e.message ? e.message : e)); console.error(e); });
|
||||
});
|
||||
} catch (e) {
|
||||
set('❌ ' + (e && e.message ? e.message : e));
|
||||
}
|
||||
})();
|
||||
28
backend/static/maplibre-markers-test.html
Normal file
28
backend/static/maplibre-markers-test.html
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
|
||||
<title>Ban Yaro — GL-Marker-Subsystem-Test</title>
|
||||
<link rel="stylesheet" href="/js/vendor/maplibre-gl.css">
|
||||
<style>
|
||||
html,body{margin:0;height:100%}
|
||||
#map{position:absolute;inset:0}
|
||||
#hud{position:absolute;top:10px;left:54px;z-index:5;background:rgba(255,255,255,.92);
|
||||
padding:8px 12px;border-radius:8px;font:13px system-ui,sans-serif;box-shadow:0 1px 6px rgba(0,0,0,.2);max-width:78vw}
|
||||
#toggles{position:absolute;bottom:14px;left:10px;z-index:5;display:flex;gap:6px;flex-wrap:wrap}
|
||||
#toggles button{font:12px system-ui;padding:6px 10px;border-radius:14px;border:1px solid #bbb;background:#fff}
|
||||
#toggles button.off{opacity:.45}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="map"></div>
|
||||
<div id="hud"><b>GL-Marker-Test</b><br><span id="status">lädt…</span></div>
|
||||
<div id="toggles"></div>
|
||||
<script src="/js/vendor/maplibre-gl.js"></script>
|
||||
<script src="/js/vendor/pmtiles.js"></script>
|
||||
<script src="/js/map-gl-style.js"></script>
|
||||
<script src="/js/map-gl-markers.js"></script>
|
||||
<script src="/js/maplibre-markers-test.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue