Sources | Mapbox GL JS

The source types Mapbox GL JS can handle in addition to the ones described in the Mapbox Style Specification.

CanvasSource

A data source containing the contents of an HTML canvas. See CanvasSourceOptions for detailed documentation of options.

Example


// add to map
map.addSource('some id', {
    type: 'canvas',
    canvas: 'idOfMyHTMLCanvas',
    animate: true,
    coordinates: [
        [-76.54, 39.18],
        [-76.52, 39.18],
        [-76.52, 39.17],
        [-76.54, 39.17]
    ]
});

// update
const mySource = map.getSource('some id');
mySource.setCoordinates([
    [-76.54335737228394, 39.18579907229748],
    [-76.52803659439087, 39.1838364847587],
    [-76.5295386314392, 39.17683392507606],
    [-76.54520273208618, 39.17876344106642]
]);

map.removeSource('some id');  // remove

Instance Members

Example: Add a canvas source

Was this section on CanvasSource helpful?

CanvasSourceOptions

githubsrc/source/canvas_source.ts

Options to add a canvas source type to the map.

Type

Object

Properties

Name	Description
animate `(boolean?)`	Whether the canvas source is animated. If the canvas is static (pixels do not need to be re-read on every frame), `animate` should be set to `false` to improve performance.
canvas `((string \| HTMLCanvasElement))`	Canvas source from which to read pixels. Can be a string representing the ID of the canvas element, or the `HTMLCanvasElement` itself.
coordinates `(Array<Array<number>>)`	Four geographical coordinates denoting where to place the corners of the canvas, specified in `[longitude, latitude]` pairs.
type `(string)`	Source type. Must be `"canvas"` .

Was this section on CanvasSourceOptions helpful?

GeoJSONSource

githubsrc/source/geojson_source.ts

A source containing GeoJSON. See the Style Specification for detailed documentation of options.

Extends Evented.

Example


map.addSource('some id', {
    type: 'geojson',
    data: 'https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_10m_ports.geojson'
});


map.addSource('some id', {
    type: 'geojson',
    data: {
        "type": "FeatureCollection",
        "features": [{
            "type": "Feature",
            "properties": {},
            "geometry": {
                "type": "Point",
                "coordinates": [
                    -76.53063297271729,
                    39.18174077994108
                ]
            }
        }]
    }
});


map.getSource('some id').setData({
    "type": "FeatureCollection",
    "features": [{
        "type": "Feature",
        "properties": {"name": "Null Island"},
        "geometry": {
            "type": "Point",
            "coordinates": [ 0, 0 ]
        }
    }]
});

Instance Members

Was this section on GeoJSONSource helpful?

ImageSource

githubsrc/source/image_source.ts

A data source containing an image. See the Style Specification for detailed documentation of options.

Extends Evented.

Example


// add to map
map.addSource('some id', {
    type: 'image',
    url: 'https://www.mapbox.com/images/foo.png',
    coordinates: [
        [-76.54, 39.18],
        [-76.52, 39.18],
        [-76.52, 39.17],
        [-76.54, 39.17]
    ]
});

// update coordinates
const mySource = map.getSource('some id');
mySource.setCoordinates([
    [-76.54335737228394, 39.18579907229748],
    [-76.52803659439087, 39.1838364847587],
    [-76.5295386314392, 39.17683392507606],
    [-76.54520273208618, 39.17876344106642]
]);

// update url and coordinates simultaneously
mySource.updateImage({
    url: 'https://www.mapbox.com/images/bar.png',
    coordinates: [
        [-76.54335737228394, 39.18579907229748],
        [-76.52803659439087, 39.1838364847587],
        [-76.5295386314392, 39.17683392507606],
        [-76.54520273208618, 39.17876344106642]
    ]
});

map.removeSource('some id');  // remove

Instance Members

Was this section on ImageSource helpful?

RasterArrayTileSource

