What is ol-mapbox-style?
The ol-mapbox-style package allows you to use Mapbox Style objects with OpenLayers. It provides functionality to apply Mapbox styles to OpenLayers maps, making it easier to integrate Mapbox's rich styling capabilities with the OpenLayers mapping library.
What are ol-mapbox-style's main functionalities?
Apply Mapbox Style to OpenLayers Map
This feature allows you to apply a Mapbox style to an OpenLayers map. The code sample demonstrates how to use the `apply` function to load a Mapbox style from a URL and apply it to a map element with the ID 'map'.
const olms = require('ol-mapbox-style');
olms.apply('map', 'https://api.mapbox.com/styles/v1/mapbox/streets-v11?access_token=YOUR_MAPBOX_ACCESS_TOKEN');
Apply Mapbox Style to OpenLayers Layer
This feature allows you to apply a Mapbox style to a specific OpenLayers layer. The code sample demonstrates how to use the `applyStyle` function to load a Mapbox style from a URL and apply it to a vector layer.
const olms = require('ol-mapbox-style');
const layer = new ol.layer.Vector();
olms.applyStyle(layer, 'https://api.mapbox.com/styles/v1/mapbox/streets-v11?access_token=YOUR_MAPBOX_ACCESS_TOKEN');
Apply Mapbox Style from JSON
This feature allows you to apply a Mapbox style from a JSON object directly to an OpenLayers map. The code sample demonstrates how to use the `apply` function with a JSON style object instead of a URL.
const olms = require('ol-mapbox-style');
const styleJson = { /* JSON style object */ };
olms.apply('map', styleJson);
Other packages similar to ol-mapbox-style
mapbox-gl
The mapbox-gl package is the official Mapbox GL JS library for rendering interactive maps from vector tiles and Mapbox styles. Unlike ol-mapbox-style, which integrates Mapbox styles with OpenLayers, mapbox-gl is a standalone library that provides its own map rendering capabilities.
openlayers
The openlayers package is the core library for OpenLayers, which provides a high-performance, feature-packed library for all your mapping needs. While it does not natively support Mapbox styles, it can be extended with packages like ol-mapbox-style to achieve similar functionality.
leaflet
The leaflet package is a popular open-source JavaScript library for mobile-friendly interactive maps. It has its own ecosystem of plugins for various functionalities, including support for Mapbox tiles and styles, but it does not natively integrate with OpenLayers like ol-mapbox-style does.
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 require the ol-mapbox-style module, like in the snippet below.
The code below creates a Mapbox Streets v7 layer with the bright v9 style:
var ol = require('openlayers');
var olms = require('ol-mapbox-style');
var key = 'Your Mapbox Access Token here';
var tilegrid = ol.tilegrid.createXYZ({tileSize: 512, maxZoom: 22});
var layer = new ol.layer.VectorTile({
source: new ol.source.VectorTile({
attributions: '© <a href="https://www.mapbox.com/map-feedback/">Mapbox</a> ' +
'© <a href="http://www.openstreetmap.org/copyright">' +
'OpenStreetMap contributors</a>',
format: new ol.format.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() {
map.addLayer(layer);
});
});
});
Note that it is the responsibility of the application to load web fonts used by the GL Style.
API
getStyleFunction
Creates a style function from the glStyle
object for all layers that use
the specified source
, which needs to be a "type": "vector"
source.
Parameters
glStyle
(string | Object) Mapbox GL style object.source
string source
key from the Mapbox GL style object.resolutions
Array<number> Resolutions for mapping resolution to
zoom level. For tile layers, this can be
layer.getSource().getTileGrid().getResolutions()
.onChange
Function Callback which will be called when the style is
ready to use for rendering, and every time a new resource (e.g. icon sprite
or font) is ready to be applied.
Returns ol.style.StyleFunction Style function for use in
ol.layer.Vector
or ol.layer.VectorTile
.
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 GL style object.source
string source
key from the Mapbox GL style object.
Returns Promise Promise which will be resolved when the style can be used
for rendering.
Building the library
npm install
npm run dist
The resulting binary (olms.js
) will be in the dist/
folder. To see the library in action, navigate to example/index.html
.