1 of 4

Libraries

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:

Leaflet
MapLibre GL JS
OpenLayers

Leaflet

Accessing OS NGD API – Features via Leaflet

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 Maps API and OS NGD API – Features 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 map

Step 1: Set up your HTML file

Create a new HTML file with a text editor (for example, Notepad, Visual Studio Code).
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 – Features | Template (EPSG:3857) | Leaflet</title>
    
    <!--Add the Ordnance Survey Styling-->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/OrdnanceSurvey/os-api-branding@0.3.1/os-api-branding.css" />
    <script src="https://cdn.jsdelivr.net/gh/OrdnanceSurvey/os-api-branding@0.3.1/os-api-branding.js"></script>
    
    <!--Add the Leaflet libraries-->
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.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 and OS NGD collection

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

// Set API Key 
 const apiKey = 'INSERT_API_KEY_HERE';
 
 const collectionId= 'INSERT_COLLECTIONID_HERE';

Step 3: Add a basemap

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.
Initialize the map with the id of the <div> element and the configuration option defined in mapOptions.
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.

// 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 ZXY tile layer on the map.
    const basemap = L.tileLayer(`https://api.os.uk/maps/raster/v1/zxy/Light_3857/{z}/{x}/{y}.png?key=${apiKey}`, {
        maxZoom: 20
    }).addTo(map);

Step 4: Add an OS NGD API – Features layer

Create a function called fetchFeatures that fetches the API based on the current map extent (bounding box) by generating a bbox string.
Construct the API request URL to fetch OS NGD data from OS NGD API – Features. The URL includes the collectionId, bbox and apiKey.
Once the features have been returned in JSON, update the source data of the map's layers to display the features.

// Add layer group to make it easier to add or remove layers from the map.
    const lyrGroup = new L.layerGroup().addTo(map);

// Define an asynchronous function to fetch and display the NGD Features API features.
    async function fetchFeatures(bounds) {
        // Generate a BBOX string for the map extent.
        const bbox = bounds.toBBoxString();

        // Construct the NGD Features API request URL.
        const url = `https://api.os.uk/features/ngd/ofa/v1/collections/${collectionId}/items?key=${apiKey}&bbox=${bbox}`;

        // Fetch features from the API endpoint.
        const features = await fetch(url).then(response => response.json());

        // Parse the GeoJSON data and display it on the map.
        lyrGroup.clearLayers().addLayer(L.geoJSON(features));
    }

// Get the visible map bounds (BBOX).
    let bounds = map.getBounds();

// Initial fetch and display of features.
    fetchFeatures(bounds);

Step 5: Load and update features on the map dynamically

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

// Add event which will be triggered when the map has finshed moving (pan + zoom).
// Implements a simple strategy to only request data when the map viewport invalidates
// certain bounds.
    map.on('moveend', function() {
        let bounds1 = new L.latLngBounds(bounds.getSouthWest(), bounds.getNorthEast()),
            bounds2 = map.getBounds();

        if( JSON.stringify(bounds) !== JSON.stringify(bounds1.extend(bounds2)) ) {
            bounds = bounds2;
            fetchFeatures(bounds);
        }
    });

Features within the viewport extent will load initially (first 100 features) and will continue to load as you pan and zoom across the map.

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.

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.

MapLibre GL JS

Accessing OS NGD API – Features via MapLibre GL JS

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 Maps API and OS NGD API – Features 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 map

Step 1: Set up your HTML file

Create a new HTML file with a text editor (for example, Notepad, Visual Studio Code).
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 – Features | Template (EPSG:3857) | Maplibre GL JS</title>
    
    <!--Add the Ordnance Survey Styling-->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/OrdnanceSurvey/os-api-branding@0.3.1/os-api-branding.css" />
    <script src="https://cdn.jsdelivr.net/gh/OrdnanceSurvey/os-api-branding@0.3.1/os-api-branding.js"></script>
    
    <!--Add the Maplibre GL JSlibraries-->
    <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 and OS NGD collection

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

// Set API Key 
 const apiKey = 'INSERT_API_KEY_HERE';
 
 const collectionId= 'INSERT_COLLECTIONID_HERE';

Step 3: Add a basemap

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.
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.
Add navigation controls to the map, excluding the compass button and disabling map rotation.

