Direkt zum Inhalt

Newsletter Serie mit 22 Ratschlägen zum Thema Online Marketing und Inbound Marketing.
Anmelden

 

Wie ich meine eigene Heatmap gebastelt habe

In diesem Blogpost erkläre ich, wie ich mir aus mehreren GPS-Tracks eine schöne und informative Heatmap gebastelt habe.
 
Stage Image: 

Ich laufe gerne. Die letzten zwölf Monate bin ich durchschnittlich 20 Kilometer pro Woche gerannt. Da kommt einiges zusammen. Jedes Lauftraining zeichne ich mit meinem Smartphone auf und schau es mir bei Runkeeper (zurzeit meine favorisierte Lauf-App) an. Ich finde es spannend, die gelaufenen Strecken auf der Karte zu analysieren.

Schon oft habe ich mich gefragt, wie alle absolvierten Strecken auf einer einzigen Karte aussehen würden. Wenn ich im Besitz eines Premium-Accounts bei Strava wäre, könnte ich eine solche Heatmap bequem erstellen lassen. Doch ich will selbst eine bauen.

Schritt 1 - Tracks exportieren

Jeder gute Tracking-Dienst bietet eine Exportfunktion an. Bei Runkeeper kann ich die GPS-Tracks unter Account Settings und Export Data bequem herunterladen. Auch Dienste wie Strava bieten ähnliche Funktionen an. Die einzelnen Tracks werden üblicherweise als GPX-Dateien gespeichert.

Schritt 2 - GPX-File generieren

Nun geht es darum, die separaten GPX-Dateien in eine einzige Datei zu packen. Am einfachsten geht’s mit dem Tool “GPSBabel”. Damit kann ich diverse GPS-Formate umwandeln. Ich wähle die gewünschten GPS-Tracks aus, definiere das Ausgabeformat und drücke OK. Ruckzuck habe ich sämtliche Tracks in einer einzigen GPX-Datei.

Schritt 3 - Mapbox-Account erstellen

Um die GPX-Datei weiter zu verarbeiten, benötige ich einen Account beim Kartendienst Mapbox. Mit Mapbox kann ich individuelle Karten mit umfangreichen Funktionalitäten erstellen. Bekannte Unternehmen wie AirBnB, Foursquare oder Evernote verwenden Mapbox für ihre Karten. Das kostenlose Basispaket reicht für meine Heatmap locker.

Schritt 4 - Datenquelle erstellen

Mit der Desktop-Software “Mapbox Studio Classic” von Mapbox importiere ich die GPX-Datei und lege diese als Datenquelle fest. Diese dient als Basis und kann später mit einem Kartenstil unterlegt werden.

In Mapbox Studio Classic klicke ich oben links auf Styles & Sources. Dies öffnet mir eine Liste mit meinen Projekten. Dann wähle ich + New Styles & Source und klicke auf + Blank source. Mit + New Layer lade ich meine GPX-Datei hoch. Mir werden zwei Layers angezeigt. Ich brauch nur “activities_tracks”, daher lösche ich den anderen Layer. Jetzt sehe ich zum ersten Mal meine absolvierten Strecken auf schwarzem Hintergrund.

Die Tracks sind bereits sichtbar.
 

Unter Settings gebe ich einen Namen an und schiebe den Maxzoom-Regler so weit nach rechts wie’s geht. Das Ganze speichere ich mit dem Save as-Button oben links. Danach wechsle ich erneut zu den Settings und lade die Datenquelle mit Upload to Mapbox hoch. Je nach Grösse der Datenquelle dauert dies eine Weile. Wenn die Daten hochgeladen sind, wird die Datenquelle im Mapbox-Konto unter Tilesets angezeigt. Mit einem Klick darauf erhalte ich weitere Details. Dort kopiere ich die Map ID in die Zwischenablage, denn ich brauche diese nachher noch.

Schritt 5 - Kartenstil wählen

Unter Styles & Sources klicke ich erneut auf + New Styles & Source. Dort wähle ich einen Kartenstil aus den Vorlagen. Danach klicke ich auf Layers, dann Change source, füge im Textfeld unten die Map ID meiner Datenquelle mit einem Komma getrennt ein und drücke Apply. Sichtbar sind die eingefügten Daten jetzt noch nicht. Sie müssen zuerst gestylt werden.

Es stehen mehrere Kartenstil-Vorlagen zur Auswahl.

Schritt 6 - Heatmap stylen

Jetzt kommt der spannenste Teil. Hier kann sich jeder nach seinem Gusto austoben. Das Styling erfolgt mittels CartoCSS in den Tabs auf der rechten Seite. CartoCSS ist dem normalen CSS sehr ähnlich. Hier erstelle ich mit + ein weiteres Tab und kann mit der LayerID (#activities_tracks bei mir) meine Daten stylen. Um das klassische Bild einer Heatmap zu erhalten, verwende ich folgendes CartoCSS:

#activities_tracks {
line-width:1.4;
line-opacity: 0.4;
line-comp-op: multiply;
image-filters:colorize-alpha(blue, cyan, green, yellow , orange, red);
}

 


Je öfter ich eine Strecke gelaufen oder mit dem Fahrrad gefahren bin, desto röter erscheinen sie.

Schritt 7 - Map hochladen und teilen

Ich bin zufrieden mit dem Styling und lade die Karte unter Settings und Upload to Mapbox zu Mapbox hoch. Die hochgeladene Heatmap kann ich in meinem Mapbox-Konto unter Classic ansehen und den Link an meine Freunde versenden.

Voilà, meine Heatmap.

Fazit

Heatmaps sind nicht nur schön anzusehen, sondern haben auch einen informativen Charakter. In meinem Fall sehe ich auf einen Blick, welches meine Lieblingsstrecken sind und welche Schweizer Seen ich noch nicht umrundet habe. Ich gebs zu, ein bisschen Spielerei ist es natürlich auch. Strava hat eine Heatmap von sämtlichen Aktivitäten der Nutzer (2015) erstellt. Damit kann ich beispielsweise Strecken entdecken, die von den Einheimischen genutzt werden. Das kann vor allem dann von grossem Nutzen sein, wenn ich neu in einer Stadt bin und eine schöne Strecke zum Laufen suche.