Mapbox GL JS
All docschevron-rightMapbox GL JSchevron-rightarrow-leftAPI Referencechevron-rightSources

Sources

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

CanvasSource

githubsrc/source/canvas_source.js

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

Extends ImageSource.

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

Was this section on CanvasSource helpful?

CanvasSourceOptions

githubsrc/source/canvas_source.js

Options to add a canvas source type to the map.

Type

Object

Properties

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.js

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.js

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?

RasterTileSource

githubsrc/source/raster_tile_source.js

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

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

Parameters

id(string)
options((RasterSourceSpecification | RasterDEMSourceSpecification))
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.js

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

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.js

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

Instance Members

Was this section on VideoSource helpful?