The following pages provide an overview of the OS National Geographic Database (NGD) APIs and how you can access them. They cover the core elements of the design (including data available), technical specifications, and how to get started, amongst other topics.

These pages should be used in conjunction with the more detailed pages within the Data Structure section which are specifically focussed on the different OS NGD themes, collections and feature types.

The APIs are self-documenting and allow you to easily discover what OS NGD data is available before using it. You can explore the various data collections for free to decide what best suits your needs. The data is ready to use in numerous applications (desktop, web, and mobile), enabling you to power your applications with rich, consistent and current information about the real world.

The OS NGD APIs are available via the OS Data Hub.

The following pages provide an overview of how to get started using OS NGD API – Features. They provide step-by-step instructions to get started in the most common GIS software and web mapping libraries.

Accessing OS NGD data with OS NGD API – Features via GIS software

The following sub-sections provide step-by-step instructions on how to access OS NGD data via OS NGD API – Features in various GIS software packages:

• Cadcorp SIS

• ArcGIS Online

• QGIS

API Reference

OS NGD API – Features Technical Specification provides an overview of the endpoints available, as well as the parameters that can be used with each endpoint. The Technical Specification is intended to be used by customers who want to integrate with the API. Click into each endpoint to learn more.

Use of CQL Operators

The OS NGD API – Features supports a generic filter grammar called Common Query Language (CQL) for specifying enhanced filter criteria to return a subset of features. CQL is written using a familiar text-based syntax, making it more readable and better-suited for creating complex filters.

The following table documents the supported operators:

What feature types are available in OS NGD API – Features?

The following table documents the OS NGD datasets available through the OS NGD API – Features showing the themes, collections and lists the available feature types.

OS NGD themes and collections have been created to group similar geographic entities and data types, making it quicker and easier to identify the data you need. The OGC API - Features standard also references feature collections, and in the context of OS NGD datasets, this is equivalent to feature types.

The following naming convention has been applied to the feature collections: theme-collection-featuretype-version. Short codes have been used for both the theme and collection to keep the feature collection names manageable and not overly long. An example of the short codes used is below:

bld-fts-buildingline-1

Click on the theme to find out more information about the dataset:

What is OS NGD API – Features?

With OS NGD API – Features, you can filter by attribute, location and / or time to create your own customised data selections. Based on the latest standard, this API can help accelerate your time-to-value by making it easier to build awesome things with our trusted geospatial data. You can use it to reduce your data management overheads, automate your workflows, and innovate at pace.

Benefits

Things to remember for OS NGD API – Features

ArcGIS Online is a web-based platform geographic information system (GIS). ArcGIS Online services are managed by Esri and accessed by a client running on a wide range of options.

The instructions that follow demonstrate how to connect to OS NGD API – Features using ArcGIS Online.

What you need

• Access to the ArcGIS Online service.

• A preloaded base map, for example, .

• OS NGD API – Features added to an API project in the OS Data Hub. (See for more information.)

Instructions

1. Sign into your ArcGIS Online account.

2. Click the Map tab to open the map viewer.

3. In Layers, click Add > Add layer from URL.

4. In the Add Layer dialog:

   • URL: Copy the OS NGD API – Features URL without the API Key from your OS Data Hub account and paste it into the text box.

   • Type: Select OGC feature layer.
   • Custom parameters:

     • Select Add custom parameters.

       • Parameter: Type key in the text box.

       • Value: Enter your API Key.

       • Click Next.
   • Select a layer to add: Select a layer to add to the map and then click Add to map.
5. The layer will display in the Layers panel and the data will display on the map.

The Cadcorp Spatial Information System® (Cadcorp SIS®) is an integrated family of geospatial products comprising desktop, web, and developer applications.

Cadcorp SIS Desktop connects directly to the OS Data Hub through dedicated wizards.

What you need

• Cadcorp SIS (version SIS 9 or later).

• A preloaded base map, for example, .

• OS NGD API – Features added to an API project in the OS Data Hub. (See for more information.)

Instructions

1. In Cadcorp SIS Desktop, open an existing map or create a new one.
2. In the Home tab, click Add Overlay.
3. In the Overlay Types dialog, select Ordnance Survey (GB) > OS (GB) Data Hub, and then click Next.

4. In the OS (GB) Data Hub dialog:

   • Select OS National Geographic Database (NGD) API - Features.

   • API Key: Enter your API key.

   • Premium/Public Sector Plan: Select this option if you have this plan.

   • Save in the UI settings database (encrypted): Select this option.

   • Click Next.
