🆕Creating a custom style for OS NGD API – Tiles

This ‘how-to’ guide will show you how to create your own style for OS NGD API – Tiles which you can then use in web maps and GIS software.

To do this, we recommend using the open source visual editor, Maputnik.

It is important to note that OS NGD API – Tiles only works in EPSG:3857 (Web Mercator) in Maputnik. If you want to create a style for the EPSG:27700 (British National Grid) version of OS NGD API – Tiles, please contact the Geographic Data Visualisation Team at OS ([e-mail]) who will advise you further.

1

Loading an existing style

1. Go to https://maputnik.github.io/ and click on Editor from the top menu.

   
2. We recommend starting with one of our existing styles as a basis for creating your own style; you can view the available styles from the GET /collections/{collectionId}/styles endpoint. For example, https://api.os.uk/maps/vector/ngd/ota/v1/collections/ngd-base/styles/3857

3. In Maputnik:

   1. Click Open.

   2. Paste the style URL into the Load from URL box.

   3. Click Load from URL.

2

Loading the vector tiles

1. Click Data Sources and delete any existing active sources.

2. Under Add New Source, enter the following details:

   1. Source ID: ngd-base

   2. Source Type: Vector (Tile URLs)

   3. Tile URL: https://api.os.uk/maps/vector/ngd/ota/v1/collections/ngd-base/tiles/3857/{z}/{y}/{x}?key=INSERT_API_KEY_HERE

   4. Scheme Type: xyz (Slippy map tilenames scheme)

   5. Min Zoom: 6

   6. Max Zoom: 19

3. Click Add Source.

The map should now appear in the map view.

Maputnik UI with a map shown in the map view.

3

Edit the map

1. Using the Layers panel on the left, or click on a feature on the map, select the layer you want to alter.

2. You can now use Paint properties in the editing panel on the left to alter the styling of these features.

   

   Map styling options available in the Maputnik UI.
3. There are many things you can change in Maputnik with regard to styling, including the opacity of layers, the style of features at different zoom levels, and what features appear at various zoom levels. It is also possible to filter the data based on an attribute value.