<TiledImageBackgroundComponent/>

This component configures sets a tiled image background for a SurfaceComponent or PaperComponent. The UI requests tiles from you as the canvas is panned and zoomed. This type of background has various usages: if you have a large background image, for instance, you may wish to serve it in pieces as the UI needs it. Alternatively, you may wish to change the background based on the current zoom (in the way that Google maps does). Another great use for this type of background is to provide a grid for your canvas.

Usage

Declare the tiled image background component inside a SurfaceComponent, SurfaceProvider, PaperComponent or PaperProvider and provide the configuration options.

In this example we use a tiled background. Each of our tiles looks like this:

And we setup the tiled background like this:

export default function MyComponent() {
    
    const options = {
        tiling: TilingStrategies.absolute,
        url: "/img/tiles/{z}/{x}_{y}.jpg",
        tileSize: {
            width: 200,
            height: 200
        },
        width: 800,
        height: 800,
        maxZoom: 2
    }
    
    return <SurfaceComponent renderOptions={...} data={...}>
        <TiledImageBackgroundComponent {...options}/>
    </SurfaceComponent>
}

To see the tile loading in action, zoom out - quickly - on this canvas:

Props

TiledImageBackgroundComponentProps

Props for the tiled image background component

Name	Type	Description
height	number	Required. Indicates the height of the full image.
maxZoom	number	Required. Indicates the maximum zoom level. Zoom starts at 0 - fully zoomed out - and increases in integer values from there. Each successive zoom level is twice the zoom of the previous level, meaning two times as many tiles in each direction.
panDebounceTimeout?	number	How long to wait after a pan before reloading tiles.
tileSize	Size	Provides the width and height of tiles. Every tile is assumed to have these dimensions, even if the tile has whitespace in it. Required.
tiling?	TilingStrategy	Default is TilingStrategies.logarithmic. See notes for TilingStrategies enum.
url?	string	URL for the background. You can supply this, or you can supply a urlGenerator function instead. If you supply url and no urlGenerator, the url you supply is treated as a template for the url for any given tile, and is expected to contain {z}, {x} and {y} placeholders. The form of the URL can be anything you like as long as it has the placeholders for z, x and y. For instance: http://foo.com/{z}/{x}/{y} https://bar.com?zoom={z}&x={x}&y={y} etc
urlGenerator?	(z:number, x:number, y:number) => string	For tiled backgrounds, an optional function you can supply to generate the URL for a given tile. See url for an explanation of the default syntax for urls when using a tiled background.
width	number	Required. Indicates the width of the full image.
zoomDebounceTimeout?	number	How long to wait after a zoom before reloading tiles.