CycleAtlas – ein Radtouren Visualisierer
Als passionierter Rennradfahrer und Daten-Junkie wollte ich alle meine bisherigen Radtouren auf einer Karte visualisieren und genau wissen wo ich schon alles Rad gefahren bin.
Deshalb habe ich CycleAtlas entwickelt, eine kleine App, mit der sich alle bisherigen Radtouren visualisieren lassen. Die App zeigt die Strecken und Orte an, die man bereits auf zwei Rädern erkundet hat. Ausserdem erfasst die App die in den einzelnen Ländern zurückgelegten Distanzen und für Österreich, Belgien, die Schweiz, Deutschland, Frankreich und Italien sogar in den jeweiligen Regionen bzw. Kantonen.
Die Radrouten der Nutzer werden über die Strava-API heruntergeladen und anschliessend verarbeitet, um die Distanzen in Ländern, Regionen bzw. Kantonen zu berechnen. Durch die Einbindung von Strava-Webhooks werden auch neue Aktivitäten automatisch hinzugefügt, sobald sie auf Strava hochgeladen werden.
Hier gelangst zur WebApp, wo du dich durch die Demo-Version klicken kannst. Die Beispieldaten sind Radrouten von Tadej Pogačar (UCI Strassenrennrad Weltmeister 2024 & 2025). Oder melde dich mit deinem eigenen Strava-Account an, um deine Radtouren zu visualisieren.
Leider hat Strava seine API am 1. Juni 2026 kostenpflichtig gemacht, sodass meine App bis auf weiteres nicht funktioniert. Der Demo-Modus bleibt aber weiterhin funktionsfähig.
(mbi)
Bei der Umsetzung dieses Projektes wollte ich möglichst viele neue Technologien lernen, weshalb ich mir einen neuen und ausführlichen Techstack festgelegt habe. Dieser umfasst NuxtJS, VueJS, MongoDB, BullMQ, Redis, SocketIO, Turf und Tailwind.
Bevor ich mit der eigentlichen Web-App oder dem Screendesign anfing, wollte ich die Strava-API sowie die Verarbeitung von GPS-Daten testen. Die Strava-API ist gut dokumentiert, sodass das Abrufen der Daten problemlos funktionierte. Das Berechnen von Distanzen in verschiedenen Ländern oder Regionen war erstaunlich einfach: Anhand von GeoJSON-Dateien, die verschiedene Gebiete als MultiPolygon (eine Sammlung von GPS-Koordinaten, die einen Polygon bilden und ein Gebiet repräsentieren) enthalten, kann man mit Turf berechnen, wie viel von der Strecke sich in diesem Gebiet befindet. Auch die GeoJSON-Daten lassen sich online leicht finden, aber man muss oft einen Kompromiss zwischen Dateigrösse und Genauigkeit der Polygone und deren Koordinaten finden.
Das Programmieren der WebApp war mit Nuxt sehr komfortabel. Als Entwickler mit React-Erfahrung finde ich die Schreibweise von Nuxt/Vue mühsam, aber das Framework hat mich mit seinen Autoimports, dem einfachen State-Management und dem einfachen Data-Fetching überzeugt. Auch die DB-Queries mit Mongoose und MongoDB waren sehr angenehm, vor allem, da man in MongoDB auch tief verschachtelte Daten mithilfe von Projections herausfiltern kann. So konnte ich meine Queries extrem beschleunigen, da meine Dokumente mit integrierten Geodaten ca. 1 MB gross sind.
Das Verarbeiten der Aktivitäten, sei es beim ersten Import oder bei neuen Aktivitäten, habe ich mit BullMQ anhand von Queues und Workers umgesetzt. Somit können sie im Hintergrund verarbeitet werden. Den Status der Queue vermittle ich den Nutzern aber trotzdem über Websockets. Durch die Einbindung von SocketIO wird der Status der Verarbeitung ohne Polling direkt im Browser vermittelt.
Dieses Projekt diente auch als Vorbereitung für mein Major-Projekt (Media Applications). Die Idee war, die Technologien, die ich dann im Projekt verwenden werde, zu testen, um mögliche Überraschungen und Limitierungen zu vermeiden bzw. aufzudecken.