Create OpenLayers maps from Mapbox Style objects.
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 an OpenLayers map from Mapbox's Bright v9 style:
;var key = 'Your Mapbox Access Token here';;
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 a subset of the layers defined in the Mapbox Style layer to a custom OpenLayers layer, use the
To apply the properties of the Mapbox Style's
background layer to the map, use the
Applies a style function to an
ol.source.VectorTile or an
ol.source.Vector. The style function
will render all layers from the
glStyle object that use the specified
source, or a subset of layers from the same source. The source needs to be
"type": "geojson" or
"type": "raster" source.
layerol.layer.VectorTile OpenLayers layer.
glStyle(string | Object) Mapbox Style object.
sourcekey or an array of layer
ids from the Mapbox Style object. When a
sourcekey 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.
pathstring Path of the style file. Only required when a relative path is used with the
"sprite"property of the style. (optional, default
Returns Promise Promise which will be resolved when the style can be used for rendering.
Applies properties of the Mapbox Style's first
background layer to the map.
mapol.Map OpenLayers Map.
glStyleObject Mapbox Style object.
Loads and applies a Mapbox Style object to an OpenLayers Map. This includes the map background, the layers, the center and the zoom.
The center and zoom will only be set if present in the Mapbox Style document, and if not already set on the OpenLayers map.
Layers will be added to the OpenLayers map, without affecting any layers that might already be set on the map.
Layers added by
apply() will have two additional properties:
idof the Mapbox Style document's source that the OpenLayers layer was created from. Usually
apply()creates one OpenLayers layer per Mapbox Style source, unless the layer stack has layers from different sources in between.
ids of the Mapbox Style document's layers that are included in the OpenLayers layer.
map(ol.Map | HTMLElement | string) Either an existing OpenLayers Map instance, or a HTML element, or the id of a HTML element that will be the target of a new OpenLayers Map.
style(string | Object) JSON style object or style url pointing to a Mapbox Style object. When using Mapbox APIs, the url must contain an access token and look like
https://api.mapbox.com/styles/v1/mapbox/bright-v9?access_token=[your_access_token_here]. When passed as JSON style object, all OpenLayers layers created by
apply()will be immediately available, but they may not have a source yet (i.e. when they are defined by a TileJSON url in the Mapbox Style document). When passed as style url, layers will be added to the map when the Mapbox Style docukment is loaded and parsed.
Returns ol.Map The OpenLayers Map instance that will be populated with the contents described in the Mapbox Style object.
The resulting binary (
olms.js) will be in the
dist/ folder. To see the library in action, navigate to