My own strava statistics page

14 October 2020 - 1 minute read

Look at the heatmap here

For 6 years I have been using Strava to record my bike rides. Since then I have always been fascinated by the heatmap. A heatmap shows you were you have cycled using all your activities. I use the heatmap to look for streets that I haven't ridden yet, so when i try to make a new route I always ride through streets that are new to me.

Automation

Clicking on the import button every week to update my heatmap is not something I would like to do every time. Thats why I tried to automate the process by running a cronjob in the background of the server. The cronjob makes sure that all the Ride activities from strava get synced with the server and get stored in the database. It will do this everyday, midnight at 2am.

The cronjob that runs every minute.

* * * * * php /path/to/folder/artisan schedule:run >> /dev/null 2>&1

The command that gets executed by Laravel .

//Running the scheduled commands
protected function schedule(Schedule $schedule)
{
    $schedule->command('strava:activities')->daily();
}

The command above will run code that stores the strava token and refreshes it when it is expired. The library that I used importing activities and authentication with strava is the package from Bas van Drost.

Rendering the data

With all the activities stored in the database I can fetch them in the strava page. When they all have been fetched, I am able to decode all the polylines that are attached to the activities and add them to the given map. Since some of the activities are added manually it will probably give you an error as it can't find a polyline, to fix this we have to skip the activity that has no polyline.

So the code for the frontend looks as follows.

fetch('/api/activities')
.then(response => response.json())
.then(data => {
    let activities = data.data;
    activities.forEach(act => {
        if(act.polyline == null) return;

        let path = google.maps.geometry.encoding.decodePath(act.polyline);
        new google.maps.Polyline({
            path: path,
            strokeColor: '#2b6cb0',
            strokeOpacity: 0.8,
            strokeWeight: 1,
            fillColor: '#2b6cb0',
            fillOpacity: 0.35,
            map: map
        });
    });
})

Statistics page screenshot

In the future I may extend the feature to have more data on the page, but for now it is a simple and clear view of some statistics.