OpenLayers
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.
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
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.
Step 2: Insert your API Key
To enable access to OS APIs an API key is required. Inside the
<script>
tag, add a variable calledapiKey
, replacing'INSERT_API_KEY_HERE'
with the API key from your project.Inside the
<script>
tag, add another variable calledcollectionId
with the collection ID for the OS NGD API - Tiles base map -ngd-base
Step 3: Tile Grid Set Up
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:
Step 4: Define a vector tile layer
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 aol.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.
Step 5: Create a Map and map view
Initialize the map object using the
ol.map
class to configure the vector tile layer and define its properties -target
,layers
andview
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 theID
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 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.
Last updated