Interactive maps with Leaflet

Harry Beck’s London Underground Tube map is a design classic.Rather than emphasising distance and geographical accuracy, like other maps, Beck based his on circuit diagrams he drew for his day job; stripping the sprawling Tube network down to a neat diagram of coloured, criss-crossing lines (TfL, 2021b).

Original 1933 Tube map

However, sometimes users want to interact with a map The leaflet package for R can be used to create a map where the user can interact with data. The leaflet package for R can be used to overlay data on top of interactive maps. Leaflet is an open-source JavaScript library that can be used to create mobile-friendly interactive maps. (Leaflet, 2020)

Import the data

The first step to create an interactive map is to collect longitude and latitude data for London Tube stations. OpenStreetMap, is a project that creates and distributes free geographic data for the world. A list of Tube stations and location coordinates are available on the website (OpenStreetMap, 2021).

Importing data into R is fairly simple.

library(htmltools)
LondonUndergroundData <- read.csv(textConnection(
  "Name,Lat,Long
  Acton Town, 51.502500, -0.278126
  Acton Central, 51.50883531, -0.263033174

Create the interactive London Tube map

The following steps are used to create a Leaflet map:

  1. Create a map widget by calling leaflet().
  2. Add layers (i.e., features) to the map by using layer functions (e.g. addTiles, addMarkers, addPolygons) to modify the map widget.
  3. Repeat step 2 as desired.
  4. Print the map widget to display it.

It is possible to create a Leaflet map of London Underground Stations using the following code:

library(leaflet)
leaflet(LondonUndergroundData) %>% addTiles() %>%
  addMarkers(~Long, ~Lat, popup = ~htmlEscape(Name))

London Tube categorisation

As well as categorising Tube stations by Zones and Tube Lines (which can be seen on the Tfl on website http://content.tfl.gov.uk/standard-tube-map.pdf), Transport for London also classify London Underground stations by the following categories (TfL, 2021a). Please see below for the descriptions and an explanation of the rationale:

GATEWAY - these stations are the main visitor entry points to London, such as King’s Cross St. Pancras and Heathrow Terminals 1, 2 & 3. They are used by a high proportion of people unfamiliar with the network, who are likely to need to purchase a ticket. In addition, Gateway stations have dedicated Visitor Centres that provide travel and tourism information to visitors to London. These stations have fully staffed control rooms.

DESTINATION - these stations, such as Embankment, are typically located in central London, have high volumes of customers, and include commuter rail termini and tourist destinations. These stations tend to have fully staffed control rooms and regular platform duties and detrainments are part of the daily operations.

METRO - these stations, such as Clapham South and Southwark, serve predominantly inner London communities and therefore the majority of users are commuters who are familiar with the network. However some stations, such as Covent Garden and Tower Hill, will also have unfamiliar users and hence tend to be busy throughout the day.

LOCAL - these smaller stations, such as Chiswick Park and Rickmansworth, are located in outer London or beyond, have lower customer numbers and serve mainly regular customers. These stations will tend to be quiet outside of peak hours.

Creating the map in R is fairly simple.

library(dplyr)
# Create a category palette
cof <- colorFactor(c("#FF0099", "#c00000", "#33FF00", "#CCFF00", "#FF9900", "#FF99FF"), domain=c("Destination", "Gateway", "Local", "Metro", "Not applicable", "Unknown new station"))
# Create the map
leaflet(LondonUndergroundData) %>% addProviderTiles(providers$CartoDB.DarkMatter)%>%
  addCircleMarkers(~Long, ~Lat, popup = ~htmlEscape(Name), weight = 3, radius=6, 
                   color=~cof(Category), stroke = F, fillOpacity = 0.5)%>%
  addLegend("bottomright", colors= c("#FF0099", "#c00000", "#33FF00", "#CCFF00", "#FF9900", "#FF99FF"), labels=c("Destination", "Gateway", "Local", "Metro", "Not applicable", "Unknown new station"), title="Categories") 

Performance figures showing how many people use the Tube

Usage statistics for all London Underground Stations are avaiable on Wikipedia (2020) All Usage statistics (total entry plus exits) are in millions per year for 2019.

Map showing how many people used the Tube in 2019

# Create the Usage decile distribution 
qpal <- colorQuantile("YlOrRd", LondonUndergroundData$Usage, n = 10)
# Create the labels for the map
labs <- lapply(seq(nrow(LondonUndergroundData)), function(i) {
  paste0( "Names: ",
          LondonUndergroundData[i, "Name"], '<p></p>', 
          "Category: ",
          LondonUndergroundData[i, "Category"],'</p><p>',
          "Usage: ",
          LondonUndergroundData[i, "Usage"], 
          " million") 
})
# Create the map
leaflet(LondonUndergroundData) %>% 
  addProviderTiles(providers$CartoDB.DarkMatter)%>%
  addCircles(lng = ~Long, lat = ~Lat, weight = 3,
             radius = 200,
             color = ~qpal(Usage), fillOpacity = 1, label = lapply(labs, htmltools::HTML)) %>%
  addLegend("bottomright", pal = qpal, values = ~Usage, 
            title = "Usage decile", opacity = 1)

Map showing how many people used the Tube in 2019

leaflet(LondonUndergroundData) %>% addTiles() %>%
  addCircles(lng = ~Long, lat = ~Lat, weight = 5,
             radius = ~(Usage) * 10, label = lapply(labs, htmltools::HTML))

References

Leaflet (2020) ‘Leaflet an open-source JavaScript library for mobile-friendly interactive maps’. Available at: https://leafletjs.com/.
OpenStreetMap (2021) ‘List of london underground stations’. Available at: https://wiki.openstreetmap.org/wiki/List_of_London_Underground_stations.
TfL (2021a) ‘FOI request detail LU station types’. Available at: https://tfl.gov.uk/corporate/transparency/freedom-of-information/foi-request-detail?referenceId=FOI-2168-2021.
TfL (2021b) ‘Harry beck’s tube map’. Available at: https://tfl.gov.uk/corporate/about-tfl/culture-and-heritage/art-and-design/harry-becks-tube-map.
Wikipedia (2020) ‘List of london underground stations’. Available at: https://en.wikipedia.org/wiki/List_of_London_Underground_stations.