Using OS styles to get started in Mapbox Studio

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:

1. 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.

Screenshot showing an OS GitHub repository containing OS Open Zoomstack stylesheets. There is a red rectangular box around the Download ZIP option under the Code drop-down menu.

1. Navigate to Mapbox Studio to complete the next set of instructions.

2. 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.

Screenshot showing the tilesets tab show in the top right corner of Mapbox Studio

1. Scroll down until you see your new tileset and click the Menu button.

Screenshot showing OS-Open-Zoomstack tileset shown in the explorer

1. Click on the clipboard icon to copy the Map ID.

Screenshot showing MapID shown in the context menu with the clipboard button highlighted

1. 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).

2. Choose the style that you want to use, then open the .json file (for example, Outdoor.json) in a text editor.

3. 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:

Screenshot showing the sources code on line 46 where Map ID can be added to the .json file

1. Save the .json file.

2. Go back to Mapbox Studio and click the Styles tab.

Screenshot showing the top ribbon of Mapbox Studio with a red rectangle shape around the Styles tab.

1. Click the Upload button.

2. 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).

1. Once you are happy with your map, click Publish in the top right corner and your map is ready to use.