5. In the OS Data Hub NGD API - Features Data Themes and Feature Types dialog:

   • Well-known ‘recipe’: Select a predefined recipe, if available.

   • Data Themes: Select your data themes.

   • Features: If necessary, use the editing tools (on the right) to delete feature types or to change the order in which they display in your SIS Workspace Definition (SWD). By default, all feature types within the selected data themes are available in the right panel.

   • Local cache: Select this option to store the data temporarily on your machine. If you save and reopen the SWD, the data will still be available as it is fetched from your local cache.

   • One-off import: Select this option to do a one-off import of the data. If you save and reopen the SWD, the data will not be available and you will need to re-import it. These imports have a larger file size.

   • Filtering: These settings are used in conjunction and define how much data is required for display. It is recommended that you always set a spatial filter and feature limit.

     • Spatial: The Intersect with current view extent option limits the download to only selected features within the current window extent. You can also load features within a specific area of interest using the polygon feature to draw your area of interest on the map BEFORE opening the Add Overlay dialog.

     • Maximum number of features: Limits the number of feature values downloaded to the number set. This limit is applied per feature within any filtered spatial area.

   • Click Finish.
6. The selected themes and feature types display in the SWD and map area.

Accessing OS NGD data with OS NGD API – Features via web mapping libraries

The following sub-sections provide step-by-step instructions on how to access OS NGD data via OS NGD API – Features in various web mapping libraries:

QGIS is an open GIS (Geospatial Information System) desktop application that allows you to display, interrogate, visualise and create geospatial information including from geo-centric APIs (for example, a WFS).

The instructions that follow demonstrate how to connect to OS NGD API – Features using QGIS.

What you need

• QGIS (version 3.12.0 or later).

• A preloaded basemap, for example, .

• OS NGD API – Features added to an API project in the OS Data Hub. (See for more information.)

Instructions

1. Open an existing project or create a new one.

2. Deselect the Render checkbox in the bottom bar, if necessary.
3. Click (Add WFS Layer icon) in the Manage Layers toolbar on the left. To activate this toolbar, go to View > Toolbars and select Manage Layers Toolbar.

4. In Data Source Manager | WFS > Server Connections, click New.
5. In the Create a New WFS Connection dialog, provide the service details:

   • Name: Provide a name for the connection. You can reuse this connection in the future.

   • URL: Copy the OS NGD API – Features endpoint address from the OS Data Hub and paste it into this field. Your API Key is automatically appended to this URL in the key parameter.

   • Authentication: Leave these settings at their defaults. You do not need a username or password as authentication is done through your API Key.

   • Version: Click Detect to identify the version.

   • Enable feature paging: Select this option, if necessary.

   • Page size: Enter a maximum page size. This limits the page size to a maximum number of features. We recommend a setting of about 100 to speed up response times. Larger values may result in a very slow response time.

   • Other: Leave the other settings at their defaults.

   • Click OK.

     QGIS saves the connection details and lists the new connection in the Server Connections dropdown for future use.

6. In Data Source Manager | WFS > Server Connections:

   • Select your new connection in the dropdown, if necessary.

   • Click Connect.

     When you click Connect, a list of features available in OS NGD API – Features populates in the main box.

7. In Data Source Manager | WFS:

   • Features: Select the features you want to load. You can select multiple layers using your Ctrl key.

     As a best practice, only load features that relate to your current task – not all features. The more features you call, the longer it takes to load them into QGIS. In addition, each feature, regardless of its layer, counts towards your .

   • Only request features overlapping the view extent: Select this option. This engages the bounding box which is set by your viewing window. This means that only selected features within the viewing window will load (not all features).

   • Click Add to add the features.

   • Optionally, click Close to close the dialog.
8. Select the Render checkbox in the bottom bar on the main UI, and select the checkbox next to each feature you want to display in the Layers panel.

is an open-source JavaScript library for displaying interactive maps on the web or mobile. A simple and lightweight library that will enable you to display and visualise location data and build dynamic applications.

What you'll need

• OS Maps API and OS NGD API – Features added to an API project in the with an API Key.

• A text editor like Visual Studio Code or Notepad to edit and save your HTML and JavaScript files.

Create a basic map

Step 1: Set up your HTML file

1. Create a new HTML file with a text editor (for example, Notepad, Visual Studio Code).

2. Add the basic HTML structure to your file with a placeholder <div> for the map.

Step 2: Insert your API Key and OS NGD collection

1. To enable access to OS APIs an API Key is required. Inside the <script> tag, add a variable called apiKey, replacing 'INSERT_API_KEY_HERE' with the API Key from your project.

