Sources¶
The source types vietmap GL JS can handle in addition to the ones described in the vietmap Style Specification.
GeoJSONSource¶
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¶
getClusterChildren(clusterId, callback)¶
For clustered sources, fetches the children of the given cluster on the next zoom level (as an array of GeoJSON features).
Parameters
- clusterId(number)The value of the cluster's cluster_id property.
- callback(Callback>)A callback to be called when the features are retrieved ( (error, features) => { ... } ).
Returns
GeoJSONSource: this
getClusterExpansionZoom(clusterId, callback)¶
For clustered sources, fetches the zoom at which the given cluster expands.
Parameters
- clusterId(number)The value of the cluster's cluster_id property.
- callback(Callback)A callback to be called when the zoom value is retrieved ( (error, zoom) => { ... } ).
Returns
GeoJSONSource: this
getClusterLeaves(clusterId, limit, offset, callback)¶
For clustered sources, fetches the original points that belong to the cluster (as an array of GeoJSON features).
Parameters
clusterId(number) The value of the cluster's cluster_id property.
limit(number) The maximum number of features to return.
offset(number) The number of features to skip (e.g. for pagination).
callback(Callback>)A callback to be called when the features are retrieved ( (error, features) => { ... } ).
Returns
GeoJSONSource: this
Example
// Retrieve cluster leaves on click
map.on('click', 'clusters', function(e) {
var features = map.queryRenderedFeatures(e.point, {
layers: ['clusters']
});
var clusterId = features[0].properties.cluster_id;
var pointCount = features[0].properties.point_count;
var clusterSource = map.getSource('clusters');
clusterSource.getClusterLeaves(clusterId, pointCount, 0, function(error, features) {
// Print cluster leaves in the console
console.log('Cluster leaves:', error, features);
})
});
setData(data)¶
Sets the GeoJSON data and re-renders the map.
Parameters
data((Object | string)) A GeoJSON data object or a URL to one. The latter is preferable in the case of large GeoJSON files.
Returns
GeoJSONSource: this
VideoSource¶
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¶
getVideo()¶
Returns the HTML video element.
Returns
HTMLVideoElement: The HTML video element.
pause()¶
Pauses the video.
play()¶
Plays the video.
setCoordinates()¶
Sets the video's coordinates and re-renders the map.
Returns
VideoSource: this
ImageSource¶
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.vietmap.org/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.vietmap.org/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¶
setCoordinates(coordinates)¶
Sets the image's coordinates and re-renders the map.
Parameters coordinates(Array>)Four geographical coordinates, represented as arrays of longitude and latitude numbers, which define the corners of the image. The coordinates start at the top left corner of the image and proceed in clockwise order. They do not have to represent a rectangle.
Returns
ImageSource: this
updateImage(options)¶
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.
Parameters
options(Object)Options object.
|Name|Description|
|--- |--- |
|options.urlstring?|Required image URL.|
|options.coordinatesArray
Returns
ImageSource: this
CanvasSource¶
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¶
getCanvas()¶
Returns the HTML canvas element.
Returns
HTMLCanvasElement: The HTML canvas element.
pause()¶
Disables animation. The map will display a static copy of the canvas image.
play()¶
Enables animation. The image will be copied from the canvas to the map on each frame.
CanvasSourceOptions()¶
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>): 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.