// Create a map style object using the ZXY service.
    const style = {
    "version": 8,
        "sources": {
            "raster-tiles": {
            "type": "raster",
            "tiles": [`https://api.os.uk/maps/raster/v1/zxy/Light_3857/{z}/{x}/{y}.png?key=${apiKey}`],
            "tileSize": 256
            }
         },
         "layers": [{
             "id": "os-maps-zxy",
             "type": "raster",
             "source": "raster-tiles"
         }]
     };
     
     // Initialize the map object.
         const map = new maplibregl.Map({
             container: 'map',
             minZoom: 6,
             maxZoom: 19,
             style: style,
             maxBounds: [
                 [-10.76418, 49.528423],
                 [1.9134116, 61.331151]
             ],
             center: [-3.541809, 50.727589],
             zoom: 17
         });
         
         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 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

Create an empty GeoJSON placeholder to hold the feature objects called by OS NGD API – Features.
Create a function called fetchFeatures that fetches the API based on the current map extent (bounding box) by generating a bbox string.
Construct the API request URL to fetch OS NGD data from OS NGD API – Features. The URL includes the collectionId, bbox and apiKey.
Once the features have been returned in JSON, update the source data of the map's layers to display the features.

let layers = [ 'polygon', 'linestring', 'point' ];

// Create an empty GeoJSON FeatureCollection.
const geoJson = {
    "type": "FeatureCollection",
    "features": []
};

// Define an asynchronous function to fetch and display the NGD Features API features.
async function fetchFeatures(bounds) {
        // Generate a BBOX string for the map extent.
        const bbox = bounds.toArray().toString();

        // Construct the NGD Features API request URL.
        const url = `https://api.os.uk/features/ngd/ofa/v1/collections/${collectionId}/items?&key=${apiKey}&bbox=${bbox}`;

        // Fetch features from the API endpoint.
        const features = await fetch(url).then(response => response.json());

        // Update the source data with the new GeoJSON data.
        layers.forEach((element) => map.getSource(element).setData(features))
}

Step 5: Load and update features on the map dynamically

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.

map.on('load', () => {
    // Add a fill style layer to render polygons on the map.
    map.addLayer({
        "id": "polygon",
        "type": "fill",
        "source": {
            "type": "geojson",
            "data": geoJson
        },
        "layout": {},
        "paint": {
            "fill-color": "rgba(51,136,255,0.3)",
            "fill-outline-color": "#38f"
        },
        "filter": [ "==", "$type", "Polygon" ]
    });

    // Add a line style layer to render linestrings on the map.
    map.addLayer({
        "id": "linestring",
        "type": "line",
        "source": {
            "type": "geojson",
            "data": geoJson
        },
        "layout": {},
        "paint": {
            "line-color": "#38f",
            "line-width": 1
        },
        "filter": [ "==", "$type", "LineString" ]
    });

    // Add a circle style layer to render points on the map.
    map.addLayer({
        "id": "point",
        "type": "circle",
        "source": {
            "type": "geojson",
            "data": geoJson
        },
        "layout": {},
        "paint": {
            "circle-color": "rgba(51,136,255,0.8)",
            "circle-radius": 4,
            "circle-stroke-color": "#fff",
            "circle-stroke-width": 1
        },
        "filter": ["==", "$type", "Point"]
    });

    // Get the visible map bounds (BBOX).
    let bounds = map.getBounds();

    // Initial fetch and display of features.
    fetchFeatures(bounds);
        
    // Add event which will be triggered when the map has finshed moving (pan + zoom).
    // Implements a simple strategy to only request data when the map viewport invalidates
    // certain bounds.
    map.on('moveend', function() {
        let bounds1 = new maplibregl.LngLatBounds(bounds.getSouthWest(), bounds.getNorthEast()),
            bounds2 = map.getBounds();

        if( JSON.stringify(bounds) !== JSON.stringify(bounds1.extend(bounds2)) ) {
            bounds = bounds2;
            fetchFeatures(bounds);
        }
    });
});

Features within the viewport extent will load initially (first 100 features) and will continue to load as you pan and zoom across the map.

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.

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

Accessing OS NGD API – Features via OpenLayers

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 Maps API and OS NGD API – Features 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 map

Step 1: Set up your HTML file