2. Add a variable called collectionID, replacing 'INSERT_COLLECTIONID_HERE' with the collection ID for the desired OS NGD feature type and version (for example, bld-fts-buildingpart-1).

Step 3: Add a basemap

1. Define the configuration options for the map, defining minZoom, maxZoom, center, zoom, maxBounds, attributionControl.

   • minZoom and maxZoom: Sets the minimum and maximum zoom level for the map. Users will not be able to go beyond these levels.

   • center: Sets the initial centre point of the map.

   • zoom: Sets the initial zoom level of the map.

   • maxBounds: Defines the maximum bounds and restricts panning the map.

   • style: Defines the style of the map, configured via a URL pointing at the style specified.

   • attributionControl: When set to 'false', it hides the attribution control which displays map credits.

2. Initialize the map with the id of the <div> element and the configuration option defined in mapOptions.

3. Using the 'L.tileLayer' method, specify the basemap layer for OS Maps API, which includes your API Key to load the tiles to your map.

Step 4: Add an OS NGD API – Features layer

1. Create a function called fetchFeatures that fetches the API based on the current map extent (bounding box) by generating a bbox string.

2. Construct the API request URL to fetch OS NGD data from OS NGD API – Features. The URL includes the collectionId, bbox and apiKey.

3. Once the features have been returned in JSON, update the source data of the map's layers to display the features.

Step 5: Load and update features on the map dynamically

1. The map.on('moveend',...) event handler fetches and updates the features based on the map's current extent.

What's next?

Congratulations! You've successfully created a map using Leaflet and added an OS NGD layer using OS NGD API – Features in a few steps.

is a free and open-source JavaScript library for displaying interactive maps on the web. It is a powerful tool that can be used to create a wide variety of map-based applications, from simple web maps to complex GIS applications.

OpenLayers is easy to use and can be integrated with a variety of other web development frameworks.

What you'll need

• OS Maps API and OS NGD API – Features added to an API project in the with an API Key.

• A text editor like Visual Studio Code or Notepad to edit and save your HTML and JavaScript files.

Create a basic map

Step 1: Set up your HTML file

1. Create a new HTML file with a text editor (for example, Notepad, Visual Studio Code).

2. Add the basic HTML structure to your file with a placeholder <div> for the map.

Step 2: Insert your API Key and OS NGD collection

1. To enable access to OS APIs an API Key is required. Inside the <script> tag, add a variable called apiKey, replacing 'INSERT_API_KEY_HERE' with the API Key from your project.

2. Add a variable called collectionId, replacing 'INSERT_COLLECTIONID_HERE' with the collection ID for the desired OS NGD feature type and version (for example, bld-fts-buildingpart-1).

Step 3: Add a basemap

• Create a source for the basemap layer using OS Maps API and initialise the ol.map class with the applicable map properties – target, layers and view. Add the following code inside the JavaScript block:

The above code creates the main map instance using the OpenLayers library where you can specify various properties:

• target: Defines where the map should be displayed. In this instance, it is set to the id of the <div> element.

• layers: An array containing the layers to be added to the map.

• view: Defines the initial view of the main, containing various settings such as projection, extent (the geographic bounds of the map), minimum and maximum zoom levels, centre of the map and the initial zoom level.

Step 4: Add an OS NGD API – Features layer

1. Define and initialise the source using the ol.source.Vector class to make a request to OS NGD API – Features. By utilising the ol.loadingstrategy.bbox this means that data from OS NGD API – Features will be loaded based on the visible map extent.

2. To create a separate layer to overlay OS NGD data onto the map, you will need to add the ngdFeatures layers to the ol.map object to render both layers on the map.

What's next?

Congratulations! You've successfully created a map using OpenLayers and added an OS NGD layer using OS NGD API – Features in a few steps.

is a free and powerful JavaScript library for displaying interactive maps on the web. It's based on Mapbox GL JS and provides a wide range of features for creating maps with custom styles, markers and interactivity.

What you'll need

• OS Maps API and OS NGD API – Features added to an API project in the with an API Key.

• A text editor like Visual Studio Code or Notepad to edit and save your HTML and JavaScript files.

Create a basic map

Step 1: Set up your HTML file

1. Create a new HTML file with a text editor (for example, Notepad, Visual Studio Code).

2. Add the basic HTML structure to your file with a placeholder <div> for the map.

Step 2: Insert your API Key and OS NGD collection

1. To enable access to OS APIs an API Key is required. Inside the <script> tag, add a variable called apiKey, replacing 'INSERT_API_KEY_HERE' with the API Key from your project.

2. Add a variable called collectionId, replacing 'INSERT_COLLECTIONID_HERE' with the collection ID for the desired OS NGD feature type and version (for example, bld-fts-buildingpart-1).

