LogoLogo
OS Docs HomeOS NGDOS APIsOS Download ProductsMore than MapsContact Us
  • More than Maps
  • Geographic Data Visualisation
    • Guide to cartography
      • Introduction to cartography
      • Types of maps
      • Symbology
      • Colour
      • Text on maps
      • Generalisation
      • Coordinate reference systems
      • Projections
      • Scale
      • Map legends
      • Map layout
      • Relief representation
      • North arrows
    • Guide to data visualisation
      • Introduction to data visualisation
      • GeoDataViz design principles
      • Types of visualisation
      • Thematic mapping techniques
      • Data visualisation critique
      • Accessible data visualisation
      • Ethical data visualisation
      • Software
      • Data
    • GeoDataViz assets
      • GeoDataViz basemaps
      • Stylesheets
      • GeoDataViz virtual gallery
      • Equal area cartograms
      • How did I make that?
        • Apollo 11 Landing
        • North York Moors National Park, 70 years
        • Snowdonia National Park, 70 years
        • Great Britain's National Parks
        • Great Britain's Islands
        • Great Britain's AONB's and National Scenic Areas
        • Famous shipwrecks of Pembrokeshire
        • Trig pillars today
        • Britain's most complex motorway junctions
      • #30DayMapChallenge
  • Data in Action
    • Examples
  • Demonstrators
    • 🆕Product Viewer
    • Addressing & location demonstrators
      • Address Portfolio overview
      • Which address product should you use?
      • AddressBase
      • AddressBase Core
      • AddressBase Plus
      • AddressBase Premium
      • Address Classifications
      • Addressing Lifecycle
      • OS Emergency Services Gazetteer
      • What are Vertical Streets?
      • Why are there differences in boundaries?
    • Contextual demonstrators
    • Customer best practice
      • Channel Shift
      • Data Management and OS Data Hub
      • End User Licence vs Contractor Licence
      • 🆕 IDs vs Spatial Relationships
      • Why we should capture good quality addresses at source
      • Why we Snap and Trace
    • Network Demonstrators
      • OS Detailed Path Network
      • OS Multi Modal Routing Network
        • OS Multi Modal Routing Network
      • Water Networks overview
      • OS MasterMap Highways Network and OS NGD Speeds
      • OS MasterMap® Highways Network and OS Open Roadsâ„¢
    • OS MasterMap Generation APIs
      • Using the OS Features API
      • Using the OS Features API Archive
      • Using the OS Downloads API
      • Using OS APIs in ESRI Software
    • 🆕OS NGD (National Geographic Database)
      • OS NGD Address
      • OS NGD Boundaries
      • 🆕OS NGD Buildings
        • 🆕Building and Building Access Feature Types
        • Building Part and Building Line Feature Types
      • 🆕OS NGD Geographical Names
      • OS NGD Land
      • OS NGD Land Cover enhancements
      • 🆕OS NGD Land Use
      • OS NGD Land Use enhancements
      • 🆕OS NGD Structures
        • 🆕OS NGD Structures
        • Field Boundaries
      • 🆕OS NGD Transport Features
      • 🆕OS NGD Transport Network
      • OS NGD Transport RAMI
      • OS NGD Water Features
      • OS NGD Water Network
      • OS NGD API - Features
      • Ordering OS NGD data
      • Change only updates
      • OS NGD Versioning
      • Creating a topographic map from OS NGD Data
      • Analytical styling for OS NGD data
    • OS MasterMap® demonstrators
    • 🆕Product & API Comparisons
      • 🆕Comparison of Water Network Products
  • Tutorials
    • GeoDataViz
      • Thematic Mapping Techniques
      • Downloading and using data from the OS Data Hub
      • How to download and use OS stylesheets
      • How to use the OS Maps API
      • Creating a bespoke style in Maputnik
    • GIS
      • Analysing pavement widths
      • Basic routing with OS Open Data and QGIS
      • Walktime analysis using OS Multi-modal Routing Network and QGIS
      • Creating 3D Symbols for GIS Applications
      • Constructing a Single Line Address using a Geographic Address
      • Creating a Digital Terrain Model (DTM)
      • Visualising a road gradient using a Digital Terrain Model
      • Visualising a road gradient using OSMM Highways
    • 🆕APIs
      • 🆕Using OS APIs with EPC API
      • 🆕OS APIs and ArcGIS
  • Deep Dive
    • Introduction to address matching
    • Guide to routing for the Public Sector
      • Part 1: Guide to routing
      • Part 2: Routing software and data options
      • Part 3: Building a routable network
    • Unlocking the Power of Geospatial Data
    • Using Blender for Geospatial Projects
    • A Guide to Coordinate Systems in Great Britain
      • Myths about coordinate systems
      • The shape of the Earth
      • What is position?
        • Types of coordinates
        • We need a datum
        • Position summary
      • Modern GNSS coordinate systems
        • Realising WGS84 with a TRF
        • The WGS84 broadcast TRF
        • The International Terrestrial Reference Frame (ITRF)
        • The International GNSS Service (IGS)
        • European Terrestrial Reference System 1989 (ETRS89)
      • Ordnance Survey coordinate systems
        • ETRS89 realised through OS Net
        • National Grid and the OSGB36 TRF
        • Ordnance Datum Newlyn
        • The future of British mapping coordinate systems
        • The future of British mapping coordinate systems
      • From one coordinate system to another: geodetic transformations
        • What is a geodetic transformation?
        • Helmert datum transformations
        • National Grid Transformation OSTN15 (ETRS89–OSGB36)
        • National Geoid Model OSGM15 (ETRS89-Orthometric height)
        • ETRS89 to and from ITRS
        • Approximate WGS84 to OSGB36/ODN transformation
        • Transformation between OS Net v2001 and v2009 realisations
      • Transverse Mercator map projections
        • The National Grid reference convention
      • Datum, ellipsoid and projection information
      • Converting between 3D Cartesian and ellipsoidal latitude, longitude and height coordinates
      • Converting between grid eastings and northings and ellipsoidal latitude and longitude
      • Helmert transformation worked example
      • Further information
  • Code
    • Ordnance Survey APIs
    • Mapping
    • Routing with pgRouting
      • Getting started with OS MasterMap Highways and pgRouting
      • Getting started with OS MasterMap Highways Network - Paths and pgRouting
      • Getting started with OS NGD Transport Theme and pgRouting
      • Getting started with OS NGD Transport Path features and pgRouting
  • RESOURCES
    • 🆕Data Visualisation External Resources
