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.
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) | Leaflet</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 Leaflet libraries--> <linkrel="stylesheet"href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css" /> <linkrel="stylesheet"href="https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.css" /> <scriptsrc="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"></script> <scriptsrc="https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.js"></script> <scriptsrc="https://unpkg.com/@maplibre/maplibre-gl-leaflet@0.0.19/leaflet-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) => {deletedata.sources[ collectionId ].url; data.sources[ collectionId ].tiles = [ `https://api.os.uk/maps/vector/ngd/ota/v1/collections/${collectionId}/tiles/3857/{z}/{y}/{x}?key=${apiKey}` ];
return data; });response.json = json;return response; };
Step 4: Create a Map and map view
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.
// Initialize the map.constmapOptions= { minZoom:7, maxZoom:20, center: [ 50.727589,-3.541809 ], zoom:18, maxBounds: [ [ 49.528423,-10.76418 ], [ 61.331151,1.9134116 ] ], attributionControl:false };constmap=L.map('map', mapOptions);// Load and display vector tile layer on the map.constgl=L.maplibreGL({ style:`https://api.os.uk/maps/vector/ngd/ota/v1/collections/${collectionId}/styles/3857` }).addTo(map);
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.
What's Next
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.