Step 3: Add a basemap

1. To add the OS Maps API, you will need to define the map style using MapLibre GL JS's format. This specifies the source of map tiles, which will be retrieved from OS Maps API in the 'Light' raster tiles style.

2. Initialise the map object using the maplibregl.Map class to configure the basemap layer and define its properties – container, minZoom, maxZoom, maxBounds, style, center and zoom.

3. Add navigation controls to the map, excluding the compass button and disabling map rotation.

The above code creates the main map instance using the MapLibre GL JS library where you can specify various properties:

• container: Defines where the map should be displayed. In this instance, it is set to the id of the <div> element.

• minZoom and maxZoom: Sets the minimum and maximum zoom level for the map. Users will not be able to go beyond these levels.

• maxBounds: Defines the maximum bounds and restricts panning the map.

• style: Defines the style of the map, configured via a URL pointing at the style specified.

• center: Sets the initial centre point of the map.

• zoom: Sets the initial zoom level of the map.

Step 4: Add an OS NGD API – Features layer

1. Create an empty GeoJSON placeholder to hold the feature objects called by OS NGD API – Features.

2. Create a function called fetchFeatures that fetches the API based on the current map extent (bounding box) by generating a bbox string.

3. Construct the API request URL to fetch OS NGD data from OS NGD API – Features. The URL includes the collectionId, bbox and apiKey.

4. Once the features have been returned in JSON, update the source data of the map's layers to display the features.

Step 5: Load and update features on the map dynamically

1. Event listeners are triggered when the map loads and finishes moving (panning or zooming) to load and update features based on the map's updated extent. Inside the map.on('load',...) event handler, we add styles for various types of features, including polygons, linestrings and points so that any collectionId specified will render.

The map.on('moveend',...) event handler will then fetch and update the features based on the map's current extent.

What's next?

Congratulations! You've successfully created a map using MapLibre GL JS and added an OS NGD layer using OS NGD API – Features in a few steps.

Accessing OS NGD data with OS NGD API – Tiles via GIS software

The following sub-sections provide step-by-step instructions on how to access OS NGD data via OS NGD API – Tiles in various GIS software packages:

• Cadcorp SIS

• QGIS

The following pages provide an overview of how to get started using the OS NGD API – Tiles. They cover the core elements to get started in the most common GIS software and web mapping libraries.

Accessing OS NGD data with OS NGD API – Tiles via web mapping libraries

The following sub-sections provide step-by-step instructions on how to access OS NGD data via OS NGD API – Tiles in various web mapping libraries:

• Leaflet

• MapLibre GL JS

• OpenLayers

MapLibre GL JS is a free and powerful JavaScript library for displaying interactive maps on the web. It's based on Mapbox GL JS and provides a wide range of features for creating maps with custom styles, markers and interactivity.

What you'll need

• OS NGD API – Tiles added to an API project in the OS Data Hub with an API Key.

• A text editor like Visual Studio Code or Notepad to edit and save your HTML and JavaScript files.

Create a basic vector map

Step 1: Set up your HTML file

1. Create a new HTML file with a text editor (for example, Notepad, Visual Studio Code).

2. Add the basic HTML structure to your file with a placeholder <div> for the map.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>OS NGD API – Tiles | Template (EPSG:3857) | MapLibre GL JS</title>
    
    <!--Add the Ordnance Survey Styling-->
    <link rel="stylesheet" href="https://labs.os.uk/public/os-api-branding/v0.3.1/os-api-branding.css" />
    <script src="https://labs.os.uk/public/os-api-branding/v0.3.1/os-api-branding.js"></script>
    
    <!--Add the MapLibre GL JS libaries -->
     <link rel="stylesheet" href="https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.css" />
    <script src="https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.js"></script>
    
    <style>
        /* Set the map container size and style */
        body { margin: 0; padding: 0; }
        #map { position: absolute; top: 0; bottom: 0; width: 100%; }
    </style>
</head>
<body>
    
    <!--Create a div element to hold the map-->
    <div id="map"></div>
    
    <!--Add your Javascript code below--> 
    <script>
        // Your Javascript code will go here

    </script>

</body>
</html>

Step 2: Insert your API Key

1. To enable access to OS APIs an API Key is required. Inside the <script> tag, add a variable called apiKey, replacing 'INSERT_API_KEY_HERE' with the API Key from your project.

2. Inside the <script> tag, add another variable called collectionId with the collection ID for the OS NGD API – Tiles basemap – ngd-base.

// Set API Key and collection ID
 const apiKey = 'INSERT_API_KEY_HERE';
 
 const collectionId = 'ngd-base';

