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.
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 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.
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).
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
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.
Define and initialize 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 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 the ol.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.
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.