OS has supplied Mapbox GL Styles created by our cartographic designers for use in Mapbox Studio on GitHub. These stylesheets allow you to add colours to features contained in the vector tiles to produce a far more vivid and visually appealing map.
The following step-by-step instructions will guide you through setting up Mapbox GL Styles in Mapbox Studio:
Download the appropriate repositories from GitHub. The example screenshot below shows a screenshot of the GitHub repository containing OS Open Zoomstack stylesheets. This downloaded repository should be stored in an appropriate location.
Navigate to Mapbox Studio to complete the next set of instructions.
Copy the Map ID for your new tileset by doing the following:
In Mapbox Studio, click on the Tilesets tab in the top right corner.
Scroll down until you see your new tileset and click the Menu button.
Click on the clipboard icon to copy the Map ID.
Open the folder of stylesheets that you downloaded in step 1 and navigate to Vector Tiles > Mapbox GL Styles, where you will find four styles (Road, Outdoor, Light, and Night).
Choose the style that you want to use, then open the .json file (for example, Outdoor.json) in a text editor.
Find the following block of code near the top of the file (line 46) and paste your Map ID where it says ADD-SOURCEURL-HERE:
Save the .json file.
Go back to Mapbox Studio and click the Styles tab.
Click the Upload button.
Navigate to your newly saved style.json file and click Open.
The style will then load up in the Mapbox Studio style editor.
From this point on, you can customise the content and style of your map (for example, you can turn layers on or off, delete layers from your map, add new layers, and change any of the style elements).
Once you are happy with your map, click Publish in the top right corner and your map is ready to use.
There are a couple of benefits associated with hosting and serving your own vector tiles:
There are no thresholds when uploading your own data to create the tiles.
You do not need external connectivity to use the tiles as the hosting can be done locally (i.e. you can work offline with the vector tiles).
There are numerous options if you want to host and serve your own vector tiles. The following GitHub repositories have comprehensive lists of the available options for vector tiles and those available specifically for MBTiles:
If you want to export an MBTiles file to a directory of files, you can use open-source tools such as Tippecanoe or MBUtil.
This guide will help you get started using vector tiles (MBTiles) – lightweight tiles that are efficient and quick to render, letting you create customised, high-resolution, beautiful mapping.
This guide explains what vector tiles are, lists the key features and benefits of the format, and details the applications that support vector tiles. Installing vector tiles in GIS software provides step-by-step instructions on installing vector tiles data in QGIS and Cadcorp. Using OS styles to get started in Mapbox Studio details how to install vector tiles in Mapbox. The remaining two pages provide information on hosting and serving your own vector tiles and using OS styles on Vector Tiles you have previously created.
In response to customer feedback on preferred data formats, a growing number of OS products have been made available in vector tile format, including OS Open Zoomstack, OS VectorMap Local, Code-Point with Polygons, Boundary-Line, OS Terrain 50, OS Open Roads and OS MasterMap Greenspace Layer, to name a few. We also have the OS Vector Tile API on the OS Data Hub if you want to connect directly to OS-hosted vector tiles.
Vector tiles are clipped tiles, or grid squares, composed of layers of vector features which are optimised for caching, scaling, and producing map imagery quickly. They serve in a similar way to raster tiles but have the added functionality of being customisable by users.
A vector tile represents a specific area of the Earth’s surface and contains geographic information about the coverage area. Each tile can contain many layers of features, such as buildings, roads, rivers, greenspaces, etc. Vector tiles are packets of geographic data which have been packaged into tiles for transfer over the web. The information they contain can be used to deliver styled vector data and web maps to the end-user.
OS supplies data in the Mapbox Vector Tile Specification, packed in a single MBTiles file (which is based on the SQLite database). This is a Mapbox-specific vector tile format. Other specifications are available; however, this document will reference MBTiles only.
Vector tiles offer users the following key features and benefits:
User customisation and styling functionality – customise your map with full and dynamic design control.
Small file size – lightweight tiles that are efficient and quick to render in your client application.
Pixel perfect maps – high-resolution, beautiful mapping for all devices (web and mobile devices).
Snapping ability – due to the data being vector, data can be snapped to and traced.
Smooth zooming and scaling effect – a seamless user experience when zooming in and out of maps.
Advanced features – vector tiles contain geographic data (not just images) which can be interrogated and analysed.
Offline maps – store the tiles locally to take your maps offline (for example, on mobile devices).
Data will be supplied in Web Mercator projection (EPSG:3857).
This getting started guide is broken down into the following sub-pages:
The following page provides step-by-step instructions on how to install vector tiles data in QGIS and Cadcorp.
It is possible to use OS styles on vector tiles you have created. The following step-by-step instructions outline how to do this:
Download and unzip the appropriate OS product folder of stylesheets from GitHub, for example, OS's OS-Open-Zoomstack-Stylesheets repository on GitHub.
Once you have downloaded and unzipped the folder of stylesheets, navigate to Vector Tiles > Mapbox GL Styles.
If appropriate, choose the style you want to use and open the .json file (for example, OS Outdoor.json) in a text editor.
Find the following piece of code near the top of the file and enter your data source URL where it says ADD–SOURCE–URL–HERE:
You can find more information on the different source types on Mapbox's documentation site
Save the .json file.
The style is now ready to use. You can customise the style if you want to (for example, you could adapt the style of a map to match your own brand colours). Maputnik is a good open-source map editor tool for creating and customising vector tile styles.