Create a new HTML file with a text editor (for example, Notepad, Visual Studio Code).
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 – Features | Template (EPSG:3857) | OpenLayers</title>
    
    <!--Add the Ordnance Survey Styling-->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/OrdnanceSurvey/os-api-branding@0.3.1/os-api-branding.css" />
    <script src="https://cdn.jsdelivr.net/gh/OrdnanceSurvey/os-api-branding@0.3.1/os-api-branding.js"></script>
    
    <!--Add the OpenLayers libraries-->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@v8.1.0/ol.css" />
    <script src="https://cdn.jsdelivr.net/npm/ol@v8.1.0/dist/ol.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 and OS NGD collection

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

// Set API Key 
 const apiKey = 'INSERT_API_KEY_HERE';
 
 const collectionId= 'INSERT_COLLECTIONID_HERE';

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:

// Initialize the map object.
    const map = new ol.Map({
        target: 'map',
        layers: [
            new ol.layer.Tile({
                source: new ol.source.XYZ({
                    url: `https://api.os.uk/maps/raster/v1/zxy/Light_3857/{z}/{x}/{y}.png?key=${apiKey}`
                })
            })
        ],
        view: new ol.View({
            projection: 'EPSG:3857',
            extent: ol.proj.transformExtent([ -10.76418, 49.528423, 1.9134116, 61.331151 ], 'EPSG:4326', 'EPSG:3857'),
            minZoom: 7,
            maxZoom: 20,
            center: ol.proj.fromLonLat([ -3.541809, 50.727589 ]),
            zoom: 18
        })
    });

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

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

// Create the NGD Features API layer (with BBOX strategy).
    const ngdFeatures = new ol.layer.Vector({
        source: new ol.source.Vector({
            format: new ol.format.GeoJSON(),
            url: function(extent) {
                return (
                    `https://api.os.uk/features/ngd/ofa/v1/collections/${collectionId}/items?key=${apiKey}&bbox=${extent.join(',')}&bbox-crs=http://www.opengis.net/def/crs/EPSG/0/3857`
                );
            },
            strategy: ol.loadingstrategy.bbox
        })
    });

    // Add the NGD Features API layer to the map.
    map.addLayer(ngdFeatures);

Features within the viewport extent will load initially (first 100 features) and will continue to load as you pan across 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.

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.

MapLibre GL JS

Accessing OS NGD API – Features via MapLibre GL JS

What you'll need

OS Maps API and OS NGD API – Features 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 map

Step 1: Set up your HTML file

Create a new HTML file with a text editor (for example, Notepad, Visual Studio Code).
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 – Features | Template (EPSG:3857) | Maplibre GL JS</title>
    
    <!--Add the Ordnance Survey Styling-->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/OrdnanceSurvey/os-api-branding@0.3.1/os-api-branding.css" />
    <script src="https://cdn.jsdelivr.net/gh/OrdnanceSurvey/os-api-branding@0.3.1/os-api-branding.js"></script>
    
    <!--Add the Maplibre GL JSlibraries-->
    <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 and OS NGD collection

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

// Set API Key 
 const apiKey = 'INSERT_API_KEY_HERE';
 
 const collectionId= 'INSERT_COLLECTIONID_HERE';

Step 3: Add a basemap

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.
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.
Add navigation controls to the map, excluding the compass button and disabling map rotation.

// Create a map style object using the ZXY service.
    const style = {
    "version": 8,
        "sources": {
            "raster-tiles": {
            "type": "raster",
            "tiles": [`https://api.os.uk/maps/raster/v1/zxy/Light_3857/{z}/{x}/{y}.png?key=${apiKey}`],
            "tileSize": 256
            }
         },
         "layers": [{
             "id": "os-maps-zxy",
             "type": "raster",
             "source": "raster-tiles"
         }]
     };
     
     // Initialize the map object.
         const map = new maplibregl.Map({
             container: 'map',
             minZoom: 6,
             maxZoom: 19,
             style: style,
             maxBounds: [
                 [-10.76418, 49.528423],
                 [1.9134116, 61.331151]
             ],
             center: [-3.541809, 50.727589],
             zoom: 17
         });
         
         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 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

Create an empty GeoJSON placeholder to hold the feature objects called by OS NGD API – Features.
Create a function called fetchFeatures that fetches the API based on the current map extent (bounding box) by generating a bbox string.
Construct the API request URL to fetch OS NGD data from OS NGD API – Features. The URL includes the collectionId, bbox and apiKey.
Once the features have been returned in JSON, update the source data of the map's layers to display the features.

