How we mapped rent affordability using the Ordnance Survey’s Open Zoomstack map tiles

From visualising election results to telling the story of a place, event or pattern through its geography, maps are a key part of data journalism.

Data analysis software as well as new and more powerful geographic information system (GIS) tools have in recent years made the process of creating data-rich maps easier.

But choosing what type of map can best tell a particular story and what technology to use to make it is still no simple task.

Mapping rent affordability in Britain

This was the challenge on our hands a few months ago while working on how best to map rent affordability in Britain for people aged under 30.

We combined data from property market analysis company Hometrack on the average rental price of a property broken down by location (postcode district) and the number of bedrooms with ONS data on the average income for different age groups and regions.

We wanted to create a user-friendly map that the audience could interact with to examine how property size and location affected rental affordability.

We have created many similar projects in the past, but on this occasion the volume of data, broken down into Britain’s more than 2,700 postcode districts, and the ambition to allow users to search for different areas and select by number of bedrooms and age group meant we needed a new approach.

Trialling Open Zoomstack

While planning the project, the Ordnance Survey released a product called OS Open Zoomstack, which they describe as “a comprehensive vector basemap showing coverage of Great Britain at a national level, right down to street level detail”.

Alasdair Rae at the University of Sheffield’s department of urban studies and planning put together an in-depth review of Zoomstack which helped us on our way, and the project seemed like the perfect opportunity to try it out.

To use the Zoomstack basemap in a live page we needed to host the vector map tiles ourselves. We needed to do this to cater for the large volume of traffic that a project on the BBC homepage might attract, as well as future-proofing the map from any possible changes to the vector tile API, as it started out as a three-month trial from the OS.

Creating our own map tiles

So our aim was to build an interactive map in-house using a mapping library that supports vector tiles, but the main challenge was still to figure out the best way to create our own version of the tiles and host them ourselves.

The OS included the Zoomstack tile data in a variety of formats, including, among others, as a 2.2GB MBtiles file (.mbtiles).

Thanks to some useful advice by the Ordnance Survey’s Charley Glynn and James Milner, a developer who used to work for the OS, we used the tile-join command in Mapbox’s tippecanoe command line library to convert the .mbtiles file into the raw vector tiles as protobuf files (.pbfs). This gave us, instead of one huge 2.2GB .mbtiles file, more than one million tiny raw vector .pbf files, broken down by zoom level. Each of these tiles only gets loaded and surfaced to the user when they zoom into that specific area.

James Milner followed up his initial tweets with a full write-up of the entire process of creating the tiles using tippecanoe in this easy to follow blogpost.

Getting the tiles onto AWS

Once we had generated our own tiles from the Zoomstack data, the remaining major technical challenge to be able to use them in a map on the BBC website was uploading and hosting them on a web server. It was vital that the tiles be performant and reusable as possible, to make it worth the effort.

The directory structure of the .pbf files is a crucial part of making the tiles work, and so needed to be maintained when we pushed them to S3. We wrote a custom script to automate that, which relies on some internal tooling created for getting our files on BBC servers.

Usually, because of the nature of news, we keep the time that our assets are cached in the browser quite short — often stories develop which means existing data or graphics needs to be updated and overwritten quickly. But this was quite different for our team, in that we were hosting a technology that we want our readers to use again and again (albeit in different stories), so we decided to keep the caching time long, about three months. This is the impact of a longer caching time:

1. A user visits our story about rent prices, they load the map which starts with a full view of Great Britain.
2. They zoom in on the map to where they live and other areas they are interested in, downloading the tiles to the cache.
3. Next time we use the map and the same user visits the new story, the map tiles for the wide view of Great Britain and the more detailed tiles of their interested areas are already downloaded; a big win for performance.

Getting the tiles into the browser

Mapbox maintain a free to use product, mapbox-gl-js, which renders map tiles in WebGL and exposes the hugely powerful Mapbox JS API and styling options. Fortunately, getting custom tiles into it was straightforward. The package allows you to create a map instance, powered by a config into which we import a style JSON, where all the map styling information is located. To add our custom tiles we pass a URL to the style.json sources property. Here’s an example:

{ 
 sources: {
  composite: {
   type: ‘vector’,
    tiles: [‘/map-assets/tiles/v1/{z}/{x}/{y}.pbf’]
   }
  },
  glyphs: ‘/map-assets/fonts/v1/{fontstack}/{range}.pbf’
}

The keywords (inside curly braces) are hooks that Mapbox uses to locate the correct pbf to display to the user. You’ll notice that the URLs correspond to the rigid directory structure mentioned earlier. The above example also shows how it is also possible to use a custom font on your map, but you’ll need to convert your chosen font into a glyphs/pbf format.

Styling the map

Using the Ordnance Survey’s base stylings as a starting point, we adjusted the basemap using Mapbox’s visual editor Maputnik, adapting it to match the BBC style guide.

To edit the styles, we followed the Ordnance Survey’s Open Zoomstack Masterclass tutorial. Because we wanted a very light base map, we loaded the light version the OS had created, one of four they made available, and adapted it. This involved tweaking colours, fill and stroke values for the different layers that make up the map, like buildings, parks, roads and text layers.

Once we had adjusted the visual feel of the map to match the BBC’s in-house mapping style, the next step was deciding what we wanted to display in the basemap, especially given the idea was to add a data layer on top to show the affordability by postcode district. We wanted to include enough landmarks for the audience to hopefully understand which part of the country they were looking at, but no more than necessary to avoid making the map overcrowded. We hid buildings and showed streets, turned off woodlands but kept green spaces visible.

The final step to prepare the basemap styles for publication was to change the font used for the text labels on the map to the one we use and adapting the letter spacing to improve readability.

We then exported the adapted style .json files and linked them up to the mapbox-gl web app.

Next steps?

Using the Zoomstack data and working with the mapbox-gl API proved a flexible and powerful way to build interactive maps to help tell stories that we had not used before. Having done the groundwork to match the basemap to our bespoke BBC in-house style as well as hosting the tiles on our own AWS server has ensured that we use this process for future stories as well, ensuring this was not a one-off.

The project also afforded the different elements of the Visual and Data Journalism team — design, development and editorial — the perfect opportunity to come together and collaborate on an experimental new dataset and format for storytelling using geography.

Since publishing the rental affordability story and interactive map, we have also used the Zoomstack tiles on another map to accompany a story on the difference between average rental price in neighbouring postcode districts as well as in a map highlighting the top and bottom places to live if you’re under 26.

Over the last few months, the Ordnance Survey team behind Zoomstack have continued to develop the tool as well as running workshops on how to use it across the country. Earlier this year, the OS announced the release of Open Zoomstack as a fully fledged product.