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.
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.
<!DOCTYPEhtml><htmllang="en"><head> <metacharset="UTF-8"> <metahttp-equiv="X-UA-Compatible"content="IE=edge"> <metaname="viewport"content="width=device-width, initial-scale=1.0"> <title>OS NGD API – Tiles | Template (EPSG:3857) | MapLibre GL JS</title><!--Add the Ordnance Survey Styling--> <linkrel="stylesheet"href="https://labs.os.uk/public/os-api-branding/v0.3.1/os-api-branding.css" /> <scriptsrc="https://labs.os.uk/public/os-api-branding/v0.3.1/os-api-branding.js"></script><!--Add the MapLibre GL JS libaries --> <linkrel="stylesheet"href="https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.css" /> <scriptsrc="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--> <divid="map"></div><!--Add your Javascript code below--> <script>// Your Javascript code will go here </script></body></html>
Step 2: Insert your API Key
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 collectionIdwith the collection ID for the OS NGD API - Tiles base map - ngd-base
// Set API Key and collection IDconstapiKey='INSERT_API_KEY_HERE';constcollectionId='ngd-base';
Step 3: Adding Fetch and Response Interceptor
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:
// Modify the JSON style request incorporate a `tiles` property which lists an array of tile endpoints.// The '&key=' HTTP query parameter is also appended to each tile endpoint to authenticate the request.// NOTE: The {z}, {x} and {y} template values are replaced with the corresponding integers at runtime.const { fetch: originalFetch } = window;window.fetch=async (...args) => {let [ resource, config ] = args;let response =awaitoriginalFetch(resource, config);if( response.url !=`https://api.os.uk/maps/vector/ngd/ota/v1/collections/${collectionId}/styles/3857` )return response;// Response interceptor.constjson= () =>response.clone().json().then((data) => { data.sources[ collectionId ].tiles = [ `${data.sources[ collectionId ].url}/{z}/{y}/{x}?key=${apiKey}` ];
deletedata.sources[ collectionId ].url;return data; });response.json = json;return response; };
Step 4: Create a Map and map view
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.
// Initialize the map object.constmap=newmaplibregl.Map({ container:'map', minZoom:6, maxZoom:19, maxBounds: [ [ -8.74,49.84 ], [ 1.96,60.9 ] ], style:`https://api.os.uk/maps/vector/ngd/ota/v1/collections/${collectionId}/styles/3857`, center: [ -3.541809,50.727589 ], zoom:17, attributionControl:false });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(newmaplibregl.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 default style for the 'collectionId' defined.
center: Sets the initial center point of the map.
zoom: Sets the initial zoom level of the map.
What's Next
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.