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:
;// OpenLayers imports from https://npmjs.com/package/ol;;; var layer = source: format: url: 'data/states.geojson' ; ;
API
Table of Contents
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 to apply the style to. In addition to the style, the layer will get two properties:mapbox-source
will be theid
of theglStyle
's source used for the layer, andmapbox-layers
will be an array of theid
s of theglStyle
's layers.glStyle
(string | Object) Mapbox Style object.source
(string | Array<string>)source
key or an array of layerid
s from the Mapbox Style object. When asource
key is provided, all layers for the specified source will be included in the style function. When layerid
s are provided, they must be from layers that use the same source.resolutions
Array<number> Resolutions for mapping resolution to zoom level. (optional, default[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'ssprite
property. Only required if asprite
property is specified in the Mapbox Style object. (optional, defaultundefined
)spriteImageUrl
Object Sprite image url for the sprite specified in the Mapbox Style object'ssprite
property. Only required if asprite
property is specified in the Mapbox Style object. (optional, defaultundefined
)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, defaultundefined
)
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
.