ol-mapbox-style

Converts Mapbox Style objects for vector tile layers into OpenLayers style functions.

Getting started

To use a standalone build of ol-mapbox-style, just include 'dist/olms.js' on your HTML page. Otherwise just import the ol-mapbox-style module, like in the snippet below.

The code below creates a Mapbox Streets v7 layer with the bright v9 style:

import * as olms from 'ol-mapbox-style';
// OpenLayers imports from https://npmjs.com/package/ol
import tilegrid from 'ol/tilegrid';
import VectorTileLayer from 'ol/layer/vectortile';
import VectorTileSource from 'ol/source/vectortile';
import MVT from 'ol/format/MVT';

var key = 'Your Mapbox Access Token here';

var tileGrid = tilegrid.createXYZ({tileSize: 512, maxZoom: 22});
var layer = new VectorTileLayer({
  source: new VectorTileSource({
    attributions: '© <a href="https://www.mapbox.com/map-feedback/">Mapbox</a> ' +
      '© <a href="http://www.openstreetmap.org/copyright">' +
      'OpenStreetMap contributors</a>',
    format: new MVT(),
    tileGrid: tileGrid,
    tilePixelRatio: 8,
    url: 'http://{a-d}.tiles.mapbox.com/v4/mapbox.mapbox-streets-v7/' +
        '{z}/{x}/{y}.vector.pbf?access_token=' + key
  })
});

fetch('https://api.mapbox.com/styles/v1/mapbox/bright-v9?access_token=' + key).then(function(response) {
  response.json().then(function(glStyle) {
    glStyle.sprite = 'https://api.mapbox.com/styles/v1/mapbox/bright-v9/sprite?access_token=' + key;
    olms.applyStyle(layer, glStyle, 'mapbox').then(function() {
      // Style is ready to use - add the layer to your OpenLayers Map instance
      map.addLayer(layer);
    });
  });
});

Only commonly available system fonts and Google Fonts will automatically be available for text defined in the Mapbox Style object. It is the responsibility of the application to load other fonts.

To apply the properties of the Mapbox Style's background layer to the map, use the applyBackground function.

API

applyStyle

Applies a style function to an ol.layer.VectorTile with an ol.source.VectorTile. The style function will render all layers from the glStyle object that use the specified source, which needs to be a "type": "vector" source.

Parameters

• layer ol.layer.VectorTile OpenLayers layer.
• glStyle (string | Object) Mapbox Style object.
• source string source key from the Mapbox Style object.

Returns Promise Promise which will be resolved when the style can be used for rendering.

applyBackground

Applies properties of the Mapbox Style's background layer to the map.

Parameters

• map ol.Map OpenLayers Map. Must have a target configured.
• glStyle Object Mapbox Style object.

Building the library

npm install

The resulting binary (olms.js) will be in the dist/ folder. To see the library in action, navigate to example/index.html.