Skip to main content

TiledImageBackgroundComponentProps

Props for the tiled image background component

Properties​

height​

height: number

Required. Indicates the height of the full image.

maxZoom​

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?​

optional panDebounceTimeout: number

How long to wait after a pan before reloading tiles.

tileSize​

tileSize: Size

For tiled backgrounds, 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?​

optional tiling: TilingStrategy

Default is TilingStrategies.logarithmic. See notes for TilingStrategies enum.

url?​

optional 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()?​

optional urlGenerator: (z, x, y) => 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.

Parameters​

z​

number

zoom level

x​

number

x coordinate of tile

y​

number

y coordinate of tile

Returns​

string

width​

width: number

Required. Indicates the width of the full image.

zoomDebounceTimeout?​

optional zoomDebounceTimeout: number

How long to wait after a zoom before reloading tiles.