An image source powered by OpenLayers to load tiled images. Supports all subclasses of the OpenLayers TileSource.

If the tiles of the source are in a format that is not supported directly by the browser, i.e not JPG/PNG/WebP, then you must pass a decoder with the format constructor option.

To filter out no-data pixels, you may pass the noDataValue option in the constructor.


// To create a source based on the Stamen OpenLayers source, with the 'toner' style.
const source = new TiledImageSource({
source: new Stamen({ layer: 'toner' })

// To create a WMS source that downloads TIFF images, eliminating all pixels that have the
// value -9999 and replacing them with transparent pixels.
const source = new TiledImageSource({
source: new TileWMS({
url: '',
params: {
LAYERS: 'theLayer',
FORMAT: 'image/tiff',
projection: 'EPSG:3946',
crossOrigin: 'anonymous',
version: '1.3.0',
format: new GeoTIFFFormat(),
noDataValue: -9999,

Hierarchy (view full)



containsFn: CustomContainsFn
datatype: TextureDataType

Gets the datatype of images generated by this source.

flipY: boolean

Gets whether images generated from this source should be flipped vertically.

format: ImageFormat
isImageSource: boolean = true
isTiledImageSource: boolean = true
noDataValue: number
olprojection: Projection
source: UrlTile
type: string
version: number


  • get colorSpace(): ColorSpace
  • Gets the color space of the textures generated by this source.

    Returns ColorSpace


  • Returns an adjusted extent, width and height so that request pixels are aligned with source pixels, and requests do not oversample the source.


    • requestExtent: Extent

      The request extent.

    • requestWidth: number

      The width, in pixels, of the request extent.

    • requestHeight: number

      The height, in pixels, of the request extent.

    • margin: number = 0

      The margin, in pixels, around the initial extent.

    Returns {
        extent: Extent;
        height: number;
        width: number;

    The adjusted parameters.

    • extent: Extent
    • height: number
    • width: number
  • Gets whether this source contains the specified extent. If a custom contains function is provided, it will be used. Otherwise, intersects is used.

    This method is mainly used to discard non-relevant requests (i.e don't process regions that are not relevant to this source).


    • extent: Extent

      The extent to test.

    Returns boolean

  • Initializes the source.


    • options: {
          targetProjection: string;


      • targetProjection: string

        The target projection. Only useful for sources that are able to reproject their data on the fly (typically vector sources).

    Returns Promise<void>

    A promise that resolves when the source is initialized.

  • Test the intersection between the specified extent and this source's extent. This method may be overriden to perform special logic.


    • extent: Extent

      The extent to test.

    Returns boolean

    true if the extent and this source extent intersects, false otherwise.