Sources | Web Maps SDK (v2) References

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) Parameters id: string options: GeoJSONSourceOptions dispatcher: Dispatcher eventedParent: Evented

Name

GeoJSONSource

new GeoJSONSource(id: string, options: GeoJSONSourceOptions, dispatcher: Dispatcher, eventedParent: Evented)

Parameters

id: string
options: GeoJSONSourceOptions
dispatcher: Dispatcher
eventedParent: Evented

Methods

Method
abortTile	abortTile(tile: Tile) Parameters tile: Tile Return Value: void
fire	fire(event: string \| Event, properties: any) Parameters event: string \| Event properties: any Return Value: GeoJSONSource
getClusterChildren	getClusterChildren(clusterId: number, callback: Callback) Parameters clusterId: number callback: Callback Return Value: 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 clusterId: number callback: Callback Return Value: GeoJSONSource For clustered sources, fetches the zoom at which the given cluster expands.
getClusterLeaves	getClusterLeaves(clusterId: number, limit: number, offset: number, callback: Callback) Parameters clusterId: number limit: number offset: number callback: Callback Return Value: 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 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 tile: Tile callback: Callback Return Value: void
loaded	loaded() Return Value: boolean
off	off(type: string, listener: Listener) Parameters type: string listener: Listener Return Value: GeoJSONSource Removes a previously registered event listener.
on	on(type: string, listener: Listener) Parameters type: string listener: Listener Return Value: GeoJSONSource Adds a listener to a specified event type.
onAdd	onAdd(map: Map) Parameters map: Map Return Value: void
onRemove	onRemove() Return Value: void
once	once(type: string, listener: Listener) Parameters type: string listener: Listener Return Value: 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 data: string \| GeoJSON Return Value: GeoJSONSource Sets the GeoJSON data and re-renders the map.
setEventedParent	setEventedParent(parent: Evented, data: any) Parameters parent: Evented data: any Return Value: GeoJSONSource Bubble all events fired by this instance of Evented to this parent instance of Evented.
unloadTile	unloadTile(tile: Tile) Parameters tile: Tile Return Value: void

Example

1
map.addSource('some id', {
2
    type: 'geojson',
3
    data: 'https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_10m_ports.geojson'
4
});

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) Parameters id: string options: CanvasSourceSpecification \| ImageSourceSpecification \| VideoSourceSpecification dispatcher: Dispatcher eventedParent: Evented

Name

ImageSource

new ImageSource(id: string, options: CanvasSourceSpecification | ImageSourceSpecification | VideoSourceSpecification, dispatcher: Dispatcher, eventedParent: Evented)

Parameters

id: string
options: CanvasSourceSpecification | ImageSourceSpecification | VideoSourceSpecification
dispatcher: Dispatcher
eventedParent: Evented

Methods

Method
fire	fire(event: string \| Event, properties: any) Parameters event: string \| Event properties: any Return Value: ImageSource
hasTransition	hasTransition() Return Value: boolean
listens	listens(type: string) Parameters 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 newCoordinates: Coordinates successCallback: Function Return Value: void
loadTile	loadTile(tile: Tile, callback: Callback) Parameters tile: Tile callback: Callback Return Value: void
loaded	loaded() Return Value: boolean
off	off(type: string, listener: Listener) Parameters type: string listener: Listener Return Value: ImageSource Removes a previously registered event listener.
on	on(type: string, listener: Listener) Parameters type: string listener: Listener Return Value: ImageSource Adds a listener to a specified event type.
onAdd	onAdd(map: Map) Parameters map: Map Return Value: void
once	once(type: string, listener: Listener) Parameters type: string listener: Listener Return Value: 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 coordinates: Coordinates Return Value: ImageSource Sets the image's coordinates and re-renders the map.
setEventedParent	setEventedParent(parent: Evented, data: any) Parameters parent: Evented data: any Return Value: ImageSource Bubble all events fired by this instance of Evented to this parent instance of Evented.
updateImage	updateImage(options: { coordinates: Coordinates,url: string }) Parameters options: { coordinates: Coordinates,url: string } Return Value: 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

1
// add to map
2
map.addSource('some id', {
3
   type: 'image',
4
   url: 'https://nextbillion.ai/images/foo.png',
5
   coordinates: [
6
       [-76.54, 39.18],
7
       [-76.52, 39.18],
8
       [-76.52, 39.17],
9
       [-76.54, 39.17]
10
   ]
11
});
12

13
// update coordinates
14
var mySource = map.getSource('some id');
15
mySource.setCoordinates([
16
    [-76.54335737228394, 39.18579907229748],
17
    [-76.52803659439087, 39.1838364847587],
18
    [-76.5295386314392, 39.17683392507606],
19
    [-76.54520273208618, 39.17876344106642]
20
]);
21

22
// update url and coordinates simultaneously
23
mySource.updateImage({
24
   url: 'https://nextbillion.ai/images/bar.png',
25
   coordinates: [
26
       [-76.54335737228394, 39.18579907229748],
27
       [-76.52803659439087, 39.1838364847587],
28
       [-76.5295386314392, 39.17683392507606],
29
       [-76.54520273208618, 39.17876344106642]
30
   ]
31
})
32

