Heatmap’ed Komoot 😍

Das mit der Strava Heatmap in Komoot hat mir jetzt doch noch keine Ruhe gelassen …

Also insbesondere, dass man mit der reinen Heatmap-Karte nicht so richtig erkennen kann, welcher Ort das ist. Eben weil sämtliche Beschriftungen fehlen.

Eine Lösung dafür war schnell gefunden: den Tile-Request des Browsers (bzw. von Komoot) auf einen lokalen, kleinen Web-Server verbiegen, der

• den Request entgegen nimmt
• das Tile vom Open Street Map Server abruft
• das Overlay Tile vom Strava Global Heatmap Server abruft
• die beiden Bilder kombiniert
• für Caching-Zwecke das Ergebnis lokal vorhält
• und last but not least an den Browser (bzw. eben Komoot) zur Anzeige ausliefert

Habe als Waffee mal node.js gewählt, Web-Server mit express.js und zum Kombinieren der Tiles habe ich „@mapbox/blend“ entdeckt. Funktioniert auf anhieb, … Source auf Github. (beachte, dass ein Strava Summit Account erforderlich ist)

So sieht das Ergebnis dann aus (weiter raus gezoomed):

Auf diesem Zoom-Level sieht eine Stadt wie Würzburg natürlich nach einem unübersichtlichen Knäuel aus. Aber man bekommt trotzdem einen guten Überblick. Und wenn man in Komoot die „m“-Taste drückt (= gewählte Route ausblenden) kann man auch gut kontrollieren, ob diese auf einem Heatmap-positiven Pfad liegt.

Die Farbtöne des Heatmap-Overlays sind auch ausreichend unterschiedlich von den OSM-Farben, sodasss man z.B. das Heatmap-Rot nicht mit dem „primary road“-Rot von OSM verwechseln kann.

Auf höherem Zoom-Level sieht das dann so aus:

Das Auge kann da schon relativ gut abschätzen, was wohl Waldwege sind oder was z.B. Landstraßen…