OS OpenSpace API code playground

Have a play with OS OpenSpace API now

Click on one of the example links below, it will show the end result of the example code.
Click on ‘Edit in Code Playground’ to see the HTML and JavaScript codes. You can also click on ‘Real-time preview’ to see the map change as you change the code.
Click ‘Render’ to go back to the full view of the map.
Click ‘Download’ to download the full code merged into one HTML file, ready for you to use.

Basic Maps

Basic Map
Basic Map with place name search
Basic Map with OS VectorMap District
Basic Fullscreen Map

Creating lines and polygons

Create a polyline
Create a polygon
Polygon/Polyline/Point - click or touch with drawing toolbar

Markers

Adding a marker
Adding two or more markers
Adding a custom marker
Add text, links and images to a marker
Add markers and text from a file
Add markers and text from a file with clustering
Add/delete/drag a marker – click or touch
Draggable marker on left map with a synchronising right map
Linking a marker to a website

Administrative Boundaries

Display an administrative boundary
Displaying specific boundaries by id
Creating Thematic Boundaries
Creating a boundary layer with hover control

Overlays

Coordinate overlay
Add a.gpx (GPS route) file
Add overview window to map
Basic Image Overlay