Interactive maps of Hastings Half Marathon

Matt Dray / 2022-03-31 / 4 min read
Categories: code
Tags: flexdashboard ggrgl gpx3d health interactive leaflet plotly r

Webpage titled Hastings Half Marathon. There's a map showing a circular course with numbered markers along the length.

tl;dr

I made a small R Markdown site that contains interactive maps of the route of the Hastings Half Marathon.

Half distance, double delay

I signed up for the Hastings Half Marathon in March 2019 and finally got to run it in March 2022 after two years of pandemic-related cancellations.

I managed a time of 1:44:151 in terrific conditions and raised money for Sands, the stillbirth and neonatal death charity (at time of writing you can still donate).

As a nice bonus, the finisher’s medal featured Alan Turing, who spent some of his childhood in the area.

A finisher's medal for Hastings Half Marathon 2022, featuring an image of the Bombe code-breaking machine developed by Turing in the Second World War and the words father of computer science.

Running or climbing?

The Hastings Half is a popular and an interesting course, mostly because of the third dimension: there are two short, sharp early climbs, then a long sweeping one, later returning downhill to finish along the seafront of the town.2

There are precious few resources online that illustrate the course, however. You can find a low-quality map on the official website and get an elevation profile elsewhere, but I thought it might be useful to create a quick and tiny webpage with the x, y and z dimensions in an interactive format.

Run route, run code

So, I recorded the route with my Apple Watch and downloaded the data as a GPX file, which contains geospatial data in an XML-like format. I’ve talked about Apple Health data before, and also about a small package I made to read GPX data, called {gpx3d}, which came in handy.

With that data I made three interactive maps using R:

  1. A birds-eye view with {leaflet}, which allows zooming and panning and has markers for each of the kilometres
  2. An elevation profile with {plotly}, which shows the distance and elevation on hover
  3. A 3D trace of the course with {ggrgl}, which can be dragged to show relative distance and elevation

I embedded these maps in three separate tabs of a {flexdashboard}, an R Markdown format that lets you create simple, single page dashboards. I used {bslib}, {thematic}, {emo} and Google Fonts for styles and embellishment.

I pushed the files to a GitHub repo and served the HTML via GitHub Pages to a dedicated webpage at matt-dray.github.io/hastings-half/.

Here are some screenshots of each page:

Webpage titled Hastings Half Marathon. There's a map showing a circular course with numbered markers along the length.

Screenshot of the interactive route map, made with {leaflet}

Webpage titled Hastings Half Marathon. There's a plot showing distance against elevation. There is a large incline about a third of the way from right to left, and a corresponding decline two-thirds in before flattening out.

Screenshot of the interactive elevation profile, made with {plotly}

Webpage titled Hastings Half Marathon. There's a map showing a three-dimensional view of a line, which is plotted with axes for latitude, longitude and elevation.

Screenshot of the interactive 3D trace, made with {ggrgl}

See you in 2023

Ultimately the webpage is a very quick demo, but I hope others will be able to use to get a sense of the course.

The next step will be to add fourth and fifth dimensions: smell and sound. As soon as you reach the bottom of All Saints Street you hit the historic Old Town seafront, where you’re immediately perked up by the scent of frying chips and the screech of extremely raucous seagulls.

There’s no place like home.

Session info 
## ─ Session info ───────────────────────────────────────────────────────────────
##  setting  value                       
##  version  R version 4.1.1 (2021-08-10)
##  os       macOS Mojave 10.14.6        
##  system   x86_64, darwin17.0          
##  ui       X11                         
##  language (EN)                        
##  collate  en_GB.UTF-8                 
##  ctype    en_GB.UTF-8                 
##  tz       Europe/London               
##  date     2022-03-31                  
## 
## ─ Packages ───────────────────────────────────────────────────────────────────
##  package     * version date       lib source        
##  blogdown      1.5     2021-09-02 [1] CRAN (R 4.1.0)
##  bookdown      0.24    2021-09-02 [1] CRAN (R 4.1.0)
##  bslib         0.3.1   2021-10-06 [1] CRAN (R 4.1.0)
##  cli           3.1.1   2022-01-20 [1] CRAN (R 4.1.2)
##  digest        0.6.28  2021-09-23 [1] CRAN (R 4.1.0)
##  evaluate      0.15    2022-02-18 [1] CRAN (R 4.1.2)
##  fastmap       1.1.0   2021-01-25 [1] CRAN (R 4.1.0)
##  htmltools     0.5.2   2021-08-25 [1] CRAN (R 4.1.0)
##  jquerylib     0.1.4   2021-04-26 [1] CRAN (R 4.1.0)
##  jsonlite      1.7.3   2022-01-17 [1] CRAN (R 4.1.2)
##  knitr         1.37    2021-12-16 [1] CRAN (R 4.1.0)
##  magrittr      2.0.2   2022-01-26 [1] CRAN (R 4.1.2)
##  R6            2.5.1   2021-08-19 [1] CRAN (R 4.1.0)
##  rlang         1.0.1   2022-02-03 [1] CRAN (R 4.1.2)
##  rmarkdown     2.11    2021-09-14 [1] CRAN (R 4.1.0)
##  rstudioapi    0.13    2020-11-12 [1] CRAN (R 4.1.0)
##  sass          0.4.0   2021-05-12 [1] CRAN (R 4.1.0)
##  sessioninfo   1.1.1   2018-11-05 [1] CRAN (R 4.1.0)
##  stringi       1.7.6   2021-11-29 [1] CRAN (R 4.1.0)
##  stringr       1.4.0   2019-02-10 [1] CRAN (R 4.1.0)
##  withr         2.4.3   2021-11-30 [1] CRAN (R 4.1.1)
##  xfun          0.30    2022-03-02 [1] CRAN (R 4.1.2)
##  yaml          2.3.5   2022-02-21 [1] CRAN (R 4.1.2)
## 
## [1] /Users/matt.dray/Library/R/x86_64/4.1/library
## [2] /Library/Frameworks/R.framework/Versions/4.1/Resources/library

  1. A time of 1:44 while wearing number 144, coincidentally.↩︎

  2. Just pray that the cold sea wind isn’t blowing in your face for those several kilometres; it feels like running in frozen treacle.↩︎