Sources
The source types Goong GL JS can handle in addition to the ones described in the Goong Style Specification.
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
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]]}); // updatevar 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
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 coordinatesvar 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
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]]}); // updatevar 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
CanvasSourceOptions
src/source/canvas_source.jsOptions to add a canvas source type to the map.
Properties
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.
animate
(boolean?)
: Whether the canvas source is animated. If the canvas is static (i.e. pixels do not need to be re-read on every frame),
animate
should be set to
false
to improve performance.