@edc-dev/ol-mapbox-style v9.4.0

ol-mapbox-style

Create OpenLayers maps from Mapbox Style Specification objects.

Getting started

Get an impression of what this library does by exploring the live examples.

Installation

To use the library in an application with an npm based dev environment, install it with

npm install @edc-dev/ol-mapbox-style

When installed this way, just import the ol-mapbox-style module, like in the usage example below. To use a standalone build of ol-mapbox-style, just include 'dist/olms.js' on your HTML page, and access the exported functions from the global olms object (e.g. olms.apply(), olms.applyBackground()). Note that the standalone build depends on the full build of OpenLayers.

ol-mapbox-style v9 requires OpenLayers version >= 7 < 8.

ol-mapbox-style v8 requires OpenLayers version >= 6.13.0 < 7.

Usage

See the API section for the full documentation.

The code below creates an OpenLayers map from Mapbox's Bright v9 style, using a https:// url:

import { apply } from 'ol-mapbox-style';

apply('map', 'https://api.mapbox.com/styles/v1/mapbox/bright-v9?access_token=YOUR_MAPBOX_TOKEN');

To assign style and source to a layer only, use applyStyle(). mapbox:// urls are also supported:

import {applyStyle} from 'ol-mapbox-style';
import VectorTileLayer from 'ol/layer/VectorTile.js'

const layer = new VectorTileLayer({declutter: true});
applyStyle(layer, 'mapbox://styles/mapbox/bright-v9', {accessToken: 'YOUR_MAPBOX_TOKEN'});

To apply the properties of the Mapbox Style's background layer to the map or a VectorTile layer, use the applyBackground() function.

There is also a low-level API available. To create a style function for individual OpenLayers vector or vector tile layers, use the stylefunction module:

import {stylefunction} from 'ol-mapbox-style';
import VectorLayer from 'ol/layer/Vector.js';
import VectorSource from 'ol/source/Vector.js';
import GeoJSON from 'ol/format/GeoJSON.js';

const layer = new VectorLayer({
  source: new VectorSource({
    format: new GeoJSON(),
    url: 'data/states.geojson'
  })
});

fetch('data/states.json').then(function(response) {
  response.json().then(function(glStyle) {
    stylefunction(layer, glStyle, 'states');
  });
});

Note that this low-level API does not create a source for the layer, and extra work is required to set up sprite handling for styles that use icons.

Compatibility notes

Font handling

Only commonly available system fonts and Google Fonts will automatically be available for any text-font defined in the Mapbox Style object. It is the responsibility of the application to load other fonts. Because ol-mapbox-style uses system and web fonts instead of PBF/SDF glyphs, the font stack is treated a little different: style and weight are taken from the primary font (i.e. the first one in the font stack). Subsequent fonts in the font stack are only used if the primary font is not available/loaded, and they will be used with the style and weight of the primary font.

Building the library

npm run build

The resulting distribution files will be in the dist/ folder. To see the library in action, navigate to dist/index.html.

To run test locally, run

npm test

For debugging tests in the browser, run

npm run karma

