OpenLayers
Accessing OS NGD data with 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 (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 and OS NGD Collection
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.Add a variable called
collectionId
, replacing'INSERT_COLLECTIONID_HERE'
with the collection ID for the desired NGD Feature Type and version (e.g. bld-fts-buildingpart-1).
Step 3: Add a basemap
Create a source for the basemap layer using the OS Maps API and initialize the
ol.map
class with the applicable map properties -target
,layers
andview
. 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 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.
Step 4: Add a OS NGD API - Features Layer
Define and initialize the source using the
ol.source.Vector
class to make a request to OS NGD API Features. By utilising theol.loadingstrategy.bbox
this means that data from the OS NGD API - Features will be loaded based on the visible map extent.Create a separate layer to overlay OS NGD data onto the map, you will need to add the
ngdFeatures
layers to theol.map
object to render both layers on the map.
Features within the viewport extent will load initially (first 100 features) and 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 the OS NGD API - Features 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