From 5e354f7e8e3a5e4ca78fe23a64fe79030f518e3b Mon Sep 17 00:00:00 2001 From: rene Date: Fri, 5 Jun 2026 09:20:41 +0200 Subject: [PATCH 1/2] =?UTF-8?q?MapLibre-Migration=20M1:=20Geometrie-Style-?= =?UTF-8?q?Modul=20(MapGLStyle,=20Light+Dark,=20kein=20Glyph)=20f=C3=BCr?= =?UTF-8?q?=20zentrale=20Karte?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- backend/static/js/map-gl-style.js | 60 +++++++++++++++++++++++++++++++ 1 file changed, 60 insertions(+) create mode 100644 backend/static/js/map-gl-style.js diff --git a/backend/static/js/map-gl-style.js b/backend/static/js/map-gl-style.js new file mode 100644 index 0000000..b4fe7d5 --- /dev/null +++ b/backend/static/js/map-gl-style.js @@ -0,0 +1,60 @@ +// MapLibre-GL-Style für die zentrale Karte — gerendert aus unseren DACH-PMTiles +// (OpenMapTiles-Schema). GPU + Worker → performant auf dem Handy (Ziel der Migration). +// GEOMETRIE-ONLY (keine Symbol/Text-Layer) → KEINE Glyphs/Fonts nötig für den ersten +// Perf-Test. Labels (mit Glyph-Hosting) kommen in M3, wenn die Performance steht. +(function () { + 'use strict'; + + var TILES_FILE = 'dach.pmtiles'; + function tilesUrl() { return window.location.origin + '/tiles/' + TILES_FILE; } + + var THEMES = { + light: { + bg: '#f4f1ec', land: '#dce8c8', park: '#c8e6b0', water: '#a0c8f0', + road: '#ffffff', roadCasing: '#d9cfc2', building: '#e6ddcf', + buildingLine: '#d4cabb', boundary: '#b08ac0', + }, + dark: { + bg: '#1a1d21', land: '#222820', park: '#27331f', water: '#16242e', + road: '#3a4046', roadCasing: '#23282d', building: '#262b30', + buildingLine: '#31373d', boundary: '#7d5a8c', + }, + }; + + // Liefert ein MapLibre-Style-JSON (Version 8) ohne glyphs/sprite. + function build(opts) { + opts = opts || {}; + var t = THEMES[opts.dark ? 'dark' : 'light']; + return { + version: 8, + sources: { + by: { type: 'vector', url: 'pmtiles://' + tilesUrl() }, + }, + layers: [ + { id: 'bg', type: 'background', paint: { 'background-color': t.bg } }, + { id: 'landcover', type: 'fill', source: 'by', 'source-layer': 'landcover', + paint: { 'fill-color': t.land, 'fill-opacity': 0.55 } }, + { id: 'park', type: 'fill', source: 'by', 'source-layer': 'park', + paint: { 'fill-color': t.park, 'fill-opacity': 0.5 } }, + { id: 'water', type: 'fill', source: 'by', 'source-layer': 'water', + paint: { 'fill-color': t.water } }, + { id: 'waterway', type: 'line', source: 'by', 'source-layer': 'waterway', + paint: { 'line-color': t.water, 'line-width': 1 } }, + { id: 'road-casing', type: 'line', source: 'by', 'source-layer': 'transportation', + minzoom: 11, + paint: { 'line-color': t.roadCasing, + 'line-width': ['interpolate', ['linear'], ['zoom'], 11, 2, 16, 6] } }, + { id: 'roads', type: 'line', source: 'by', 'source-layer': 'transportation', + paint: { 'line-color': t.road, + 'line-width': ['interpolate', ['linear'], ['zoom'], 6, 0.5, 12, 1.5, 16, 4] } }, + { id: 'buildings', type: 'fill', source: 'by', 'source-layer': 'building', + minzoom: 13, + paint: { 'fill-color': t.building, 'fill-outline-color': t.buildingLine } }, + { id: 'boundary', type: 'line', source: 'by', 'source-layer': 'boundary', + paint: { 'line-color': t.boundary, 'line-dasharray': [2, 2], 'line-width': 1 } }, + ], + }; + } + + window.MapGLStyle = { build: build, tilesUrl: tilesUrl, tilesFile: TILES_FILE }; +})(); From a27695d9c60d7d32646011aecda5b512bbc88cfa Mon Sep 17 00:00:00 2001 From: rene Date: Fri, 5 Jun 2026 09:24:13 +0200 Subject: [PATCH 2/2] =?UTF-8?q?MapLibre-Perf-Test:=20/maplibre-perf-test?= =?UTF-8?q?=20(Basemap=20+=20600=20Cluster-Marker,=20GPU)=20=E2=80=94=20Ha?= =?UTF-8?q?ndy-Proof=20vor=20dem=20Umbau?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- backend/main.py | 6 +++ backend/static/js/maplibre-perf-test.js | 70 +++++++++++++++++++++++++ backend/static/maplibre-perf-test.html | 23 ++++++++ 3 files changed, 99 insertions(+) create mode 100644 backend/static/js/maplibre-perf-test.js create mode 100644 backend/static/maplibre-perf-test.html diff --git a/backend/main.py b/backend/main.py index 14622d7..328f63f 100644 --- a/backend/main.py +++ b/backend/main.py @@ -441,6 +441,12 @@ async def ui_vector_test(): # Testet den echten ui.js-Vektor-Pfad (UI.map.create) ohne Auth/App-Shell. return FileResponse(os.path.join(STATIC_DIR, "ui-vector-test.html"), media_type="text/html") + +@app.get("/maplibre-perf-test") +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") + # 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) diff --git a/backend/static/js/maplibre-perf-test.js b/backend/static/js/maplibre-perf-test.js new file mode 100644 index 0000000..7c03d4b --- /dev/null +++ b/backend/static/js/maplibre-perf-test.js @@ -0,0 +1,70 @@ +// Wegwerf-Perf-Test: beweist MapLibre-GPU-Rendering auf dem Handy mit realistischer +// Marker-Last (600 Punkte, GeoJSON-Clustering) auf unserer DACH-Basemap — die Kombi, +// die mit protomaps-leaflet (Main-Thread) den UI-Thread blockierte. +// Cluster-Zahlen weggelassen (Text bräuchte Glyphs → kommt erst in M3). +(function () { + 'use strict'; + var st = document.getElementById('status'); + function set(t) { if (st) st.textContent = t; } + + try { + var proto = new pmtiles.Protocol(); + maplibregl.addProtocol('pmtiles', proto.tile); + var isDark = document.documentElement.dataset.theme === 'dark'; + + var map = new maplibregl.Map({ + container: 'map', + style: MapGLStyle.build({ dark: isDark }), + center: [11.576, 48.137], zoom: 12, hash: true, + }); + map.addControl(new maplibregl.NavigationControl(), 'top-right'); + map.addControl(new maplibregl.ScaleControl()); + + // Kategorie-Icon (farbiger Kreis) per Canvas → addImage (Icons brauchen KEINE Glyphs). + function makeIcon(color) { + var s = 34, c = document.createElement('canvas'); c.width = c.height = s; + var x = c.getContext('2d'); + x.beginPath(); x.arc(s / 2, s / 2, s / 2 - 3, 0, Math.PI * 2); + x.fillStyle = color; x.fill(); + x.lineWidth = 2; x.strokeStyle = 'rgba(52,68,36,0.6)'; x.stroke(); + return x.getImageData(0, 0, s, s); + } + + // 600 deterministische Pseudo-POIs um München (3 Kategorien). + function genPois(n) { + var feats = [], seed = 42; + function rnd() { seed = (seed * 9301 + 49297) % 233280; return seed / 233280; } + for (var i = 0; i < n; i++) { + feats.push({ type: 'Feature', properties: { cat: i % 3 }, + geometry: { type: 'Point', coordinates: [11.40 + rnd() * 0.36, 48.03 + rnd() * 0.24] } }); + } + return { type: 'FeatureCollection', features: feats }; + } + + map.on('load', function () { + map.addImage('cat0', makeIcon('#e8590c')); + map.addImage('cat1', makeIcon('#2f9e44')); + map.addImage('cat2', makeIcon('#1971c2')); + map.addSource('pois', { type: 'geojson', data: genPois(600), + cluster: true, clusterRadius: 50, clusterMaxZoom: 16 }); + map.addLayer({ id: 'clusters', type: 'circle', source: 'pois', filter: ['has', 'point_count'], + paint: { + 'circle-color': '#5b4a2f', 'circle-stroke-color': 'rgba(52,68,36,0.65)', 'circle-stroke-width': 2, + 'circle-radius': ['step', ['get', 'point_count'], 14, 10, 18, 50, 24], + } }); + map.addLayer({ id: 'poi', type: 'symbol', source: 'pois', filter: ['!', ['has', 'point_count']], + layout: { + 'icon-image': ['match', ['get', 'cat'], 0, 'cat0', 1, 'cat1', 2, 'cat2', 'cat0'], + 'icon-allow-overlap': true, 'icon-size': 0.7, + } }); + set('✅ MapLibre + 600 Marker — jetzt zoomen/schieben, fühlt sich das flüssig an?'); + }); + + map.on('error', function (e) { + set('⚠️ ' + (e && e.error ? e.error.message : 'Fehler')); + if (e && e.error) console.error(e.error); + }); + } catch (e) { + set('❌ ' + (e && e.message ? e.message : e)); + } +})(); diff --git a/backend/static/maplibre-perf-test.html b/backend/static/maplibre-perf-test.html new file mode 100644 index 0000000..a1028c7 --- /dev/null +++ b/backend/static/maplibre-perf-test.html @@ -0,0 +1,23 @@ + + + + + + Ban Yaro — MapLibre Perf-Test (600 Marker) + + + + +
+
MapLibre Perf-Test — DACH-Basemap + 600 Cluster-Marker
lädt…
+ + + + + +