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.
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
(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.
((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.
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.
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
RasterTileSource
src/source/raster_tile_source.jsA source containing raster tiles. See the Style Specification for detailed documentation of options.
Parameters
(string)
((RasterSourceSpecification | RasterDEMSourceSpecification))
(Dispatcher)
(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
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.
Parameters
(string)
(any)
(Dispatcher)
(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.
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