let layers = [ 'polygon', 'linestring', 'point' ];

// Create an empty GeoJSON FeatureCollection.
const geoJson = {
    "type": "FeatureCollection",
    "features": []
};

// Define an asynchronous function to fetch and display the NGD Features API features.
async function fetchFeatures(bounds) {
        // Generate a BBOX string for the map extent.
        const bbox = bounds.toArray().toString();

        // Construct the NGD Features API request URL.
        const url = `https://api.os.uk/features/ngd/ofa/v1/collections/${collectionId}/items?&key=${apiKey}&bbox=${bbox}`;

        // Fetch features from the API endpoint.
        const features = await fetch(url).then(response => response.json());

        // Update the source data with the new GeoJSON data.
        layers.forEach((element) => map.getSource(element).setData(features))
}

Step 5: Load and update features on the map dynamically

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.

map.on('load', () => {
    // Add a fill style layer to render polygons on the map.
    map.addLayer({
        "id": "polygon",
        "type": "fill",
        "source": {
            "type": "geojson",
            "data": geoJson
        },
        "layout": {},
        "paint": {
            "fill-color": "rgba(51,136,255,0.3)",
            "fill-outline-color": "#38f"
        },
        "filter": [ "==", "$type", "Polygon" ]
    });

    // Add a line style layer to render linestrings on the map.
    map.addLayer({
        "id": "linestring",
        "type": "line",
        "source": {
            "type": "geojson",
            "data": geoJson
        },
        "layout": {},
        "paint": {
            "line-color": "#38f",
            "line-width": 1
        },
        "filter": [ "==", "$type", "LineString" ]
    });

    // Add a circle style layer to render points on the map.
    map.addLayer({
        "id": "point",
        "type": "circle",
        "source": {
            "type": "geojson",
            "data": geoJson
        },
        "layout": {},
        "paint": {
            "circle-color": "rgba(51,136,255,0.8)",
            "circle-radius": 4,
            "circle-stroke-color": "#fff",
            "circle-stroke-width": 1
        },
        "filter": ["==", "$type", "Point"]
    });

    // Get the visible map bounds (BBOX).
    let bounds = map.getBounds();

    // Initial fetch and display of features.
    fetchFeatures(bounds);
        
    // Add event which will be triggered when the map has finshed moving (pan + zoom).
    // Implements a simple strategy to only request data when the map viewport invalidates
    // certain bounds.
    map.on('moveend', function() {
        let bounds1 = new maplibregl.LngLatBounds(bounds.getSouthWest(), bounds.getNorthEast()),
            bounds2 = map.getBounds();

        if( JSON.stringify(bounds) !== JSON.stringify(bounds1.extend(bounds2)) ) {
            bounds = bounds2;
            fetchFeatures(bounds);
        }
    });
});

Features within the viewport extent will load initially (first 100 features) and will continue to load as you pan and zoom across the map.

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.

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

Accessing OS NGD API – Features via Leaflet

What you'll need

OS Maps API and OS NGD API – Features 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 map

Step 1: Set up your HTML file

Create a new HTML file with a text editor (for example, Notepad, Visual Studio Code).
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 – Features | Template (EPSG:3857) | Leaflet</title>
    
    <!--Add the Ordnance Survey Styling-->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/OrdnanceSurvey/os-api-branding@0.3.1/os-api-branding.css" />
    <script src="https://cdn.jsdelivr.net/gh/OrdnanceSurvey/os-api-branding@0.3.1/os-api-branding.js"></script>
    
    <!--Add the Leaflet libraries-->
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.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 and OS NGD collection

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

// Set API Key 
 const apiKey = 'INSERT_API_KEY_HERE';
 
 const collectionId= 'INSERT_COLLECTIONID_HERE';

Step 3: Add a basemap

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.
Initialize the map with the id of the <div> element and the configuration option defined in mapOptions.
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.

// 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 ZXY tile layer on the map.
    const basemap = L.tileLayer(`https://api.os.uk/maps/raster/v1/zxy/Light_3857/{z}/{x}/{y}.png?key=${apiKey}`, {
        maxZoom: 20
    }).addTo(map);

