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

Raster tiles from server

OpenLayers doesn’t support vector tiles by default. Raster tiles can be geneated 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. Thanks to this extension you are able to design maps for vector tiles using the existing tools and then switch to a different renderer.

index.html

Create a HTML page and include OpenLayers and 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>
<html>
<head>
  <title>Klokantech Basic GL Style using ol-mapbox-style preview</title>
  <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Open+Sans" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.19.1/ol.css">
  <style>
    html, body {
      height: 100%;
      margin: 0;
    }
    #map {
      width: 100%;
      height: 100%;
      background-color: #f8f4f0;
    }
  </style>
</head>
<body>
  <div id="map"></div>
  <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=fetch,Promise"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.19.1/ol.js"></script>
  <script src="olms.js"></script>
  <script src="ol.js"></script>
</body>

ol.js

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

We fetch our GL style specification (fetch function) and turn it into OpenLayers functions which we can apply to our vector tile layer.

var tilegrid = ol.tilegrid.createXYZ({tileSize: 512, maxZoom: 22});

var layer = new ol.layer.VectorTile({
  source: new ol.source.VectorTile({
    attributions: '© <a href="https://openmaptiles.org/">OpenMapTiles</a> ' +
      '© <a href="http://www.openstreetmap.org/copyright">' +
      'OpenStreetMap contributors</a>',
    format: new ol.format.MVT(),
    tileGrid: tilegrid,
    tilePixelRatio: 8,
    url: 'https://free-0.tilehosting.com/data/v3/{z}/{x}/{y}.pbf?key=tXiQqN3lIgskyDErJCeY'
  })
});

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('https://openmaptiles.github.io/klokantech-basic-gl-style/style-cdn.json').then(function(response) {
  response.json().then(function(glStyle) {
    olms.applyStyle(layer, glStyle, 'openmaptiles').then(function() {
      map.addLayer(layer);
    });
  });
});
K

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