How Far I've Ridden

I recently bought a new bike and started to record my rides using Strava. I started playing with their API to calculate the total distance that I've cycled and wanted a nice visual representation of how far I've cycled. My first dabble in this was to find out the distances from London to other major cities and compare that against the distance I've cycled to see how many more kilometers I needed to cycle to reach the next city. Whilst this was a good motivator to see the next city I could have cycled to, it didn't really give much of a visual idea of the distance I've done.

The first iteration of how far I've cycled.

From this I developed the idea and started planning to compare my progress against a route. I wanted to practice using different API's and this let me use two, the Google Maps API and the Strava API. In the end I decided on using the John o' Groats to Land's End route, firstly because it's an interesting route from the North of the UK to the south - giving a good visual representation and secondly it's not too long and so I should get a sense of completion. Once this route is complete, it is easy enough to get data for another longer route - perhaps one of the EuroVelo routes and use that instead.

To get the data I used a GPX log of the route and gathered the latitude and longitude from various waypoints. I then drew a PolyLine using this points - I think it uses just over 30,000 points for this! That was fairly basic to get the red line, but I also wanted a line that would only show the distance I've done. For this I had to calculate the distance between each of these points. For this I had to loop through each of the points and calculate the distance between that and the previous point using computeDistanceBetween and then add it to a total recorded distance. If the distance I've cycled was less that the recorded it would plot to the map otherwise it was just end the script.

var point_distance = google.maps.geometry.spherical.computeDistanceBetween(cycleRouteCoOrds[i-1], cycleRouteCoOrds[i])

For now this is just a visualisation of my cycle, in the near future I am going to add to this, and allow people to see their own progress against this.

View the website