trailviewer
trailviewer
Eine interaktive Karten-App für Wandertouren — entwickelt mit Python/Flask, Leaflet.js und Mapbox. GPX-Dateien laden, Touren annotieren, als HTML-Seite teilen.
Was ist trailviewer?
trailviewer ist eine persönliche Webanwendung die ich gemeinsam mit Claude entwickelt habe, um meine Wandertouren schön zu visualisieren und mit Freunden zu teilen. Ausgangspunkt war die Frage: wie kann ich GPX-Dateien aus Strava in eine interaktive, ansprechende Karte verwandeln — ohne auf kommerzielle Tools angewiesen zu sein?
Das Ergebnis ist eine Flask-App die lokal läuft, GPX-Dateien parst, und daraus selbstständige HTML-Seiten generiert die direkt im Blog eingebettet werden können.
Features
Mehrere Kartenansichten
OpenTopoMap, Satellit, und Mapbox 3D-Gelände mit echtem Terrain-Extrusion.
Wegpunkte
Unterkünfte, Highlights und Hütten mit Icon, Name, Höhe und Beschreibung — per Klick auf die Karte oder via Koordinaten.
Höhenprofil
Interaktives Höhenprofil mit Hover-Cursor, und Tempo-Profil aus Strava-Zeitdaten.
3D Playback
Strava-ähnlicher Flyover: die Kamera folgt der Route in 3D, mit Pause, Seek und 1×/2×/4× Geschwindigkeit.
HTML Export
Vollständig selbstständige HTML-Datei, einbettbar per iframe in jeden Blogpost.
Session speichern
Touren als .tvjson speichern und wieder laden — inkl. Wegpunkte, Farben, Label-Positionen.
Wie es funktioniert
GPX-Dateien ladenStrava-Export oder andere GPX-Dateien direkt in die App laden. Mehrere Tracks gleichzeitig möglich, jeder bekommt automatisch eine Farbe.
Tour annotierenWegpunkte setzen (per Klick, Ortssuche oder Koordinaten), Tracks umbenennen, Farben anpassen, Labels positionieren.
HTML exportierenMit einem Klick wird eine vollständige, selbstständige HTML-Datei generiert — mit Etappen-Sidebar, Höhenprofil, 3D-Karte und Playback.
In den Blog einbettenDie HTML-Datei in /assets/tours/ ablegen und per <iframe> in jeden Blogpost einbetten.
Tech Stack
| Komponente | Technologie |
|---|---|
| Backend | Python / Flask |
| Karte | Leaflet.js |
| 3D / Playback | Mapbox GL JS |
| Höhendaten | Open Elevation API |
| Ortssuche | Nominatim (OpenStreetMap) |
| Export | Vanilla JS, html2canvas |
Beispiel-Einbettung
Die erste Tour die ich damit visualisiert habe — der Berge-Seen Trail im Salzkammergut, Juni 2026:
Entwickelt im Juni 2026 gemeinsam mit Claude (Anthropic). Der vollständige Code liegt privat auf GitHub.