There are two ways how to display OpenMapTiles with OpenLayers library: using raster or vector tiles.

Raster tiles from server

OpenLayers doesn’t support vector tiles by default. Raster tiles can be generated on demand for any of the GL styles with the open-source server software called TileServer GL. Such raster tiles can be displayed using ol.source.XYZ source.

Vector tiles with a plugin

Vector tiles can be displayed in OpenLayers using the ol-mapbox-style plugin together with OpenMapTiles. Read the following guideline or check out the code here.

Convert Mapbox GL style to OpenLayers style functions

The ol-mapbox-style converts the original Mapbox GL style specification into OpenLayers style functions. This extension enables you to design maps for vector tiles using the existing tools and then switch to a different renderer.


Create an HTML page and include OpenLayers with the standalone build of ol-mapbox-style omls.js. Since OpenLayers draws on the browser canvas, you also need to include the fonts used in the style in the page.

<!DOCTYPE html>
  <title>Klokantech Basic GL Style using ol-mapbox-style preview</title>
  <link rel="stylesheet" type="text/css" href="" />
  <link rel="stylesheet" href="">
    html, body {
      height: 100%;
      margin: 0;
    #map {
      width: 100%;
      height: 100%;
      background-color: #f8f4f0;
  <div id="map"></div>
  <script src=",Promise"></script>
  <script src=""></script>
  <script src="olms.js"></script>
  <script src="ol.js"></script>


Create a new MVT source (url of ol.source.VectorTile) which points to the CDN of OpenMapTiles or to your own TileServer.

The code below fetches the GL style specification (fetch function) and turn it into OpenLayers functions which can be applied to the vector tile layer.

In the following code, you have to replace “insert_your_key_here” with a key from hosting. You can get a free key at

var apiKey = 'insert_your_key_here';

var tilegrid = ol.tilegrid.createXYZ({tileSize: 512, maxZoom: 14});
var layer = new ol.layer.VectorTile({
  source: new ol.source.VectorTile({
    attributions: '© <a href="">MapTiler</a> ' +
      '© <a href="">' +
      'OpenStreetMap contributors</a>',
    format: new ol.format.MVT(),
    tileGrid: tilegrid,
    tilePixelRatio: 8,
    url: '{z}/{x}/{y}.pbf?key=' + apiKey

var view = new ol.View({
  center: [732602.1417165294, 5864590.06411005],
  resolution: 2445,
  maxResolution: 78271.51696402048

var map = new ol.Map({
  target: 'map',
  view: view

fetch('' + apiKey).then(function(response) {
  response.json().then(function(glStyle) {
    olms.applyStyle(layer, glStyle, 'openmaptiles').then(function() {
K is an open-source project from Klokan Technologies GmbH and OSM community
Share this page on