Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Accessing OS NGD API - Tiles via QGIS
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).
QGIS (version 3.22.0 or later)
Open a blank document in QGIS. Uncheck the "Render" box for now.
Navigate to Layer → Add Layer → Add Vector Tilers Layer...
The following window will be displayed:
Click the New button below the drop-down menu and select New Generic Connection
The window that pops up requires the API information you obtained in the OS Data Hub.
Provide the service details of the API as follows:
Provide a name for the API. It is good practice to name your connections in a way that makes them instantly recognisable.
In the URL box, input the OS NGD API - Tiles URL to retrieve tiles for your preferred collection.
Your API Key, which has been generated in the OS Data Hub.
Set the Min and Max Zoom Levels 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
In the Style URL box, input the OS NGD API - Tiles style URL to style the tiles based on the default style for the specified collection.
Leave all other options blank and click OK.
To retrieve tiles and style them appropriately, you will need two URLs. The URLs have slight variations based on the collection ID and projection. Here are some example URLs to retrieve the basemap (ngd-base) in Web Mercator (EPSG: 3857):
https://api.os.uk/maps/vector/ngd/ota/v1/collections/ngd-base/styles/3857?key={INSERT_YOUR_API_KEY}
Please note: You will need to replace the /{tileMatrix}/{tileRow}/{tileCol} used in the default 'retrieve tile' URL with /{z}/{y}/{x} to be able to connect to the OS NGD API - Tiles.
Click Add and Close in the Data Source Manager and you'll see the map displayed in the QGIS screen
To learn more about the available collections in OS NGD API - Tiles, you can view what data is available .
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.
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.
These pages should be used in conjunction with the more detailed pages within the Data Structure section and Technical Specification.
Accessing OS NGD API - Tiles 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 pf features for creating maps with custom styles, markers and interactivity.
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 new HTML file with a text editor (e.g. Notepad, Visual Studio Code).
Add the basic HTML structure to your file with a placeholder <div>
for the map.
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.
Inside the <script>
tag, add another variable called collectionId
with the collection ID for the OS NGD API - Tiles base map - ngd-base
We need to intercept and customise the style request, adding a tiles
property to provide a correctly formatted URL and authentication through the apiKey
is enabled to ensure the correct tiles are requested.
Add the following code inside the Javascript block:
Initialize 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
.
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 default style for the 'collectionId
' defined.
center
: Sets the initial center point of the map.
zoom
: Sets the initial zoom level of the map.
Congratulations! You've successfully created a vector map using MapLibre GL JS using the OS NGD API - Tiles in a few steps. 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.
The following sub-sections provide step-by-step instructions on how to access OS NGD API - Tiles in various GIS software packages.
Accessing OS NGD API - Tiles 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.
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 new HTML file with a text editor (e.g. Notepad, Visual Studio Code)
Add the basic HTML structure to your file with a placeholder <div>
for the map.
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.
Inside the <script>
tag, add another variable called collectionId
with the collection ID for the OS NGD API - Tiles base map - ngd-base
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.
A promise.all
is used to process the data to ensure that both requests are completed before proceeding.
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.
Add the following code inside the Javascript block:
Define the a new vector tiles layer and source that will be used to fetch vector tiles from the OS NGD API - Tiles. The ol.layer.VectorTile
uses a ol.source.OGCVectorTile
source to retreive tiles from the API.
After creating the vector layer, you will need to use a style function to ensure that the Ordnance Survey style are applied to each tile. Using the olms.applyStyle
function to retrieve the style sheets available for the base map.
Initialize the map object using the ol.map
class to configure the vector tile layer and define its properties - target
, layers
and view
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.
Congratulations! You've successfully created a vector map using OpenLayers using the OS NGD API - Tiles in a few steps. 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.
Accessing OS NGD API - Tiles 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.
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 new HTML file with a text editor (e.g. Notepad, Visual Studio Code).
Add the basic HTML structure to your file with a placeholder <div>
for the map.
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.
Inside the <script>
tag, add another variable called collectionId
with the collection ID for the OS NGD API - Tiles base map - ngd-base
We need to intercept and customise the style request, adding a tiles property to provide a correctly formatted URL and authentication through the apiKey is enabled to ensure the correct tiles are requested.
Add the following code inside the Javascript block:
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
.
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 center point of the map.
zoom
: Sets the initial zoom level of the map.
Congratulations! You've successfully created a vector map using Leaflet using the OS NGD API - Tiles in a few steps. 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.