# 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](https://docs.os.uk/osngd/getting-started/access-the-os-ngd-api/os-ngd-api-tiles "mention") 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" %}
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&#x20;

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

   <figure><img src="https://docs.os.uk/~gitbook/image?url=https%3A%2F%2F3947395969-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FNngcoCxdORFWqZiVNyuV%252Fuploads%252FoskMVASqXr3LJ0dcBQck%252F0.png%3Falt%3Dmedia&#x26;width=768&#x26;dpr=4&#x26;quality=100&#x26;sign=1b9ca9f2&#x26;sv=2" alt="Maputnik UI with the Editor button highlighted."><figcaption></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](https://docs.os.uk/osngd/access-the-os-ngd-api/os-ngd-api-tiles/technical-specification/styles#get-collections-collectionid-styles "mention") 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&#x20;

1. Click *Data Sources* and delete any existing active sources.&#x20;
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*.&#x20;

*The map should now appear in the map view.*

<figure><img src="https://170091638-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0pZjHxkAvY7Mn6TqFBMD%2Fuploads%2FsrtBGvGUo3fcWigfCAZD%2Fimage.png?alt=media&#x26;token=55adc6e2-080e-4d1a-9119-a2858aebec99" 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.&#x20;
2. You can now use Paint properties in the editing panel on the left to alter the styling of these features.<br>

   <figure><img src="https://170091638-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0pZjHxkAvY7Mn6TqFBMD%2Fuploads%2F5CIy0wysGUuamzTipJBT%2Fimage.png?alt=media&#x26;token=01ecc87b-3593-4490-aa3c-662d224148db" 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 %}