githubsrc/source/raster_array_tile_source.ts

A data source containing raster-array tiles created with Mapbox Tiling Service. See the Style Specification for detailed documentation of options.

Extends RasterTileSource.

new RasterArrayTileSource(id: string, options: RasterArraySourceSpecification, dispatcher: Dispatcher, eventedParent: Evented)

Parameters

Name	Description
id `(string)`
options `(RasterArraySourceSpecification)`
dispatcher `(Dispatcher)`
eventedParent `(Evented)`

Example


// add to map
map.addSource('some id', {
    type: 'raster-array',
    url: 'mapbox://rasterarrayexamples.gfs-winds',
    tileSize: 512
});

Instance Members

Example: Create a wind particle animation

Was this section on RasterArrayTileSource helpful?

RasterTileSource

githubsrc/source/raster_tile_source.ts

A source containing raster tiles. See the Style Specification for detailed documentation of options.

Extends Evented.

new RasterTileSource(id: string, options: (RasterSourceSpecification | RasterDEMSourceSpecification | RasterArraySourceSpecification), dispatcher: Dispatcher, eventedParent: Evented)

Parameters

Name	Description
id `(string)`
options `((RasterSourceSpecification \| RasterDEMSourceSpecification \| RasterArraySourceSpecification))`
dispatcher `(Dispatcher)`
eventedParent `(Evented)`

Example


map.addSource('some id', {
    type: 'raster',
    url: 'mapbox://mapbox.satellite',
    tileSize: 256
});


map.addSource('some id', {
    type: 'raster',
    tiles: ['https://img.nj.gov/imagerywms/Natural2015?bbox={bbox-epsg-3857}&format=image/png&service=WMS&version=1.1.1&request=GetMap&srs=EPSG:3857&transparent=true&width=256&height=256&layers=Natural2015'],
    tileSize: 256
});

Instance Members

Was this section on RasterTileSource helpful?

VectorTileSource

githubsrc/source/vector_tile_source.ts

A source containing vector tiles in Mapbox Vector Tile format. See the Style Specification for detailed documentation of options.

Extends Evented.

new VectorTileSource(id: string, options: any, dispatcher: Dispatcher, eventedParent: Evented)

Parameters

Name	Description
id `(string)`
options `(any)`
dispatcher `(Dispatcher)`
eventedParent `(Evented)`

Example


map.addSource('some id', {
    type: 'vector',
    url: 'mapbox://mapbox.mapbox-streets-v8'
});


map.addSource('some id', {
    type: 'vector',
    tiles: ['https://d25uarhxywzl1j.cloudfront.net/v0.1/{z}/{x}/{y}.mvt'],
    minzoom: 6,
    maxzoom: 14
});


map.getSource('some id').setUrl("mapbox://mapbox.mapbox-streets-v8");


map.getSource('some id').setTiles(['https://d25uarhxywzl1j.cloudfront.net/v0.1/{z}/{x}/{y}.mvt']);

Instance Members

Was this section on VectorTileSource helpful?

VideoSource

githubsrc/source/video_source.ts

A data source containing video. See the Style Specification for detailed documentation of options.

Extends ImageSource.

Example


// add to map
map.addSource('some id', {
    type: 'video',
    url: [
        'https://www.mapbox.com/blog/assets/baltimore-smoke.mp4',
        'https://www.mapbox.com/blog/assets/baltimore-smoke.webm'
    ],
    coordinates: [
        [-76.54, 39.18],
        [-76.52, 39.18],
        [-76.52, 39.17],
        [-76.54, 39.17]
    ]
});

// update
const mySource = map.getSource('some id');
mySource.setCoordinates([
    [-76.54335737228394, 39.18579907229748],
    [-76.52803659439087, 39.1838364847587],
    [-76.5295386314392, 39.17683392507606],
    [-76.54520273208618, 39.17876344106642]
]);

map.removeSource('some id');  // remove