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

Routen-Vorschau: echtes Karten-PNG (Basemap+Route) statt nackter SVG-Form

Browse source 
In der Routenliste fehlte der geografische Kontext — man sah nur die Routen-
form auf grünem Grund, nicht WO sie liegt oder wo sie entlangführt.

Lösung: UI.map.snapshot() rendert pro Track ein PNG aus EINEM geteilten
Offscreen-GL-Kontext (gleicher Style wie die echte Karte: Straßen, Orte,
Wald, Gewässer), zeichnet Route + Start/Ziel-Marker ein und cached das
Ergebnis. So bekommt jede Karte ihren Kontext, ohne bei vielen Listen-
einträgen das WebGL-Kontextlimit (iOS ~8) zu sprengen.

- ui.js: Offscreen-Singleton + serielle Render-Queue + Cache (_glSnapshot)
- routes.js: _buildMiniMap zeigt sofort SVG, upgradet dann aufs PNG
- GL aus → null → SVG-Platzhalter bleibt (Produktion/Flag aus unverändert)
This commit is contained in:
rene 2026-06-05 13:57:47 +02:00
parent a0d16ba800
commit 1defeec537
7 changed files with 115 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

24
backend/static/index.html
View file

@ -86,14 +86,14 @@
<title>Ban Yaro</title>
<!-- Theme + theme-color Statusleiste vor CSS setzen -->
<script src="/js/boot-early.js?v=1200"></script>
<script src="/js/boot-early.js?v=1201"></script>
<!-- CSS: Reihenfolge ist wichtig — ?v= zwingt Browser zur Neuladung -->
<link rel="stylesheet" href="/css/design-system.css?v=1200">
<link rel="stylesheet" href="/css/layout.css?v=1200">
<link rel="stylesheet" href="/css/components.css?v=1200">
<link rel="stylesheet" href="/css/utilities.css?v=1200">
<link rel="stylesheet" href="/css/lists.css?v=1200">
<link rel="stylesheet" href="/css/design-system.css?v=1201">
<link rel="stylesheet" href="/css/layout.css?v=1201">
<link rel="stylesheet" href="/css/components.css?v=1201">
<link rel="stylesheet" href="/css/utilities.css?v=1201">
<link rel="stylesheet" href="/css/lists.css?v=1201">
</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=1200"></script>
<script src="/js/ui.js?v=1200"></script>
<script src="/js/app.js?v=1200"></script>
<script src="/js/worlds.js?v=1200"></script>
<script src="/js/offline-indicator.js?v=1200"></script>
<script src="/js/api.js?v=1201"></script>
<script src="/js/ui.js?v=1201"></script>
<script src="/js/app.js?v=1201"></script>
<script src="/js/worlds.js?v=1201"></script>
<script src="/js/offline-indicator.js?v=1201"></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=1200"></script>
<script src="/js/boot.js?v=1201"></script>
</body>