It’s April in London, which can only mean one thing - time for the London Marathon! Given the impact it has on the capital, we couldn’t really let it pass without creating something for the blog. For those who might be wondering, Pheidippides was the Ancient Greek runner that legend says ran from Marathon to Athens to deliver news of a military victory…and inadvertently created one of the world’s great sporting events.
Last year there were some 38,000 participants in the race itself, the highest number in the London Marathon’s history, and incredibly an estimated 750,000 spectators lined the streets to cheer on the runners.
Can Open Data help you follow the marathon?
There are a variety of useful data sets available from numerous sources that can help spectators enjoy as much of the day as possible. So, here’s our attempt to create something useful and hopefully entertaining in this area with some of these datasets.
Primarily we have the London Marathon course plotted on an interactive web based map. Simply drag the “athlete” icon to anywhere on the course to find out the distance run at that point in the counter at the bottom-right of the page. We also highlight a few other metrics relating to runners at the selected point including mile split times for various pace setters and records.
For the spectators at any selected point, we also show the nearest public toilets and pubs (thanks to open data from OpenStreetMap), with a Google Streetview pop-up for a pub when you click on it (ok some of those photos are a bit limited and we seem to have stumbled across some pub closures). We’ve added the what3words location to each one too, so you can communicate its location using their addressing system.
Another feature we’ve added for each point on the route is the elevation, which you can see in the chart at the bottom right. This gives you an idea of just how many ascents and descents the runners have to cope with…which might not be apparent to the spectators. As you move the athlete icon along the route the chart will show you the corresponding elevation.
If you want to add a little more information about the nearby transport options, then you can add Tube, DLR and London Overground stations to the map alongside the race route.
And as a bit of fun….see if you can find the Easter egg hidden on the page. Need a clue where to look? It’s a famous London Marathon landmark, and was probably a good place to go for tea before setting sail (a few centuries ago). Good luck!
Hopefully if you are participating or supporting in London on Sunday, then you’ll find this useful…….or if that all sounds a bit too much effort…just sit back and watch our running emu racing through the streets.
How we did it
The majority of the work was done in Leaflet JS and Turf loading up and manipulating a stack of open data GeoJSON files from various sources:
- Pubs and Toilets locations - OpenStreetMap
- Tube and Rail locations - Doogal
Elevation was calculated from the Environment Agency’s LIDAR repository. Imagery was from Mapbox and Icons from FlatIcon.
There are some very nice Leaflet extensions out there and we used some of them to help bring the data to life:
- Leaflet.Snap - Makina Corpus
- Odometer - HubSpot
- Leaflet.defaultextent - Alex Nguyen
- Leaflet.Elevation - Felix Bache
Any major GIS crunching like digitizing the route or adding z values was done in QGIS.