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

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