Create a web application using the OS Vector Tile API

This guide explains how to create a web application using the OS Vector Tile API and the Ordnance Survey GitHub Demo repository.

What you need?

• Basic web development skills.

• Access to an IDE.

• Access to the OS Data Hub API Demos GitHub repository.

• OS Vector Tiles API Project key. See Getting started with an API project for more information.

Instructions

Downloading and installing the OS Vector Tile API repository

1. Open the OS Data Hub API Demos repository on GitHub.

   
2. Click the green Code button and then click Download ZIP.

   

3. Navigate to your downloads page, unzip the OSVectorTileAPI folder from the newly downloaded file and place it in your IDE project repository. When you open your IDE, the new files should appear automatically in your project window. The folders you have installed contain all the code required to call and interact with the code libraries.

   

4. To launch the web application, navigate to and open the index.html file found in the OpenLayers folder, and then run the application. Methods on how to do this differ between IDEs.

   

Using the OS Vector Tile API demo

1. Running the project launches a window in your browser that looks like this:

   

   The demo application is now running on a temporary local server from your own computer. This sever is private to your IP address and cannot be shared with other users. This server exists as long as your IDE is open. You have to run the index.html file through your IDE each time you wish to use the demo.

2. To use the demo, open your My projects page on the OS Data Hub and copy your Project API Key.

   
3. Paste the key into the Project API Key box on the local server demo and click Load Map. This generates a fully-styled map using the OS Vector Tile API service available for you to explore. You can also use the code provided in the demo as the basis for your own web application.