## GeoJSONSource
A source containing GeoJSON.
(See the Style Specification for detailed documentation of options.)
### Constructor
| Name | |
| --- | --- |
| GeoJSONSource | new GeoJSONSource(id: string, options: GeoJSONSourceOptions, dispatcher: Dispatcher, eventedParent: [Evented](./events#evented))
Parameters
1. id: string
2. options: GeoJSONSourceOptions
3. dispatcher: Dispatcher
4. eventedParent: [Evented](./events#evented) |
### Methods
| Method | |
| --- | --- |
| abortTile | abortTile(tile: Tile)
Parameters
1. tile: Tile
Return Value: void |
| fire | fire(event: string \| Event, properties: any)
Parameters
1. event: string \| Event
2. properties: any
Return Value: [GeoJSONSource](#geojsonsource) |
| getClusterChildren | getClusterChildren(clusterId: number, callback: Callback)
Parameters
1. clusterId: number
2. callback: Callback
Return Value: [GeoJSONSource](#geojsonsource)
For clustered sources, fetches the children of the given cluster on the next zoom level (as an array of GeoJSON features). |
| getClusterExpansionZoom | getClusterExpansionZoom(clusterId: number, callback: Callback)
Parameters
1. clusterId: number
2. callback: Callback
Return Value: [GeoJSONSource](#geojsonsource)
For clustered sources, fetches the zoom at which the given cluster expands. |
| getClusterLeaves | getClusterLeaves(clusterId: number, limit: number, offset: number, callback: Callback)
Parameters
1. clusterId: number
2. limit: number
3. offset: number
4. callback: Callback
Return Value: [GeoJSONSource](#geojsonsource)
For clustered sources, fetches the original points that belong to the cluster (as an array of GeoJSON features). |
| hasTransition | hasTransition()
Return Value: boolean |
| listens | listens(type: string)
Parameters
1. type: string
Return Value: any
Returns a true if this instance of Evented or any forwardeed instances of Evented have a listener for the specified type. |
| load | load()
Return Value: void |
| loadTile | loadTile(tile: Tile, callback: Callback)
Parameters
1. tile: Tile
2. callback: Callback
Return Value: void |
| loaded | loaded()
Return Value: boolean |
| off | off(type: string, listener: Listener)
Parameters
1. type: string
2. listener: Listener
Return Value: [GeoJSONSource](#geojsonsource)
Removes a previously registered event listener. |
| on | on(type: string, listener: Listener)
Parameters
1. type: string
2. listener: Listener
Return Value: [GeoJSONSource](#geojsonsource)
Adds a listener to a specified event type. |
| onAdd | onAdd(map: [Map](./map#map))
Parameters
1. map: [Map](./map#map)
Return Value: void |
| onRemove | onRemove()
Return Value: void |
| once | once(type: string, listener: Listener)
Parameters
1. type: string
2. listener: Listener
Return Value: [GeoJSONSource](#geojsonsource)
Adds a listener that will be called only once to a specified event type.
The listener will be called first time the event fires after the listener is registered. |
| serialize | serialize()
Return Value: any |
| setData | setData(data: string \| GeoJSON)
Parameters
1. data: string \| GeoJSON
Return Value: [GeoJSONSource](#geojsonsource)
Sets the GeoJSON data and re-renders the map. |
| setEventedParent | setEventedParent(parent: [Evented](./events#evented), data: any)
Parameters
1. parent: [Evented](./events#evented)
2. data: any
Return Value: [GeoJSONSource](#geojsonsource)
Bubble all events fired by this instance of Evented to this parent instance of Evented. |
| unloadTile | unloadTile(tile: Tile)
Parameters
1. tile: Tile
Return Value: void |
## Example
```ts
map.addSource('some id', {
type: 'geojson',
data: 'https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_10m_ports.geojson'
});
```
## ImageSource
A data source containing an image.
(See the Style Specification for detailed documentation of options.)
### Constructor
| Name | |
| --- | --- |
| ImageSource | new ImageSource(id: string, options: CanvasSourceSpecification \| ImageSourceSpecification \| VideoSourceSpecification, dispatcher: Dispatcher, eventedParent: [Evented](./events#evented))
Parameters
1. id: string
2. options: CanvasSourceSpecification \| ImageSourceSpecification \| VideoSourceSpecification
3. dispatcher: Dispatcher
4. eventedParent: [Evented](./events#evented) |
### Methods
| Method | |
| --- | --- |
| fire | fire(event: string \| Event, properties: any)
Parameters
1. event: string \| Event
2. properties: any
Return Value: [ImageSource](#imagesource) |
| hasTransition | hasTransition()
Return Value: boolean |
| listens | listens(type: string)
Parameters
1. type: string
Return Value: any
Returns a true if this instance of Evented or any forwardeed instances of Evented have a listener for the specified type. |
| load | load(newCoordinates: Coordinates, successCallback: Function)
Parameters
1. newCoordinates: Coordinates
2. successCallback: Function
Return Value: void |
| loadTile | loadTile(tile: Tile, callback: Callback)
Parameters
1. tile: Tile
2. callback: Callback
Return Value: void |
| loaded | loaded()
Return Value: boolean |
| off | off(type: string, listener: Listener)
Parameters
1. type: string
2. listener: Listener
Return Value: [ImageSource](#imagesource)
Removes a previously registered event listener. |
| on | on(type: string, listener: Listener)
Parameters
1. type: string
2. listener: Listener
Return Value: [ImageSource](#imagesource)
Adds a listener to a specified event type. |
| onAdd | onAdd(map: [Map](./map#map))
Parameters
1. map: [Map](./map#map)
Return Value: void |
| once | once(type: string, listener: Listener)
Parameters
1. type: string
2. listener: Listener
Return Value: [ImageSource](#imagesource)
Adds a listener that will be called only once to a specified event type.
The listener will be called first time the event fires after the listener is registered. |
| prepare | prepare()
Return Value: void |
| serialize | serialize()
Return Value: any |
| setCoordinates | setCoordinates(coordinates: Coordinates)
Parameters
1. coordinates: Coordinates
Return Value: [ImageSource](#imagesource)
Sets the image's coordinates and re-renders the map. |
| setEventedParent | setEventedParent(parent: [Evented](./events#evented), data: any)
Parameters
1. parent: [Evented](./events#evented)
2. data: any
Return Value: [ImageSource](#imagesource)
Bubble all events fired by this instance of Evented to this parent instance of Evented. |
| updateImage | updateImage(options: { coordinates: Coordinates,url: string })
Parameters
1. options: { coordinates: Coordinates,url: string }
Return Value: [ImageSource](#imagesource)
Updates the image URL and, optionally, the coordinates. To avoid having the image flash after changing,
set the `raster-fade-duration` paint property on the raster layer to 0. |
## Example
```ts
// add to map
map.addSource('some id', {
type: 'image',
url: 'https://nextbillion.ai/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://nextbillion.ai/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
```
## VideoSource
A data source containing video.
(See the Style Specification for detailed documentation of options.)
### Constructor
| Name | |
| --- | --- |
| VideoSource | new VideoSource(id: string, options: VideoSourceSpecification, dispatcher: Dispatcher, eventedParent: [Evented](./events#evented))
Parameters
1. id: string
2. options: VideoSourceSpecification
3. dispatcher: Dispatcher
4. eventedParent: [Evented](./events#evented) |
### Methods
| Method | |
| --- | --- |
| fire | fire(event: string \| Event, properties: any)
Parameters
1. event: string \| Event
2. properties: any
Return Value: [VideoSource](#videosource) |
| getVideo | getVideo()
Return Value: HTMLVideoElement
Returns the HTML `video` element. |
| hasTransition | hasTransition()
Return Value: boolean |
| listens | listens(type: string)
Parameters
1. type: string
Return Value: any
Returns a true if this instance of Evented or any forwardeed instances of Evented have a listener for the specified type. |
| load | load()
Return Value: void |
| loadTile | loadTile(tile: Tile, callback: Callback)
Parameters
1. tile: Tile
2. callback: Callback
Return Value: void |
| loaded | loaded()
Return Value: boolean |
| off | off(type: string, listener: Listener)
Parameters
1. type: string
2. listener: Listener
Return Value: [VideoSource](#videosource)
Removes a previously registered event listener. |
| on | on(type: string, listener: Listener)
Parameters
1. type: string
2. listener: Listener
Return Value: [VideoSource](#videosource)
Adds a listener to a specified event type. |
| onAdd | onAdd(map: [Map](./map#map))
Parameters
1. map: [Map](./map#map)
Return Value: void |
| once | once(type: string, listener: Listener)
Parameters
1. type: string
2. listener: Listener
Return Value: [VideoSource](#videosource)
Adds a listener that will be called only once to a specified event type.
The listener will be called first time the event fires after the listener is registered. |
| pause | pause()
Return Value: void
Pauses the video. |
| play | play()
Return Value: void
Plays the video. |
| prepare | prepare()
Return Value: void
Sets the video's coordinates and re-renders the map. |
| seek | seek(seconds: number)
Parameters
1. seconds: number
Return Value: void
Sets playback to a timestamp, in seconds. |
| serialize | serialize()
Return Value: none |
| setCoordinates | setCoordinates(coordinates: Coordinates)
Parameters
1. coordinates: Coordinates
Return Value: [VideoSource](#videosource)
Sets the image's coordinates and re-renders the map. |
| setEventedParent | setEventedParent(parent: [Evented](./events#evented), data: any)
Parameters
1. parent: [Evented](./events#evented)
2. data: any
Return Value: [VideoSource](#videosource)
Bubble all events fired by this instance of Evented to this parent instance of Evented. |
| updateImage | updateImage(options: { coordinates: Coordinates,url: string })
Parameters
1. options: { coordinates: Coordinates,url: string }
Return Value: [VideoSource](#videosource)
Updates the image URL and, optionally, the coordinates. To avoid having the image flash after changing,
set the `raster-fade-duration` paint property on the raster layer to 0. |
## Example
```ts
// add to map
map.addSource('some id', {
type: 'video',
url: [
'https://nextbillion.ai/blog/assets/baltimore-smoke.mp4',
'https://nextbillion.ai/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
```
## CanvasSource
A data source containing the contents of an HTML canvas. See CanvasSourceOptions for detailed documentation of options.
### Constructor
| Name | |
| --- | --- |
| CanvasSource | new CanvasSource(id: string, options: CanvasSourceSpecification, dispatcher: Dispatcher, eventedParent: [Evented](./events#evented))
Parameters
1. id: string
2. options: CanvasSourceSpecification
3. dispatcher: Dispatcher
4. eventedParent: [Evented](./events#evented) |
### Methods
| Method | |
| --- | --- |
| fire | fire(event: string \| Event, properties: any)
Parameters
1. event: string \| Event
2. properties: any
Return Value: [CanvasSource](#canvassource) |
| getCanvas | getCanvas()
Return Value: HTMLCanvasElement
Returns the HTML `canvas` element. |
| hasTransition | hasTransition()
Return Value: boolean |
| listens | listens(type: string)
Parameters
1. type: string
Return Value: any
Returns a true if this instance of Evented or any forwardeed instances of Evented have a listener for the specified type. |
| load | load()
Return Value: void
Disables animation. The map will display a static copy of the canvas image. |
| loadTile | loadTile(tile: Tile, callback: Callback)
Parameters
1. tile: Tile
2. callback: Callback
Return Value: void |
| loaded | loaded()
Return Value: boolean |
| off | off(type: string, listener: Listener)
Parameters
1. type: string
2. listener: Listener
Return Value: [CanvasSource](#canvassource)
Removes a previously registered event listener. |
| on | on(type: string, listener: Listener)
Parameters
1. type: string
2. listener: Listener
Return Value: [CanvasSource](#canvassource)
Adds a listener to a specified event type. |
| onAdd | onAdd(map: [Map](./map#map))
Parameters
1. map: [Map](./map#map)
Return Value: void |
| onRemove | onRemove()
Return Value: void |
| once | once(type: string, listener: Listener)
Parameters
1. type: string
2. listener: Listener
Return Value: [CanvasSource](#canvassource)
Adds a listener that will be called only once to a specified event type.
The listener will be called first time the event fires after the listener is registered. |
| prepare | prepare()
Return Value: void |
| serialize | serialize()
Return Value: any |
| setCoordinates | setCoordinates(coordinates: Coordinates)
Parameters
1. coordinates: Coordinates
Return Value: [CanvasSource](#canvassource)
Sets the image's coordinates and re-renders the map. |
| setEventedParent | setEventedParent(parent: [Evented](./events#evented), data: any)
Parameters
1. parent: [Evented](./events#evented)
2. data: any
Return Value: [CanvasSource](#canvassource)
Bubble all events fired by this instance of Evented to this parent instance of Evented. |
| updateImage | updateImage(options: { coordinates: Coordinates,url: string })
Parameters
1. options: { coordinates: Coordinates,url: string }
Return Value: [CanvasSource](#canvassource)
Updates the image URL and, optionally, the coordinates. To avoid having the image flash after changing,
set the `raster-fade-duration` paint property on the raster layer to 0. |
## Example
```ts
// 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
```