Mapbox GL JS
API Reference
Introduction
Map
Properties and options
Markers and controls
Geography and geometry
User interaction handlers
Sources
Events

Sources

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

GeoJSONSource

src/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?

VideoSource

src/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
var 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?

ImageSource

src/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
var 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?

CanvasSource

src/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
var 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

src/source/canvas_source.js

Options to add a canvas source type to the map.

Properties

type(string): Source type. Must be "canvas" .
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.
Was this section on CanvasSourceOptions helpful?