Step 3: Adding a fetch and response interceptor

1. We need to intercept and customise the style request, adding a tiles property to provide a correctly formatted URL and ensuring authentication through the apiKey is enabled to make sure that the correct tiles are requested.

2. Add the following code inside the JavaScript block:

// Modify the JSON style request incorporate a `tiles` property which lists an array of tile endpoints.
// The '&key=' HTTP query parameter is also appended to each tile endpoint to authenticate the request.
// NOTE: The {z}, {x} and {y} template values are replaced with the corresponding integers at runtime.
    
    const { fetch: originalFetch } = window;
    window.fetch = async (...args) => {
        let [ resource, config ] = args;

        let response = await originalFetch(resource, config);
        if( response.url != `https://api.os.uk/maps/vector/ngd/ota/v1/collections/${collectionId}/styles/3857` )
            return response;

        // Response interceptor.
        const json = () =>
            response.clone().json().then((data) => {
                data.sources[ collectionId ].tiles = [ `${data.sources[ collectionId ].url}/{z}/{y}/{x}?key=${apiKey}` ];
                delete data.sources[ collectionId ].url;
                return data;
            });

        response.json = json;
        return response;
    };

Step 4: Create a map and map view

1. Initialise the map object using the maplibregl.Map class to configure the vector tile layer and define its properties – container, minZoom, maxZoom, maxBounds, style, center and zoom.

2. Add navigation controls to the map, excluding the compass button and disabling map rotation.

// Initialize the map object.
    const map = new maplibregl.Map({
        container: 'map',
        minZoom: 6,
        maxZoom: 19,
        maxBounds: [ [ -8.74, 49.84 ], [ 1.96, 60.9 ] ],
        style: `https://api.os.uk/maps/vector/ngd/ota/v1/collections/${collectionId}/styles/3857`,
        center: [ -3.541809, 50.727589 ],
        zoom: 17,
        attributionControl: false
    });

    map.dragRotate.disable(); // Disable map rotation using right click + drag.
    map.touchZoomRotate.disableRotation(); // Disable map rotation using touch rotation gesture.

    // Add navigation control (excluding compass button) to the map.
    map.addControl(new maplibregl.NavigationControl({
        showCompass: false
    }));

The above code creates the main map instance using the MapLibre GL JS library where you can specify various properties:

• container: Defines where the map should be displayed. In this instance, it is set to the ID of the <div> element.

• minZoom and maxZoom: Sets the minimum and maximum zoom level for the map. Users will not be able to go beyond these levels.

• maxBounds: Defines the maximum bounds and restricts panning the map.

• style: Defines the style of the map, configured via a URL pointing at the default style for the 'collectionId' defined.

• center: Sets the initial centre point of the map.

• zoom: Sets the initial zoom level of the map.

What's next?

Congratulations! You've successfully created a vector map using MapLibre GL JS using OS NGD API – Tiles in a few steps.

Now you can continue to explore Ordnance Survey's code examples to learn more about advanced features and functionality, such as adding markers, pop-ups, and additional layers.

Leaflet is an open-source JavaScript library for displaying interactive maps on the web or mobile. A simple and lightweight library that will enable you to display and visualise location data and build dynamic applications.

What you'll need

• OS NGD API – Tiles added to an API project in the OS Data Hub with an API Key.

• A text editor like Visual Studio Code or Notepad to edit and save your HTML and JavaScript files.

Create a basic vector map

Step 1: Set up your HTML file

1. Create a new HTML file with a text editor (for example, Notepad, Visual Studio Code).

2. Add the basic HTML structure to your file with a placeholder <div> for the map.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>OS NGD API – Tiles | Template (EPSG:3857) | Leaflet</title>
    
    <!--Add the Ordnance Survey Styling-->
    <link rel="stylesheet" href="https://labs.os.uk/public/os-api-branding/v0.3.1/os-api-branding.css" />
    <script src="https://labs.os.uk/public/os-api-branding/v0.3.1/os-api-branding.js"></script>
    
    <!--Add the Leaflet libraries-->
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css" />
    <link rel="stylesheet" href="https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.css" />
    <script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"></script>
    <script src="https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.js"></script>
    <script src="https://unpkg.com/@maplibre/maplibre-gl-leaflet@0.0.19/leaflet-maplibre-gl.js"></script>
    
    <style>
        /* Set the map container size and style */
        body { margin: 0; padding: 0; }
        #map { position: absolute; top: 0; bottom: 0; width: 100%; }
    </style>
