Using OpenMapTiles with Mapbox GL

To display maps with Mapbox GL you need

  1. Style: A JSON style specification which describes how your map looks like
  2. Data: Vector Tiles as data source for your style

OpenMapTiles provides both vector tiles you can download and ready-made styles to use together with them. Check out how to display a map with Mapbox GL JS.


Styles are written in a JSON format called the Mapbox GL Style Spec.

Data Source

Making your style to work together with OpenMapTiles vector tiles, you need to point the data source to a tileserver.

The easiest way is to point the URL to a TileJSON endpoint (as provided by Tileserver GL).

"openmaptiles": {
  "type": "vector",
  "url": ""


Your style also requires image sprites used for patterns and icons.

"sprite": ""

In order to create your own sprites and self-host them via HTTP, you need to use the spritezero-cli.

npm install -g spritezero-cli


Font glyphs in Mapbox GL are packaged as signed distance fields.

To prepare your own fonts we recommend to use genfontgl which packages your TTF fonts.

If you prefer pure Open Source, we already prepared few common fonts for you in openmaptiles/fonts. In order to use the prepared fonts hosted via GitHub pages, change the glyphs endpoint to{fontstack}/{range}.pbf.

"glyphs": "{fontstack}/{range}.pbf", is an open-source project from MapTiler team and OSM community
Share this page on