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:
import { apply } from 'ol-mapbox-style';
var key = 'Your Mapbox Access Token here';
apply('map', 'https://api.mapbox.com/styles/v1/mapbox/bright-v9?access_token=' + key);
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 applyStyle()
function.
To apply the properties of the Mapbox Style's background
layer to the map, use the applyBackground()
function.
Applies a style function to an ol.layer.VectorTile
or ol.layer.Vector
with 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
a "type": "vector"
or "type": "geojson"
source.
Parameters
layer
ol.layer.VectorTile OpenLayers layer.glStyle
(string | Object) Mapbox Style object.source
stringsource
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.
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.
Parameters
map
ol.Map OpenLayers Map.glStyle
Object Mapbox Style object.
Loads and applies a Mapbox Style object to an OpenLayers Map.
Parameters
map
(ol.Map | HTMLElement | stribng) 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 Url pointing to a Mapbox Style object. When using Mapbox APIs, the url must contain an access token and look likehttps://api.mapbox.com/styles/v1/mapbox/bright-v9?access_token=[your_access_token_here]
.
Returns ol.Map The OpenLayers Map instance that will be populated with the contents described in the Mapbox Style object.
npm install
The resulting binary (olms.js
) will be in the dist/
folder. To see the library in action, navigate to example/index.html
.