# 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](/os-apis/accessing-os-apis/os-ngd-api-tiles.md) which you can then use in web maps and GIS software.

To do this, we recommend using the open source visual editor, [Maputnik](https://maputnik.github.io/).

{% hint style="info" %}

### Coordinate reference systems in 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 (<geodataviz@os.uk>) who will advise you further.
{% endhint %}

{% stepper %}
{% step %}

### Loading an existing style

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

<figure><img src="/files/b933d785bd8a72cdc9261fcc553a5e49681872cb" alt="Maputnik UI with the Editor button highlighted."><figcaption><p>Maputnik UI with the Editor button highlighted.</p></figcaption></figure>

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](/os-apis/accessing-os-apis/os-ngd-api-tiles/technical-specification/styles.md) 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*.
      {% endstep %}

{% step %}

### 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.*

<figure><img src="/files/d765675c21fa04fa5089779bfb7127817642c572" alt="Maputnik UI with a map shown in the map view."><figcaption><p>Maputnik UI with a map shown in the map view.</p></figcaption></figure>
{% endstep %}

{% step %}

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

<figure><img src="/files/50fd40e6c5c5a76e9c0bd580e4d275a69ed50762" alt="Map styling options available in the Maputnik UI, which can be found in Layers panel > Paint properties."><figcaption><p>Map styling options available in the Maputnik UI.</p></figcaption></figure>

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.
   {% endstep %}
   {% endstepper %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.os.uk/os-apis/core-concepts/styling-os-ngd-data/creating-a-custom-style-for-os-ngd-api-tiles.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.