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

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

Data Source

In order for 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": "http://openmaptiles.org/tilejson.json"
}

Sprites

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

"sprite": "http://openmaptiles.org/sprites/"

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

Fonts

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 are using Open Source fonts however we already prepared some common fonts for you in openmaptiles/fonts. In order to use the prepared fonts hosted via GitHub pages change the glyphs endpoint to http://fonts.openmaptiles.org/{fontstack}/{range}.pbf.

"glyphs": "http://fonts.openmaptiles.org/{fontstack}/{range}.pbf",
K

OpenMapTiles.org is an open-source project from Klokan Technologies GmbH and OSM community
Share this page on