LogoLogo
OS Docs HomeOS NGDOS APIsOS Download ProductsMore than MapsOS Data Hub
  • Introduction to OS APIs
  • Core Concepts
    • Getting started with an API project
    • Authentication
    • Error codes
    • Rate-limiting policy
    • OS API branding
    • Service level agreements
    • Service availability dashboard
  • Accessing OS APIs
    • OS Maps API
      • Layers and styles
      • Getting started
        • ESRI ArcGIS Online
        • ESRI ArcGIS Pro
        • ESRI ArcMap
        • Cadcorp SIS
        • MapInfo Pro
        • QGIS
      • Technical specification
        • ZXY
        • WMTS
      • Code examples
    • OS Vector Tile API
      • What data is available?
      • Getting started
        • ESRI ArcGIS Pro
        • Cadcorp SIS
        • QGIS
        • Create a web application using the OS Vector Tile API
      • Technical specification
        • Service Metadata
        • Stylesheet
        • Tile request
      • Code examples
      • Stylesheets
    • OS NGD API – Tiles
    • OS NGD API – Features
    • OS Features API
      • OS Product Archive
      • What data is available?
      • Getting started
        • ArcGIS Online
        • ArcGIS Pro
        • ArcMap
        • Cadcorp SIS
        • MapInfo Pro
        • QGIS
      • Technical specification
        • getCapabilities
        • describeFeatureType
        • getFeature
        • Filtering
        • Paging
        • Empty values
      • Code examples
    • OS Names API
      • Getting started with example queries using Node.js
      • Technical specification
        • Find
        • Nearest
      • Code list
      • Code examples
    • OS Linked Identifiers API
      • What data is available?
      • Getting started with implementing a look-up application
      • Technical specification
        • Identifier
        • Identifier Types
        • Feature Types
        • Product Version Information
      • Code examples
    • OS Places API
      • Getting started with example queries using Node.js
      • Technical specification
        • Find
        • Postcode
        • UPRN
        • Nearest
        • BBOX
        • Radius
        • Polygon
      • Datasets
      • Code lists
      • Code examples
    • OS Match & Cleanse API
      • End of Life Information
      • Getting started with an example match query using Node.js
      • Technical specification
      • Datasets
      • Code lists
    • OS Downloads API
      • Getting started
        • Automating OS OpenData downloads
        • Automating OS Premium data downloads
      • Technical specification
        • OpenData products
        • OpenData product details
        • Download an OpenData product
        • OpenData product image
        • Data packages
        • Data package ID
        • Data package version
        • Data package version ID
        • Download a data package
    • OAuth 2 API
      • Getting started
      • Technical specification
  • Additional resources
    • OS API Wrappers
      • JavaScript
      • Python
      • R
  • Extra Links
    • Accessibility
    • Contact us
    • PSGA Product Summary
    • Terms and conditions
Powered by GitBook
On this page
  • What you need?
  • Instructions

Was this helpful?

  1. Accessing OS APIs
  2. OS Vector Tile API
  3. Getting started

Create a web application using the OS Vector Tile API

PreviousQGISNextTechnical specification

Last updated 4 months ago

Was this helpful?

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 GitHub repository.

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

Instructions

1

Download the OS Vector Tile API repository

  • Open the repository on GitHub.

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

2

Install the OS Vector Tile API repository

  • 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.

  • 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.

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

3

Using the OS Vector Tile API demo

To use the demo, open up your My projects page on the OS Data Hub and copy your Project API Key. Paste the key into the Project API Key box on the local server demo.

This generates a fully-styled map using the OS Vector Tile API service available for you to explore.

OS Data Hub API Demos
OS Data Hub API Demos
OS Data Hub API Demos repository on GitHub
OS Data Hub API Demos repository Code > Download ZIP option
UnzippedOSVectorTileAPI folders
OS VTS API in Aptana Studio 3
OS Vector Tile API demonstrator displayed in a browser window
OS Vector Tile API demonstrator displaying an example map