ALLA PROJEKT
01

Kollektivtrafik

LIVE
6 apr. 2026|Node.js / Express / Vanilla JavaScript / Leaflet.js / GTFS Realtime / GTFS Static / ResRobot API / Protocol Buffers / CartoDB Tiles / Service Workers / PWA

Kollektivtrafik är en webbapplikation som visualiserar all kollektivtrafik i Östergötland och Örebro län i realtid. Varje buss, tåg och spårvagn visas som en färgad prick på en interaktiv karta. Prickarna rör sig i realtid, inte med hackiga hopp, utan med smooth interpolation som beräknar fordonens position mellan varje API-uppdatering baserat på hastighet och riktning. Resultatet är en levande karta där man kan se trafiken flöda genom städerna. Appen hämtar fordonspositioner från Trafiklabs GTFS Regional Realtime API var 5:e sekund. Varje fordon har GPS-koordinater, hastighet, riktning och beläggningsdata. Mellan varje API-svar används dead reckoning — fordonets senaste hastighet och kurs används för att prediktera var det befinner sig just nu. En exponentiell lerp-funktion (körs på requestAnimationFrame, ~30fps) glider mjukt mellan beräknad och verklig position utan synliga hopp. Statisk GTFS-data (rutter, hållplatser, tidtabeller, ruttgeometrier) laddas ner en gång per dygn och indexeras i minnet. Detta gör det möjligt att visa linjenummer, nästa hållplats, hela ruttens sträckning och avgångstider — allt kopplat till realtidsdata. Reseplaneringen och avgångstavlan drivs av ResRobot API, som söker bland alla kollektivtrafikoperatörer i Sverige.

Tidslinje

5 apr. 2026

Projektstart & research

Undersökte Trafiklabs öppna API:er (GTFS Regional, ResRobot). Identifierade operatörskod otraf för Östgötatrafiken med realtidspositioner, statisk ruttdata och störningsinformation.

6 apr. 2026

MVP: Backend + realtidskarta

Byggde Node.js/Express-server som hämtar GTFS Realtime protobuf-data och serverar som JSON. Leaflet-karta med fordonsmarkörer som uppdateras var 5:e sekund. Kopplade statisk GTFS-data för linjenummer, ruttgeometrier och hållplatser.

6 apr. 2026

Funktioner: Reseplanerare, avgångar, störningar

Integrerade ResRobot API för reseplanering (A→B) och avgångstavla. Lade till ServiceAlerts för trafikstörningar. Hållplatser på kartan. Följ-fordon-läge med ruttvisning.

6 apr. 2026

Smooth interpolation

Implementerade dead reckoning med requestAnimationFrame (~30fps) och exponentiell lerp. Fordon glider mjukt mellan API-uppdateringar baserat på hastighet och riktning, inga hackiga hopp.

6 apr. 2026

Multi-region: Örebro

Utökade till stöd för flera operatörer parallellt. Lade till Örebro län med separata API-nycklar. Län-väljare med auto-zoom.

6 apr. 2026

Design: Teal/grön färgpalett

Komplett redesign med mörkblå bas (#0d2137), teal/grön/cyan-accenter. Gradient-logotyp. Glassmorphism-element. Fordon som färgade prickar med zoom-anpassad storlek.

6 apr. 2026

PWA & mobil-anpassning

Service worker, manifest.json, custom bussikon för hemskärm. Dedikerad mobil-navbar med 5 knappar. Bottom-sheet-paneler för sök, filter och mer. Standalone-anpassning med safe-area-inset.

6 apr. 2026

Besöksstatistik

Daglig besökstracking med 14-dagars stapeldiagram. Session-baserad unik-räkning.

6 apr. 2026

Polish & bugfixar

Klickbara störningar med expandering. Om-sida med Papai.se. Bättre textkontrast. Parkerade-filter. Fordonsräknare baserad på synlig kartvy. PNG-ikoner i navbar för PWA-kompatibilitet.

6 apr. 2026

Deployment

Driftsatt på kollektivtrafik.papai.se. Öppen källkod tillgänglig på GitHub.