and open a browser on the host and port indicated in the console output (usually http://localhost:9876/) and click the 'DEBUG' button to go to the debug environment.

API

@edc-dev/ol-mapbox-style

Table of contents

References

• default

Modules

• <internal\>

Functions

• apply
• applyBackground
• applyStyle
• getFeatureState
• getLayer
• getLayers
• getSource
• recordStyleLayer
• renderTransparent
• setFeatureState
• stylefunction

References

default

Renames and re-exports apply

Functions

apply

▸ apply(mapOrGroup, style, options?): Promise<Map | LayerGroup>

Loads and applies a Mapbox Style object into an OpenLayers Map or LayerGroup. This includes the map background, the layers, and for Map instances that did not have a View defined yet also the center and the zoom.

Example:

import apply from 'ol-mapbox-style';

apply('map', 'mapbox://styles/mapbox/bright-v9', {accessToken: 'YOUR_MAPBOX_TOKEN'});

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:

• mapbox-source: The id of 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.
• mapbox-layers: The ids of the Mapbox Style document's layers that are included in the OpenLayers layer.

This function sets an additional mapbox-style property on the OpenLayers Map or LayerGroup instance, which holds the Mapbox Style object.

Parameters

Returns

Promise<Map | LayerGroup>

A promise that resolves after all layers have been added to the OpenLayers Map instance or LayerGroup, their sources set, and their styles applied. The resolve callback will be called with the OpenLayers Map instance or LayerGroup as argument.

applyBackground

▸ applyBackground(mapOrLayer, glStyle, options?): Promise<any>

Applies properties of the Mapbox Style's first background layer to the provided map or VectorTile layer.

Example:

import {applyBackground} from 'ol-mapbox-style';
import {Map} from 'ol';

const map = new Map({target: 'map'});
applyBackground(map, 'https://api.maptiler.com/maps/basic/style.json?key=YOUR_OPENMAPTILES_TOKEN');

Parameters

Returns

Promise<any>

Promise that resolves when the background is applied.

applyStyle

▸ applyStyle(layer, glStyle, sourceOrLayersOrOptions?, optionsOrPath?, resolutions?): Promise<any>

Applies a style function to an ol/layer/VectorTile or ol/layer/Vector with an ol/source/VectorTile or an ol/source/Vector. If the layer does not have a source yet, it will be created and populated from the information in the glStyle.

Example:

import {applyStyle} from 'ol-mapbox-style';
import {VectorTile} from 'ol/layer.js';

const layer = new VectorTile({declutter: true});
applyStyle(layer, 'https://api.maptiler.com/maps/basic/style.json?key=YOUR_OPENMAPTILES_TOKEN');

The style function will render all layers from the glStyle object that use the source of the first layer, the specified source, or a subset of layers from the same source. The source needs to be a "type": "vector" or "type": "geojson" source.

Two additional properties will be set on the provided layer:

• mapbox-source: The id of 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.
• mapbox-layers: The ids of the Mapbox Style document's layers that are included in the OpenLayers layer.

Parameters

Returns

Promise<any>

Promise which will be resolved when the style can be used for rendering.

getFeatureState

▸ getFeatureState(mapOrLayer, feature): any

Sets or removes a feature state. The feature state is taken into account for styling, just like the feature's properties, and can be used e.g. to conditionally render selected features differently.

Parameters

Returns

any

Feature state or null when no feature state is set for the given feature identifier.

getLayer

▸ getLayer(map, layerId): Layer<Source, LayerRenderer<any>>

Get the OpenLayers layer instance that contains the provided Mapbox Style layer. Note that multiple Mapbox Style layers are combined in a single OpenLayers layer instance when they use the same Mapbox Style source.

Parameters

Returns

Layer<Source, LayerRenderer<any>>

OpenLayers layer instance.

getLayers

▸ getLayers(map, sourceId): Layer<Source, LayerRenderer<any>>[]

Get the OpenLayers layer instances for the provided Mapbox Style source.

Parameters

Returns

Layer<Source, LayerRenderer<any>>[]

OpenLayers layer instances.

getSource

▸ getSource(map, sourceId): Source

Get the OpenLayers source instance for the provided Mapbox Style source.

Parameters

Returns

Source

OpenLayers source instance.

recordStyleLayer

▸ recordStyleLayer(record?): void

Turns recording of the Mapbox Style's layer on and off. When turned on, the layer that a rendered feature belongs to will be set as the feature's mapbox-layer property.

Parameters

Returns

void

renderTransparent

▸ renderTransparent(enabled): void

Configure whether features with a transparent style should be rendered. When set to true, it will be possible to hit detect content that is not visible, like transparent fills of polygons, using ol/layer/Layer#getFeatures() or ol/Map#getFeaturesAtPixel()

Parameters

Returns

void

setFeatureState

▸ setFeatureState(mapOrLayer, feature, state): void

Sets or removes a feature state. The feature state is taken into account for styling, just like the feature's properties, and can be used e.g. to conditionally render selected features differently.

The feature state will be stored on the OpenLayers layer matching the feature identifier, in the mapbox-featurestate property.

Parameters

Returns

void

stylefunction

▸ stylefunction(olLayer, glStyle, sourceOrLayers, resolutions?, spriteData?, spriteImageUrl?, getFonts?, getImage?): StyleFunction

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.

Two additional properties will be set on the provided layer:

• mapbox-source: The id of 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.
• mapbox-layers: The ids of the Mapbox Style document's layers that are included in the OpenLayers layer.

This function also works in a web worker. In worker mode, the main thread needs to listen to messages from the worker and respond with another message to make sure that sprite image loading works:

 worker.addEventListener('message', event => {
  if (event.data.action === 'loadImage') {
    const image = new Image();
    image.crossOrigin = 'anonymous';
    image.addEventListener('load', function() {
      createImageBitmap(image, 0, 0, image.width, image.height).then(imageBitmap => {
        worker.postMessage({
          action: 'imageLoaded',
          image: imageBitmap,
          src: event.data.src
        }, [imageBitmap]);
      });
    });
    image.src = event.data.src;
  }
});

Parameters

Returns

StyleFunction

Style function for use in ol.layer.Vector or ol.layer.VectorTile.

Interface: ApplyStyleOptions<>

.ApplyStyleOptions

Table of contents

Properties

• layers
• source

Properties

layers

• layers: string[]

Layers. If no source is provided, the layers with the provided ids will be used from the style's layers array. All layers need to use the same source.

source

• source: string

Source. Default is '', which causes the first source in the style to be used.

Interface: FeatureIdentifier<>

.FeatureIdentifier

Table of contents

Properties

• id
• source

Properties

id

• id: string | number

The feature id.

source

• source: string

The source id.

Interface: Options<>

.Options

Table of contents

Properties

• accessToken
• accessTokenParam
• getImage
• resolutions
• styleUrl
• transformRequest

Properties

accessToken

• accessToken: string

Access token for 'mapbox://' urls.

accessTokenParam

• accessTokenParam: string

Access token param. For internal use.

getImage

• getImage: (arg0: VectorLayer<any> | VectorTileLayer, arg1: string) => string | HTMLCanvasElement | HTMLImageElement

Type declaration

▸ (arg0, arg1): string | HTMLCanvasElement | HTMLImageElement

Function that returns an image for an icon name. If the result is an HTMLImageElement, it must already be loaded. The layer can be used to call layer.changed() when the loading and processing of the image has finished. This function be used for icons not in the sprite or to override sprite icons.

Parameters

Returns

string | HTMLCanvasElement | HTMLImageElement

resolutions

• resolutions: number[]

Resolutions for mapping resolution to zoom level. Only needed when working with non-standard tile grids or projections.

styleUrl

• styleUrl: string

URL of the Mapbox GL style. Required for styles that were provided as object, when they contain a relative sprite url, or sources referencing data by relative url.

transformRequest

• transformRequest: (arg0: string, arg1: ResourceType) => void | Request

Type declaration

▸ (arg0, arg1): void | Request

Function for controlling how ol-mapbox-style fetches resources. Can be used for modifying the url, adding headers or setting credentials options. Called with the url and the resource type as arguments, this function is supposed to return a Request object. Without a return value, the original request will not be modified. For Tiles and GeoJSON resources, only the url of the returned request will be respected.

Parameters

Returns

void | Request

Module: <internal>

Table of contents

Interfaces

• ApplyStyleOptions
• FeatureIdentifier
• Options

Type Aliases

• ResourceType

Type Aliases

ResourceType

Ƭ ResourceType<>: "Style" | "Source" | "Sprite" | "SpriteImage" | "Tiles" | "GeoJSON"