</head>
<body>
    
    <!--Create a div element to hold the map-->
    <div id="map"></div>
    
    <!--Add your Javascript code below--> 
    <script>
        // Your Javascript code will go here

    </script>

</body>
</html>

Step 2: Insert your API Key

1. To enable access to OS APIs an API Key is required. Inside the <script> tag, add a variable called apiKey, replacing 'INSERT_API_KEY_HERE' with the API Key from your project.

2. Inside the <script> tag, add another variable called collectionIdwith the collection ID for the OS NGD API – Tiles basemap – ngd-base.

// Set API Key and collection ID
 const apiKey = 'INSERT_API_KEY_HERE';
 
 const collectionId = 'ngd-base';

Step 3: Adding a fetch and response interceptor

1. We need to intercept and customise the style request, adding a tiles property to provide a correctly formatted URL and ensure authentication through the apiKey is enabled to make sure that the correct tiles are requested.

2. Add the following code inside the JavaScript block:

// Modify the JSON style request incorporate a `tiles` property which lists an array of tile endpoints.
// The '&key=' HTTP query parameter is also appended to each tile endpoint to authenticate the request.
// NOTE: The {z}, {x} and {y} template values are replaced with the corresponding integers at runtime.
    const { fetch: originalFetch } = window;
    window.fetch = async (...args) => {
        let [ resource, config ] = args;

        let response = await originalFetch(resource, config);
        if( response.url != `https://api.os.uk/maps/vector/ngd/ota/v1/collections/${collectionId}/styles/3857` )
            return response;

        // Response interceptor.
        const json = () =>
            response.clone().json().then((data) => {
                delete data.sources[ collectionId ].url;
                data.sources[ collectionId ].tiles = [ `https://api.os.uk/maps/vector/ngd/ota/v1/collections/${collectionId}/tiles/3857/{z}/{y}/{x}?key=${apiKey}` ];
                return data;
            });

        response.json = json;
        return response;
    };

Step 4: Create a map and map view

1. Initialize the map object using the L.Map class to configure the vector tile layer and the mapOptions variable to define its properties – minZoom, maxZoom, maxBounds, center and zoom.

// Initialize the map.
    const mapOptions = {
        minZoom: 7,
        maxZoom: 20,
        center: [ 50.727589, -3.541809 ],
        zoom: 18,
        maxBounds: [
            [ 49.528423, -10.76418 ],
            [ 61.331151, 1.9134116 ]
        ],
        attributionControl: false
    };

    const map = L.map('map', mapOptions);

    // Load and display vector tile layer on the map.
    const gl = L.maplibreGL({
        style: `https://api.os.uk/maps/vector/ngd/ota/v1/collections/${collectionId}/styles/3857`
    }).addTo(map);

The above code creates the main map instance using the Leaflet library where you can specify various properties:

• minZoom and maxZoom: Sets the minimum and maximum zoom level for the map. Users will not be able to go beyond these levels.

• maxBounds: Defines the maximum bounds and restricts panning the map.

• center: Sets the initial centre point of the map.

• zoom: Sets the initial zoom level of the map.

What's next?

Congratulations! You've successfully created a vector map using Leaflet using OS NGD API – Tiles in a few steps.

Now you can continue to explore Ordnance Survey's code examples to learn more about advanced features and functionality, such as adding markers, pop-ups, and additional layers.

OpenLayers is a free and open-source JavaScript library for displaying interactive maps on the web. It is a powerful tool that can be used to create a wide variety of map-based applications, from simple web maps to complex GIS applications.

OpenLayers is easy to use and can be integrated with a variety of other web development frameworks.

What you'll need

• OS NGD API – Tiles added to an API project in the OS Data Hub with an API Key.

• A text editor like Visual Studio Code or Notepad to edit and save your HTML and JavaScript files.

Create a basic vector map

Step 1: Set up your HTML file

1. Create a new HTML file with a text editor (for example, Notepad, Visual Studio Code).

2. Add the basic HTML structure to your file with a placeholder <div> for the map.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>OS NGD API – Tiles | Template (EPSG:3857) | OpenLayers</title>
    
    <!--Add the Ordnance Survey Styling-->
    <link rel="stylesheet" href="https://labs.os.uk/public/os-api-branding/v0.3.1/os-api-branding.css" />
    <script src="https://labs.os.uk/public/os-api-branding/v0.3.1/os-api-branding.js"></script>
    
    <!--Add the OpenLayers libraries-->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@v7.3.0/ol.css" />
    <script src="https://cdn.jsdelivr.net/npm/ol@v7.3.0/dist/ol.js"></script>
    <script src="https://unpkg.com/ol-mapbox-style@9.7.0/dist/olms.js"></script>
        
    <style>
        /* Set the map container size and style */
        body { margin: 0; padding: 0; }
        #map { position: absolute; top: 0; bottom: 0; width: 100%; }
    </style>