33
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) Parameters id: string options: VideoSourceSpecification dispatcher: Dispatcher eventedParent: Evented

Name

VideoSource

new VideoSource(id: string, options: VideoSourceSpecification, dispatcher: Dispatcher, eventedParent: Evented)

Parameters

id: string
options: VideoSourceSpecification
dispatcher: Dispatcher
eventedParent: Evented

Methods

Method
fire	fire(event: string \| Event, properties: any) Parameters event: string \| Event properties: any Return Value: VideoSource
getVideo	getVideo() Return Value: HTMLVideoElement Returns the HTML `video` element.
hasTransition	hasTransition() Return Value: boolean
listens	listens(type: string) Parameters 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 tile: Tile callback: Callback Return Value: void
loaded	loaded() Return Value: boolean
off	off(type: string, listener: Listener) Parameters type: string listener: Listener Return Value: VideoSource Removes a previously registered event listener.
on	on(type: string, listener: Listener) Parameters type: string listener: Listener Return Value: VideoSource Adds a listener to a specified event type.
onAdd	onAdd(map: Map) Parameters map: Map Return Value: void
once	once(type: string, listener: Listener) Parameters type: string listener: Listener Return Value: 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 seconds: number Return Value: void Sets playback to a timestamp, in seconds.
serialize	serialize() Return Value: none
setCoordinates	setCoordinates(coordinates: Coordinates) Parameters coordinates: Coordinates Return Value: VideoSource Sets the image's coordinates and re-renders the map.
setEventedParent	setEventedParent(parent: Evented, data: any) Parameters parent: Evented data: any Return Value: VideoSource Bubble all events fired by this instance of Evented to this parent instance of Evented.
updateImage	updateImage(options: { coordinates: Coordinates,url: string }) Parameters options: { coordinates: Coordinates,url: string } Return Value: 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

1
// add to map
2
map.addSource('some id', {
3
   type: 'video',
4
   url: [
5
       'https://nextbillion.ai/blog/assets/baltimore-smoke.mp4',
6
       'https://nextbillion.ai/blog/assets/baltimore-smoke.webm'
7
   ],
8
   coordinates: [
9
       [-76.54, 39.18],
10
       [-76.52, 39.18],
11
       [-76.52, 39.17],
12
       [-76.54, 39.17]
13
   ]
14
});
15

16
// update
17
var mySource = map.getSource('some id');
18
mySource.setCoordinates([
19
    [-76.54335737228394, 39.18579907229748],
20
    [-76.52803659439087, 39.1838364847587],
21
    [-76.5295386314392, 39.17683392507606],
22
    [-76.54520273208618, 39.17876344106642]
23
]);
24

25
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) Parameters id: string options: CanvasSourceSpecification dispatcher: Dispatcher eventedParent: Evented

Name

CanvasSource

new CanvasSource(id: string, options: CanvasSourceSpecification, dispatcher: Dispatcher, eventedParent: Evented)

Parameters

id: string
options: CanvasSourceSpecification
dispatcher: Dispatcher
eventedParent: Evented

Methods

Method
fire	fire(event: string \| Event, properties: any) Parameters event: string \| Event properties: any Return Value: CanvasSource
getCanvas	getCanvas() Return Value: HTMLCanvasElement Returns the HTML `canvas` element.
hasTransition	hasTransition() Return Value: boolean
listens	listens(type: string) Parameters 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 tile: Tile callback: Callback Return Value: void
loaded	loaded() Return Value: boolean
off	off(type: string, listener: Listener) Parameters type: string listener: Listener Return Value: CanvasSource Removes a previously registered event listener.
on	on(type: string, listener: Listener) Parameters type: string listener: Listener Return Value: CanvasSource Adds a listener to a specified event type.
onAdd	onAdd(map: Map) Parameters map: Map Return Value: void
onRemove	onRemove() Return Value: void
once	once(type: string, listener: Listener) Parameters type: string listener: Listener Return Value: 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 coordinates: Coordinates Return Value: CanvasSource Sets the image's coordinates and re-renders the map.
setEventedParent	setEventedParent(parent: Evented, data: any) Parameters parent: Evented data: any Return Value: CanvasSource Bubble all events fired by this instance of Evented to this parent instance of Evented.
updateImage	updateImage(options: { coordinates: Coordinates,url: string }) Parameters options: { coordinates: Coordinates,url: string } Return Value: 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

1
// add to map
2
map.addSource('some id', {
3
   type: 'canvas',
4
   canvas: 'idOfMyHTMLCanvas',
5
   animate: true,
6
   coordinates: [
7
       [-76.54, 39.18],
8
       [-76.52, 39.18],
9
       [-76.52, 39.17],
10
       [-76.54, 39.17]
11
   ]
12
});
13

14
// update
15
var mySource = map.getSource('some id');
16
mySource.setCoordinates([
17
    [-76.54335737228394, 39.18579907229748],
18
    [-76.52803659439087, 39.1838364847587],
19
    [-76.5295386314392, 39.17683392507606],
20
    [-76.54520273208618, 39.17876344106642]
21
]);
22

23
map.removeSource('some id');  // remove