Styles
Styles are written in a JSON format called the Mapbox GL Style Spec.
Using OpenMapTiles with MapLibre GL
MapBox GL also offers a Javascript library to display vector maps on a website. However, with the release of version 2.x it is no longer free to use. We recommend using the open-source fork MapLibre GL.
To display maps with MapLibre GL you need:
- Style: A JSON style specification which describes how your map looks like
- 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 MapLibre GL JS.
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": "http://openmaptiles.org/tilejson.json"
}
Sprites
Your 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 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 http://fonts.openmaptiles.org/{fontstack}/{range}.pbf.
"glyphs": "http://fonts.openmaptiles.org/{fontstack}/{range}.pbf",