</head>
<body>
    
    <!--Create a div element to hold the map-->
    <div id="map"></div>
    
    <!--Add your Javascript code below--> 
    <script>
        // Your Javascript code will go here

    </script>

</body>
</html>

Step 2: Insert your API Key

1. To enable access to OS APIs an API Key is required. Inside the <script> tag, add a variable called apiKey, replacing 'INSERT_API_KEY_HERE' with the API Key from your project.

2. Inside the <script> tag, add another variable called collectionId with the collection ID for the OS NGD API – Tiles basemap – ngd-base.

// Set API Key and collection ID
 const apiKey = 'INSERT_API_KEY_HERE';
 
 const collectionId = 'ngd-base';

Step 3: Tile grid set up

1. To correctly render the vector tiles within OpenLayers, you will need to fetch the defined EPSG:3857 Tile Matrix Set and style definitions from the OS NGD API – Tiles service. The two endpoints provide information about the structure of the vector tiles and how the styles are to be applied.

2. A promise.all is used to process the data to ensure that both requests are completed before proceeding.

3. Based on the fetched Tile Matrix Set data, a tile grid is defined using the ol.tilegrid.TileGrid class. The tile grid provides information about the resolution, origin and tile sizes to handle the vector tiles correctly.

4. Add the following code inside the JavaScript block:

// Define the Tile Grid and style

const tmsPromise = fetch('https://api.os.uk/maps/vector/ngd/ota/v1/tilematrixsets/3857').then((response) => response .json());
const glStylePromise = fetch(`https://api.os.uk/maps/vector/ngd/ota/v1/collections/${collectionId}/styles/3857`).then((response) => response .json());

Promise.all([tmsPromise, glStylePromise]).then((values) => {
    const tms = values[0];
    const glStyle = values[1];

    const tilegrid = new ol.tilegrid.TileGrid({
        resolutions: tms.tileMatrices.map(({ cellSize }) => cellSize),
        origin: tms.tileMatrices[0].pointOfOrigin,
        tileSize: [ tms.tileMatrices[0].tileHeight, tms.tileMatrices[0].tileWidth ]
    });

Step 4: Define a vector tile layer

1. Define the a new vector tiles layer and source that will be used to fetch vector tiles from OS NGD API – Tiles. The ol.layer.VectorTile uses a ol.source.OGCVectorTile source to retrieve tiles from the API.

2. After creating the vector layer, you will need to use a style function to ensure that the Ordnance Survey styles are applied to each tile. Use the olms.applyStyle function to retrieve the style sheets available for the basemap.

// Define the vector tile layer.
    const formatMvt = new ol.format.MVT();
    formatMvt.supportedMediaTypes.push('application/octet-stream');

    const vectorTileLayer = new ol.layer.VectorTile({
        source: new ol.source.OGCVectorTile({
            url: `https://api.os.uk/maps/vector/ngd/ota/v1/collections/${collectionId}/tiles/3857?key=${apiKey}`,
            format: formatMvt,
            projection: 'EPSG:3857',
            tileGrid: tilegrid
        }),
        declutter: true
    });

// Apply a style function to the vector tile layer.
    olms.applyStyle(
        vectorTileLayer,
        glStyle,
        collectionId,
        { styleUrl: null } ,
        tilegrid.getResolutions()
    );

Step 5: Create a map and map view

1. Initialize the map object using the ol.map class to configure the vector tile layer and define its properties – target, layers and view.

// Initialize the map object.
    const map = new ol.Map({
        layers: [ vectorTileLayer ],
        target: 'map',
        view: new ol.View({
            projection: 'EPSG:3857',
            extent: ol.proj.transformExtent([ -10.76418, 49.528423, 1.9134116, 61.331151 ], 'EPSG:4326', 'EPSG:3857'),
            resolutions: tilegrid.getResolutions(),
            minZoom: 6,
            maxZoom: 19,
            center: ol.proj.fromLonLat([ -3.541809, 50.727589 ]),
            zoom: 17
        })
    });
});

The above code creates the main map instance using the OpenLayers library where you can specify various properties:

• target: Defines where the map should be displayed. In this instance it is set to the ID of the <div> element.

• layers: An array containing the layers to be added to the map.

• view: Defines the initial view of the main, containing various settings such as projection, extent (the geographic bounds of the map), minimum and maximum zoom levels, centre of the map and the initial zoom level.

What's next?

