Vector tiles in OpenLayers

Vector tiles maps are made of mathematical interpretations of geometric features such as points, curves or polygons. Vector tiles are rendered on the client’s side with a style, which is a small text file that defines how certain map elements look and how they are displayed. Read more about Vector tiles in this article What are vector tiles and why you should care?

Vector tiles ol-mapbox-style (plugin)

Vector tiles can be displayed in OpenLayers using the ol-mapbox-style plugin


npm install --save ol ol-mapbox-style

main.js

import Map from 'ol/Map.js';
import View from 'ol/View.js';
import Attribution from 'ol/control/Attribution.js';
import { defaults as defaultControls } from 'ol/control/defaults.js';
import { fromLonLat } from 'ol/proj.js';
import 'ol/ol.css';
import { apply } from 'ol-mapbox-style';

const key = 'YOUR_MAPTILER_API_KEY_HERE';
const styleJson = `https://api.maptiler.com/maps/streets-v4/style.json?key=${key}`;

const attribution = new Attribution({
  collapsible: false,
});

const map = new Map({
  target: 'map',
  controls: defaultControls({attribution: false}).extend([attribution]),
  view: new View({
    constrainResolution: true,
    center: fromLonLat([0, 0]),
    zoom: 2
  })
});
apply(map, styleJson);

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="robots" content="noindex">
  <title>Vector tiles in OpenLayers | NPM example</title>
  <link rel="stylesheet" href="./style.css">
</head>
<body>
  <div id="map">
    <a href="https://www.maptiler.com" style="position:absolute;left:10px;bottom:10px;z-index:999;"><img src="https://api.maptiler.com/resources/logo.svg" alt="MapTiler logo"></a>
  </div><p><a href="https://www.maptiler.com/copyright/" target="_blank">© MapTiler</a> <a href="https://www.openstreetmap.org/copyright" target="_blank">© OpenStreetMap contributors</a></p>
  <script type="module" src="./main.js"></script>
</body>
</html>

style.css

#map {position: absolute; top: 0; right: 0; bottom: 0; left: 0;}

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@v10.1.0/ol.css">
  <script src="https://cdn.jsdelivr.net/npm/ol@v10.1.0/dist/ol.js"></script>
  <script src="https://unpkg.com/ol-mapbox-style@12.1.1/dist/olms.js"></script>
  <style>
    #map {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
    }
  </style>
</head>

<body>
  <div id="map">
    <a href="https://www.maptiler.com" style="position:absolute;left:10px;bottom:10px;z-index:999;"><img
        src="https://api.maptiler.com/resources/logo.svg" alt="MapTiler logo"></a>
  </div>
  <p><a href="https://www.maptiler.com/copyright/" target="_blank">© MapTiler</a> <a
      href="https://www.openstreetmap.org/copyright" target="_blank">© OpenStreetMap contributors</a></p>
  <script>
    const key = 'YOUR_MAPTILER_API_KEY_HERE';
    const styleJson = `https://api.maptiler.com/maps/streets-v4/style.json?key=${key}`;

    const attribution = new ol.control.Attribution({
      collapsible: false,
    });

    const map = new ol.Map({
      target: 'map',
      controls: ol.control.defaults.defaults({ attribution: false }).extend([attribution]),
      view: new ol.View({
        constrainResolution: true,
        center: ol.proj.fromLonLat([0, 0]),
        zoom: 2
      })
    });
    olms.apply(map, styleJson);
  </script>
</body>

</html>

Replace YOUR_MAPTILER_API_KEY_HERE with your own API key. Make sure to secure the key before you publish it.

Summary

The easiest way to work with vector tiles in OpenLayers is to use the ol-mapbox-style plugin. OpenLayers supports vector tiles natively but you have to create a specific style. Check out the example.

Vector tiles with GeoJSON

Tutorials

Display GeoJSON polygons over vector tiles using OpenLayers.