Maps SDK for Web
tt.CanvasSource
A data source containing the contents of an HTML canvas.
const myCanvas = document.querySelector('#my-canvas-element');
map.addSource('my-canvas', {
type: 'canvas',
canvas: myCanvas,
coordinates: [
[21.54, 52.18],
[21.52, 52.18],
[21.52, 52.17],
[21.54, 52.17]
]
});
map.removeSource('my-canvas');
Properties
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.
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.
type: String
Source type. Must be
"canvas"
.
Methods
getCanvas( ): HTMLCanvasElement
Returns the HTML canvas element.
Returns
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.
setCoordinates(coordinates): tt.CanvasSource
Sets the canvas's coordinates and re-renders the map.
Example
const canvasSource = map.getSource('my-canvas'):
canvasSource.setCoordinates([
[21.54, 52.18],
[21.52, 52.18],
[21.52, 52.17],
[21.54, 52.17]
]);
Parameters
Name | Description |
---|---|
coordinates
Array default:None |
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
this