Congratulations! You've successfully created a vector map using OpenLayers using OS NGD API – Tiles in a few steps.

Now you can continue to explore Ordnance Survey's code examples to learn more about advanced features and functionality, such as adding markers, pop-ups, and additional layers.

OS NGD API – Tiles Technical Specification provides an overview of the endpoints available, as well as the parameters that can be used with each endpoint. The Technical Specification is intended to be used by customers who want to integrate with the API. Click into each endpoint to learn more.

What is OS NGD API – Tiles?

OS NGD API – Tiles offers you a vector tile service powered by the OS NGD. It provides a detailed and customisable basemap that's based on the latest OGC API – Tiles standard to help you create stunning and interactive web maps. It can be used with most web mapping libraries, including OpenLayers, MapLibre GL JS and Leaflet. The major benefit of vector tiles is that they are optimised for use across the internet and are therefore great for building interactive web maps that allow users to zoom, pan, rotate, tilt and more.

You have a choice between using Ordnance Survey styles or creating your own. You can customise the content and style to create a professional-looking map that perfectly meets your needs, matches your branding, and pleases your customers.

OS NGD API – Tiles is available in two projections: British National Grid for Great Britain (GB) data and Web Mercator, a global coordinate system.

Benefits

Things to remember for OS NGD API – Tiles

What feature types are available in OS NGD API – Tiles?

Basemap (ngd-base)

The following table details the OS NGD datasets that were used to create the OS NGD API – Tiles basemap. The result is a detailed OS basemap that combines OS Open Zoomstack and OS NGD data.

Data overlays

The following table details the OS NGD datasets that can be used as overlays to the basemap to add additional information:

Attribution available in OS NGD API – Tiles

The following attribution is available as part of OS NGD API – Tiles:

Update frequency

The Cadcorp Spatial Information System® (Cadcorp SIS®) is an integrated family of geospatial products comprising desktop, web, and developer applications.

Cadcorp SIS Desktop connects directly to the OS Data Hub through dedicated wizards.

What you need

• Cadcorp SIS (version SIS 9.1 or later).

• OS NGD API – Tiles added to an API project in the OS Data Hub. (See for more information.)

Instructions

1. In Cadcorp SIS Desktop, open an existing map or create a new one.
2. In the Home tab, click Add Overlay.
3. In the Overlay Types dialog, select Ordnance Survey (GB) > OS (GB) Data Hub, and then click Next.
4. In the OS (GB) Data Hub dialog:

   • Select OS National Geographic Database (NGD) API - Tiles.

   • API Key: Enter your API key.

   • Premium / Public Sector Plan: Select this option if you have this plan.

   • Save in the UI settings database (encrypted): Select this option.

   • Click Next.
5. In the OS (GB) Data Hub NGD API - Tiles dialog, select the appropriate layer from the list of available options, and then click Finish.
6. The selected layer will automatically display in the map area.

QGIS is an open GIS (Geospatial Information System) desktop application that allows you to display, interrogate, visualise and create geospatial information including from geo-centric APIs (for example, a Vector Tiles Service).

The instructions that follow demonstrate how to connect to OS NGD API – Tiles using QGIS.

What you'll need

• QGIS (version 3.22.0 or later).

Instructions

1. Open an existing project or create a new one.

2. Deselect the Render checkbox in the bottom bar, if necessary.

1. Navigate to Layer > Add Layer > Add Vector Tile Layer...

1. In Data Source Manager | Vector Tile, click the New button below the drop-down menu and select New Generic Connection...

The Vector Tiles Connection dialog that pops up requires you to input the API information you obtained in the OS Data Hub.

1. In the Vector Tiles Connection dialog, provide the service details of the API:

• Name: Provide a name for the connection. It is good practice to name your connections in a way that makes them instantly recognisable. You can reuse this connection in the future.

• URL: Copy the OS NGD API – Tiles endpoint address from the OS Data Hub and paste it into this field. Your API Key is automatically appended to this URL in the key parameter.

• Min. and Max. Zoom Levels: Set these as follows based on your preferred projection:

  • Web Mercator (EPSG: 3857): Min Zoom = 6; Max Zoom = 19

  • British National Grid (BNG: EPSG: 27700): Min Zoom = 0; Max Zoom = 15

• Style URL: Input the OS NGD API – Tiles style URL to style the tiles based on the default style for the specified OS NGD collection.

• Authentication: Leave these settings at their defaults. You do not need a username or password as authentication is done through your API Key.

• Other: Leave all other settings at their defaults.

• Click OK.

1. In Data Source Manager | Vector Tile, click Add and Close. You'll then see the map displayed in the main QGIS UI.