Kaartweergave route plus meldingen #3

New issue

Closed

opened 2026-07-20 13:39:29 +02:00 by jelmerk · 0 comments

jelmerk commented

2026-07-20 13:39:29 +02:00

(Migrated from codeberg.org)

Gemigreerd uit backlog/ naar issues op 2026-07-20 — oorspronkelijk TASK-1.
Labels in het oude bord: kaart.

Toon na een check een kaart met de route en daaroverheen de gevonden
meldingen, zodat je in één oogopslag ziet wáár op de route de afsluitingen
zitten.

De /api/check-response bevat de benodigde geometrie al:

route.polyline — de route (uitgedund, [lat, lon]-paren)
hits[].situatie.coordinates — puntlocatie per melding
hits[].situatie.restrictions[].polyline — het afgesloten wegvak (GeoJSON)
hits[].situatie.detours[].polyline — omleidingsroutes (GeoJSON)

Dit is dus een frontend-only klus. Afweging nog te maken: Leaflet + OSM-tiles
(volwaardig, maar externe tile-dependency) versus zelfgetekend SVG/canvas
(app blijft volledig self-contained). Klikken op een marker zou de
bijbehorende meldingskaart moeten openen/highlighten, en andersom.

Definition of Done

#1 Werkend op https://gpx.jelmer.org
#2 Documentatie bijgewerkt

Hoe het is opgelost

Afgerond (2026-07-18). Keuze: Leaflet 1.9.4 gevendored in static/leaflet/
(geen CDN; alleen OSM-tiles + Melvin-API als externe afhankelijkheden; app
werkt zonder kaart als Leaflet niet laadt). Route als blauwe polyline
(fitBounds met invalidateSize-herijking, maxZoom 15), circleMarkers per
melding gekleurd op ernst (rood afgesloten / oranje beperking / grijs
buurt+snelweg). Tweerichtingskoppeling: marker-klik opent+scrollt naar de
meldingskaart; kaartje openklappen pant de kaart, licht de marker uit en
tekent beperkings- (rood) en omleidingsgeometrie (groen gestreept).
Server serveert nu ook static files (met path-traversal-check).

> Gemigreerd uit `backlog/` naar issues op 2026-07-20 — oorspronkelijk **TASK-1**. > Labels in het oude bord: `kaart`. Toon na een check een kaart met de route en daaroverheen de gevonden meldingen, zodat je in één oogopslag ziet wáár op de route de afsluitingen zitten. De `/api/check`-response bevat de benodigde geometrie al: - `route.polyline` — de route (uitgedund, `[lat, lon]`-paren) - `hits[].situatie.coordinates` — puntlocatie per melding - `hits[].situatie.restrictions[].polyline` — het afgesloten wegvak (GeoJSON) - `hits[].situatie.detours[].polyline` — omleidingsroutes (GeoJSON) Dit is dus een frontend-only klus. Afweging nog te maken: Leaflet + OSM-tiles (volwaardig, maar externe tile-dependency) versus zelfgetekend SVG/canvas (app blijft volledig self-contained). Klikken op een marker zou de bijbehorende meldingskaart moeten openen/highlighten, en andersom. ## Definition of Done - [x] #1 Werkend op https://gpx.jelmer.org - [x] #2 Documentatie bijgewerkt ## Hoe het is opgelost Afgerond (2026-07-18). Keuze: Leaflet 1.9.4 gevendored in `static/leaflet/` (geen CDN; alleen OSM-tiles + Melvin-API als externe afhankelijkheden; app werkt zonder kaart als Leaflet niet laadt). Route als blauwe polyline (fitBounds met invalidateSize-herijking, maxZoom 15), circleMarkers per melding gekleurd op ernst (rood afgesloten / oranje beperking / grijs buurt+snelweg). Tweerichtingskoppeling: marker-klik opent+scrollt naar de meldingskaart; kaartje openklappen pant de kaart, licht de marker uit en tekent beperkings- (rood) en omleidingsgeometrie (groen gestreept). Server serveert nu ook static files (met path-traversal-check).