Contents

TileOverlayImageCallback

A callback function that provides tile images for a tile overlay.

Declaration

type TileOverlayImageCallback = (
    x: number,
    y: number,
    z: number,
    scale: number,
    data: any,
) => ImageSource | Promise<ImageSource> | null;

Discussion

When MapKit JS needs to display a tile, it invokes the callback with the parameters x, y, z, scale, and data. Return one of the following:

  • An ImageSource such as an HTMLCanvasElement or OffscreenCanvas for synchronous tile rendering.

  • A Promise that resolves to an ImageSource for asynchronous tile loading.

  • null to indicate there is no tile for the requested coordinates.

The following example creates a TileOverlay with a callback that draws each tile on a canvas:

const overlay = new mapkit.TileOverlay((x, y, z, scale) => {
    const size = 256 * scale;
    const canvas = new OffscreenCanvas(size, size);
    const ctx = canvas.getContext("2d");
    // Draw tile content based on x, y, z coordinates.
    return canvas;
});

To load tiles asynchronously, return a Promise:

const overlay = new mapkit.TileOverlay((x, y, z, scale) => {
    return fetch(`https://myserver/tile/${z}/${x}/${y}`)
        .then((response) => response.blob())
        .then((blob) => createImageBitmap(blob));
});

See ImageSource for cross-origin requirements.

See Also

Creating a tile overlay