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 import the ol-mapbox-style module, like in the snippet below.
The code below creates a Mapbox Streets v7 layer with the bright v9 style:
import * as olms from 'ol-mapbox-style';
import tilegrid from 'ol/tilegrid';
import VectorTileLayer from 'ol/layer/vectortile';
import VectorTileSource from 'ol/source/vectortile';
import MVT from 'ol/format/MVT';
var key = 'Your Mapbox Access Token here';
var tileGrid = tilegrid.createXYZ({tileSize: 512, maxZoom: 22});
var layer = new VectorTileLayer({
source: new VectorTileSource({
attributions: '© <a href="https://www.mapbox.com/map-feedback/">Mapbox</a> ' +
'© <a href="http://www.openstreetmap.org/copyright">' +
'OpenStreetMap contributors</a>',
format: new 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);
});
});
});
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 the properties of the Mapbox Style's background
layer to the map, use the applyBackground
function.
API
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 Style object.source
string source
key from the Mapbox Style object.
Returns Promise Promise which will be resolved when the style can be used
for rendering.
applyBackground
Applies properties of the Mapbox Style's background
layer to the map.
Parameters
map
ol.Map OpenLayers Map. Must have a target
configured.glStyle
Object Mapbox Style object.
Building the library
npm install
The resulting binary (olms.js
) will be in the dist/
folder. To see the library in action, navigate to example/index.html
.