XYZ Maps Documentation
    Preparing search index...

    Interface ImageProviderOptions

    Options to configure the ImageProvider.

    interface ImageProviderOptions {
        attribution?: string | DataSourceAttribution | DataSourceAttribution[];
        errorImage?: string | HTMLImageElement;
        id?: string;
        margin?: number;
        name?: string;
        url:
            | string
            | ((z: number, y: number, x: number, quadkey: string) => string);
        preProcessor?(
            input: {
                data: any;
                ready: (data: HTMLImageElement) => void;
                tile?: { x: number; y: number; z: number };
            },
        ): HTMLImageElement
        | Promise<HTMLImageElement>;
    }

    Hierarchy (View Summary)

    Index
    attribution? errorImage? id? margin? name? url
    preProcessor?
    attribution?: string | DataSourceAttribution | DataSourceAttribution[]

    Attribution information for data sources used by this provider.

    Attributions are automatically displayed or hidden depending on whether the corresponding data is currently active or visible on the map — e.g., based on zoom level, layer visibility, or usage. This ensures that only active data providers are credited, as required by licensing.

    Can be a simple string (displayed as static text), or an array of structured attribution entries that support clickable labels and optional tooltips.

    // Simple attribution string
    attribution: "© Data Provider"

    // Multiple detailed attributions
    attribution: [
        {
            label: "© Elevation Provider",
            url: "https://elevation.example.com",
            title: "Elevation data source"
        },
        {
            label: "Imagery © HERE Maps",
            url: "https://www.here.com",
            title: "Satellite imagery by HERE"
        }
    ]
    errorImage?: string | HTMLImageElement

    An Image url or Image that will be displayed for errored tile requests.

    id?: string

    optional id to identify the provider.

    margin?: number

    Tile margin of the provider.

    name?: string

    Name of the provider.

    url: string | ((z: number, y: number, x: number, quadkey: string) => string)

    URL for requesting tiles.

    It is either a string which may contain following flags that will be replaced by provider:

    • {SUBDOMAIN_CHAR}: subdomain id(a, b, c and d) for balancing the load
    • {SUBDOMAIN_INT}: subdomain id(0,1,2 and 3) for balancing the load
    • {SUBDOMAIN_INT_1_4}: subdomain id(1,2,3 and 4) for balancing the load
    • {QUADKEY}: quadkey of the tile to be requested
    • {Z}: z of the tile to be requested
    • {X}: x of the tile to be requested
    • {Y}: y of the tile to be requested

    or a callback function that's called with the following parameters z,y,x,quadkey and needs to return the url for the respective tile. The callback function needs to handle custom parameters by its own.

    • PreProcessor for remote data sources. The PreProcessor will be executed just after data is being received from remote backend. If the processor function is returning the processed data then its treated as a synchronous processor. If the processor function does not return any value (undefined) or a Promise then its treated as asynchronous processor. An asynchronous processor that's not using a Promise MUST call the input.ready(..) callback when data processing is finished.

      Due to the execution of the processor in a separate worker thread the processor function must be scope independent. The processor must be a "standalone function/class" that only depends on its own scope and only accesses its own local variables. No references to the outer scope of the processor function are allowed.

      Parameters

      • input: {
            data: any;
            ready: (data: HTMLImageElement) => void;
            tile?: { x: number; y: number; z: number };
        }

      Returns HTMLImageElement | Promise<HTMLImageElement>

      // PreProcessor:
       ({data: any[], ready: (HTMLImageElement) => void, tile?:{x:number,y:number,z:number}) => HTMLImageElement | Promise<HTMLImageElement>

    Settings
    Member Visibility

    On This Page
    Properties
    Methods