Powered by GitBook

Website

  • Ordnance Survey

Data

  • OS Data Hub
On this page

Was this helpful?

  1. Tutorials
  2. GeoDataViz

Creating a bespoke style in Maputnik

PreviousHow to use the OS Maps APINextGIS

Last updated 3 months ago

Was this helpful?

Creating a bespoke style for the OS Vector Tile API

This ‘how-to’ will show you how to create your own style for the OS Vector Tile API which you can then use in Web Maps and GIS software.

To do this, we recommend using the open source visual editor, Maputnik - .

It is important to note that the OS Vector Tile API only works in epsg: 3857 (Web Mercator) in Maputnik. If you want to create a style for the epsg: 27700 (British National Grid) version of the OS Vector Tile API, please contact the Geographic Data Visualisation Team at OS () who will advise you further.

More information about the OS Vector Tile API can be found here:

  1. Loading Vector Tiles into Maputnik

Go to and click on ‘Editor’ at the top.

We recommend starting with one of our existing styles as a basis for creating your own style. These are available in our GitHub repo.

Click on the style you want (only the 3857 ones work in Maputnik).

A window with the json will open. At the top of this window, click on ‘Raw’

Copy the url for this json file.

Back in Maputnik, go to Open and then paste your style url into the ‘Load from URL’ box.

Click ‘Load from URL’.

You will now see various map layers displayed in the ‘Layers’ panel on the left hand side. The map will be blank at the moment – don’t worry, we’ll fix this next.

  1. Fixing the sprites and glyphs

Go to ‘Data Sources’ in the top toolbar.

Add ?srs=3857&key=INSERT_API_KEY_HERE to the TileJSON URL

?srs=3857&key=CuDdvyI6HXxBdScA4d7A7q8jGG4I1gYA

It should now read: https://api.os.uk/maps/vector/v1/vts?srs=3857&key=INSERT_API_KEY_HERE

Next go to ‘Style Settings’ in the top toolbar

Add ?srs=3857&key=INSERT_API_KEY_HERE to the Glyphs URL

It should now read: https://api.os.uk/maps/vector/v1/vts/resources/fonts/{fontstack}/{range}.pbf?srs=3857&key= INSERT_API_KEY_HERE

