Sources
The source types Mapbox GL JS can handle in addition to the ones described in the Mapbox Style Specification.
CanvasSource
src/source/canvas_source.jsA data source containing the contents of an HTML canvas. See CanvasSourceOptions for detailed documentation of options.
Extends ImageSource.
Example
// add to mapmap.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]]}); // updateconst 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
Related
CanvasSourceOptions
src/source/canvas_source.jsOptions to add a canvas source type to the map.
ObjectProperties
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.
GeoJSONSource
src/source/geojson_source.jsA 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
Related
ImageSource
src/source/image_source.jsA data source containing an image. See the Style Specification for detailed documentation of options.
Extends Evented.
Example
// add to mapmap.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 coordinatesconst 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 simultaneouslymySource.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
Related
VectorTileSource
src/source/vector_tile_source.jsA source containing vector tiles in Mapbox Vector Tile format. See the Style Specification for detailed documentation of options.
Extends 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
Related
VideoSource
src/source/video_source.jsA data source containing video. See the Style Specification for detailed documentation of options.
Extends ImageSource.
Example
// add to mapmap.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]]}); // updateconst 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