mapbox-to-ol-style

Utility for creating OpenLayers style functions from Mapbox Style objects.

Getting started

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

The code below creates a vector layer with a style from a Mapbox Style object:

import mb2olstyle from 'mapbox-to-ol-style';
// OpenLayers imports from https://npmjs.com/package/ol 
import VectorLayer from 'ol/layer/vector';
import VectorSource from 'ol/source/vector';
import GeoJSON from 'ol/format/geojson';
 
var layer = new VectorLayer({
  source: new VectorSource({
    format: new GeoJSON(),
    url: 'data/states.geojson'
  })
});
 
fetch('data/states.json').then(function(response) {
  response.json().then(function(glStyle) {
    mb2olstyle(layer, glStyle, 'states');
  });
});

API

index

Creates a style function from the glStyle object for all layers that use the specified source, which needs to be a "type": "vector" or "type": "geojson" source and applies it to the specified OpenLayers layer.

Parameters

• olLayer (ol.layer.Vector | ol.layer.VectorTile) OpenLayers layer.
• glStyle (string | Object) Mapbox Style object.
• source (string | Array<string>) source key or an array of layer ids from the Mapbox Style object. When a source key is provided, all layers for the specified source will be included in the style function. When layer ids are provided, they must be from layers that use the same source.
• resolutions Array<number> Resolutions for mapping resolution to zoom level. (optional, default [156543.03392804097, 78271.51696402048,39135.75848201024,19567.87924100512,9783.93962050256, 4891.96981025128,2445.98490512564,1222.99245256282,611.49622628141, 305.748113140705,152.8740565703525,76.43702828517625,38.21851414258813, 19.109257071294063,9.554628535647032,4.777314267823516,2.388657133911758, 1.194328566955879,0.5971642834779395,0.29858214173896974, 0.14929107086948487,0.07464553543474244])
• spriteData Object Sprite data from the url specified in the Mapbox Style object's sprite property. Only required if a sprite property is specified in the Mapbox Style object. (optional, default undefined)
• spriteImageUrl Object Sprite image url for the sprite specified in the Mapbox Style object's sprite property. Only required if a sprite property is specified in the Mapbox Style object. (optional, default undefined)
• fonts Array<string> Array of available fonts, using the same font names as the Mapbox Style object. If not provided, the style function will always use the first font from the font array. (optional, default undefined)

Returns ol.style.StyleFunction Style function for use in ol.layer.Vector or ol.layer.VectorTile.

Building the library

npm install

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