---
title: TileOverlayImageCallback
framework: mapkitjs
role: symbol
role_heading: Type
path: mapkitjs/tileoverlayimagecallback
---

# TileOverlayImageCallback

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

## Declaration

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

## Discussion

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

- [new TileOverlay(imageForTile, options)](mapkitjs/tileoverlay/tileoverlayconstructor.md)
- [TileOverlayConstructorOptions](mapkitjs/tileoverlayconstructoroptions.md)
- [TileOverlayUrlTemplate](mapkitjs/tileoverlayurltemplate.md)