Skip to main content


MapboxLayer is an implementation of Mapbox GL JS's CustomLayerInterface API. By adding a MapboxLayer instance to an mapbox map, one can render any layer inside the mapbox canvas / WebGL2 context. This is in contrast to the traditional integration where the layers are rendered into a separate canvas over the base map.

See the Mapbox map.addLayer(layer, before?) API for how to add a layer to an existing layer stack.


import {MapboxLayer} from '';
import {ScatterplotLayer} from '';

const map = new mapboxgl.Map({...});

const myScatterplotLayer = new MapboxLayer({
id: 'my-scatterplot',
type: ScatterplotLayer,
data: [
{position: [-74.5, 40], size: 100}
getPosition: d => d.position,
getRadius: d => d.size,
getColor: [255, 0, 0]

// wait for map to be ready
map.on('load', () => {
// insert before the mapbox layer "waterway_label"
map.addLayer(myScatterplotLayer, 'waterway_label');

// update the layer
getColor: [0, 0, 255]


import {MapboxLayer} from '';
new MapboxLayer(props);


  • props (object)
    • (string) - an unique id is required for each layer.
    • props.type (Layer, optional) - a class that extends's base Layer class. Required if deck is not provided.
    • props.deck (Deck, optional) - a Deck instance that controls the rendering of this layer. If provided, the layer will be looked up from its layer stack by id at render time, and all other props are ignored. It's recommended that you use the MapboxOverlay class where a Deck instance is automatically managed.
    • Optional: any other prop needed by this type of layer. See's layer catalog for documentation and examples on how to create layers.


const layer = new MapboxLayer({
id: 'my-scatterplot',
type: ScatterplotLayer,


radiusScale: 2

Update a layer after it's added. Has no effect if props.deck is provided.