Hit ‘Enter’, close the Style Settings and your map should now appear in the Map view.

  1. Editing the map style

3.1 Layer Styling

Using the Layers panel on the left, click on the layer you want to alter.

You can also click on features on the map to find out what layer they are in. When you click on a feature on the map, a pop-up box will appear with all the layers available where you clicked. You can select the layer name in the map view pop-up and it will open that layer in the Layers panel on the left.

You can now use the Paint Properties in the editing panel on the left to alter the styling of these features. The colour of the features is quick and easy to change using the ‘Color’ property – click on the rgb value to open up a colour selector window.

There are many things you can change in maputnik with regard to styling. This includes the opacity of layers, the style of features at different zoom levels and what features appear at various zoom levels. It is also possible to filter the data based on an attribute value.

In the example below, we have filtered the roads layer to _symbol == 3 which identifies and filters out just Primary Roads. We have also adjusted the zoom levels such that our primary roads appear at zoom level 8 and disappear at zoom level 16.

You can also change the colour of features with zoom level by clicking the ∑ symbol next to Color and setting the rgb value for each zoom level. You can do the same with the Width of line features by clicking the ∑ symbol next to the Width and setting the width values for each zoom level.

In the Layers panel you can add new layers, rearrange your layers, hide layers, duplicate layers and remove layers.

3.2 Spritesheets (Symbols)

A spritesheet is a single image file that contains multiple smaller graphics or sprites. Sprites are used to create both point symbols and pattern fills and are used in Vector Tiles to determine the symbology. Unfortunately, they cannot be edited directly in Maputnik.

If you open up one of the style json files, you will see that they reference a spritesheet.

You will need to host the spritesheet somewhere (e.g. Github) before they can be used in Maputnik and you’ll need to reference this new spritesheet in the style json.

3.3 Glyphs (Fonts)

In Maputnik, glyphs essentially defining how letters, numbers, and symbols appear, and are typically loaded from a dedicated font file specified in your map style. This allows you to customize the appearance of text labels on your map by choosing different fonts and adjusting their properties within the Maputnik editor.

You define which font to use for your map labels by specifying a "glyphs" property in your style JSON, pointing to a URL where the font data is hosted.

  1. Exporting your style

When you are happy with all of the changes you have made, go to ‘Save’ in the top toolbar and then ‘Save As’. Save your json file to the location of your choosing.

If you want to use your new style in a GIS package such as QGIS (supports epsg: 3857 only) or Esri ArcPro (supports epsg: 27700 only), you will need to host your stylesheet somewhere, along with the glyphs and spritesheets.

You can read more about using bespoke Vector Tile styles in GIS software (including our pre-defined styles available on GitHub) here:

Go to the OS-Vector-Tile-API Stylesheets Repo in GitHub:

We recommend using one of our existing spritesheets for ease – we have these in full colour, greyscale and dark available in our GitHub Repo: .

In order to create your own bespoke symbology, you’ll either need to edit one of our existing spritesheets in an image editing software such as Adobe Photoshop or use Spreet () to create your own.

We generally recommend that you use our existing glyphs, as defined in the Vector Tile style json (you can change their size and colour in Maputnik). However, if you want to create your own, new glyphs can be generated using font-maker () and will need to be hosted somewhere before use. Again, you’ll need to reference the glyph file in the style json.

QGIS:

ArcPro:

ArcGIS Online:

OrdnanceSurvey/OS-Vector-Tile-API-Stylesheets: Cartographic stylesheets for use with OS Vector Tile API
OrdnanceSurvey/OS-Vector-Tile-API-Stylesheets: Cartographic stylesheets for use with OS Vector Tile API
https://crates.io/crates/spreet
https://maplibre.org/font-maker/
QGIS | OS APIs
ESRI ArcGIS Pro | OS APIs
ESRI ArcGIS Pro | OS APIs
Maputnik
geodataviz@os.uk
OS Vector Tile API | OS APIs
https://maputnik.github.io/
Maputnik
Ordnance Survey Vector Tile Service API styles on Github
Style json
json URL
Maputnik style loading window
Maputnik layer panel and style editor
Maputnik map window
Maputnik map window
Maputnik paint properties
Maputnik paint properties
Maputnik style editor
Maputnik paint properties
Maputnik style editor
Style spritesheet reference
Style glyph reference