Step 4: Add an OS NGD API – Features layer

Create a function called fetchFeatures that fetches the API based on the current map extent (bounding box) by generating a bbox string.
Construct the API request URL to fetch OS NGD data from OS NGD API – Features. The URL includes the collectionId, bbox and apiKey.
Once the features have been returned in JSON, update the source data of the map's layers to display the features.

// Add layer group to make it easier to add or remove layers from the map.
    const lyrGroup = new L.layerGroup().addTo(map);

// Define an asynchronous function to fetch and display the NGD Features API features.
    async function fetchFeatures(bounds) {
        // Generate a BBOX string for the map extent.
        const bbox = bounds.toBBoxString();

        // Construct the NGD Features API request URL.
        const url = `https://api.os.uk/features/ngd/ofa/v1/collections/${collectionId}/items?key=${apiKey}&bbox=${bbox}`;

        // Fetch features from the API endpoint.
        const features = await fetch(url).then(response => response.json());

        // Parse the GeoJSON data and display it on the map.
        lyrGroup.clearLayers().addLayer(L.geoJSON(features));
    }

// Get the visible map bounds (BBOX).
    let bounds = map.getBounds();

// Initial fetch and display of features.
    fetchFeatures(bounds);

Step 5: Load and update features on the map dynamically

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

// Add event which will be triggered when the map has finshed moving (pan + zoom).
// Implements a simple strategy to only request data when the map viewport invalidates
// certain bounds.
    map.on('moveend', function() {
        let bounds1 = new L.latLngBounds(bounds.getSouthWest(), bounds.getNorthEast()),
            bounds2 = map.getBounds();

        if( JSON.stringify(bounds) !== JSON.stringify(bounds1.extend(bounds2)) ) {
            bounds = bounds2;
            fetchFeatures(bounds);
        }
    });

Features within the viewport extent will load initially (first 100 features) and will continue to load as you pan and zoom across the map.

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.

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

Accessing OS NGD API – Features via OpenLayers

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 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 map

Step 1: Set up your HTML file

Create a new HTML file with a text editor (for example, Notepad, Visual Studio Code).
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 – Features | Template (EPSG:3857) | OpenLayers</title>
    
    <!--Add the Ordnance Survey Styling-->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/OrdnanceSurvey/os-api-branding@0.3.1/os-api-branding.css" />
    <script src="https://cdn.jsdelivr.net/gh/OrdnanceSurvey/os-api-branding@0.3.1/os-api-branding.js"></script>
    
    <!--Add the OpenLayers libraries-->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@v8.1.0/ol.css" />
    <script src="https://cdn.jsdelivr.net/npm/ol@v8.1.0/dist/ol.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 and OS NGD collection

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

// Set API Key 
 const apiKey = 'INSERT_API_KEY_HERE';
 
 const collectionId= 'INSERT_COLLECTIONID_HERE';

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:

// Initialize the map object.
    const map = new ol.Map({
        target: 'map',
        layers: [
            new ol.layer.Tile({
                source: new ol.source.XYZ({
                    url: `https://api.os.uk/maps/raster/v1/zxy/Light_3857/{z}/{x}/{y}.png?key=${apiKey}`
                })
            })
        ],
        view: new ol.View({
            projection: 'EPSG:3857',
            extent: ol.proj.transformExtent([ -10.76418, 49.528423, 1.9134116, 61.331151 ], 'EPSG:4326', 'EPSG:3857'),
            minZoom: 7,
            maxZoom: 20,
            center: ol.proj.fromLonLat([ -3.541809, 50.727589 ]),
            zoom: 18
        })
    });

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

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

// Create the NGD Features API layer (with BBOX strategy).
    const ngdFeatures = new ol.layer.Vector({
        source: new ol.source.Vector({
            format: new ol.format.GeoJSON(),
            url: function(extent) {
                return (
                    `https://api.os.uk/features/ngd/ofa/v1/collections/${collectionId}/items?key=${apiKey}&bbox=${extent.join(',')}&bbox-crs=http://www.opengis.net/def/crs/EPSG/0/3857`
                );
            },
            strategy: ol.loadingstrategy.bbox
        })
    });

    // Add the NGD Features API layer to the map.
    map.addLayer(ngdFeatures);

Features within the viewport extent will load initially (first 100 features) and will continue to load as you pan across 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.

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.