leaflet/dist/types/layer/ImageOverlay.d.ts

JavaScript library for mobile-friendly interactive maps

import { Layer } from './Layer.js';
import { LatLngBounds } from '../geo/LatLngBounds.js';
import type { Defaults, ImageOverlayDefaults, ImageOverlayEventMap, ImageOverlayOptions, LatLngBoundsExpression, LeafletEvent, ZoomAnimEvent } from '../types.js';
import type { LatLng } from '../geo/LatLng.js';
import type { LeafletMap } from '../map/Map.js';
/** @import {Defaults, ImageOverlayDefaults, ImageOverlayEventMap, ImageOverlayOptions, LatLngBoundsExpression,
 *    LeafletEvent, ZoomAnimEvent} from '../types.js' */
/** @import {LatLng} from '../geo/LatLng.js' */
/** @import {LeafletMap} from '../map/Map.js' */
declare const defaultOptions: {
    /** The opacity of the image overlay. */
    opacity: number;
    /** Text for the `alt` attribute of the image (useful for accessibility). */
    alt: string;
    /** If `true`, the image overlay will emit [pointer events](#interactive-layer) when clicked or hovered. */
    interactive: boolean;
    /**
     * Whether the crossOrigin attribute will be added to the image. If a String is provided, the image will have
     * its crossOrigin attribute set to the String provided. This is needed if you want to access image pixel data.
     * Refer to [CORS Settings](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes) for valid
     * String values.
     * @type {boolean | string}
     */
    crossOrigin: boolean | string;
    /** URL to the overlay image to show in place of the overlay that failed to load. */
    errorOverlayUrl: string;
    /**
     * The explicit [zIndex](https://developer.mozilla.org/docs/Web/CSS/CSS_Positioning/Understanding_z_index)
     * of the overlay layer.
     */
    zIndex: number;
    /** A custom class name to assign to the image. Empty by default. */
    className: string;
    /**
     * Tells the browser whether to decode the image in a synchronous fashion, as per the [`decoding`
     * HTML attribute](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/decoding). If
     * the image overlay is flickering when being added/removed, set this option to `'sync'`.
     * @type {'sync' | 'async' | 'auto'}
     */
    decoding: 'sync' | 'async' | 'auto';
};
export type ImageOverlayDefaultsValues = typeof defaultOptions;
export type ImageOverlayEvents = {
    /**
     * Fired when the ImageOverlay layer has loaded its image.
     */
    load: LeafletEvent;
    /**
     * Fired when the ImageOverlay layer fails to load its image.
     */
    error: LeafletEvent;
};
/** @typedef {typeof defaultOptions} ImageOverlayDefaultsValues */
/**
 * @typedef {Object} ImageOverlayEvents
 * @property {LeafletEvent} load Fired when the ImageOverlay layer has loaded its image.
 * @property {LeafletEvent} error Fired when the ImageOverlay layer fails to load its image.
 */
/**
 * Used to load and display a single image over specific bounds of the map. Extends `Layer`.
 * @example
 * ```js
 * const imageUrl = 'https://maps.lib.utexas.edu/maps/historical/newark_nj_1922.jpg',
 * 	imageBounds = [[40.712216, -74.22655], [40.773941, -74.12544]];
 * new ImageOverlay(imageUrl, imageBounds).addTo(map);
 * ```
 * @template {ImageOverlayOptions} [O=ImageOverlayOptions]
 * @template {ImageOverlayEventMap} [E=ImageOverlayEventMap]
 * @template {HTMLElement | SVGElement} [El=HTMLImageElement] the overlay's element
 * @template [S=string | El] what the overlay is created from
 * @extends {Layer<O & ImageOverlayDefaults, E>}
 */
export declare class ImageOverlay<O extends ImageOverlayOptions = ImageOverlayOptions, E extends ImageOverlayEventMap = ImageOverlayEventMap, El extends HTMLElement | SVGElement = HTMLImageElement, S = string | El> extends Layer<O & ImageOverlayDefaults, E> {
    /** @type {S | string} */
    _url: S | string;
    _bounds: LatLngBounds;
    /** @type {El} */
    _image: El;
    static initHooks: boolean;
    /** @type {Defaults<ImageOverlayOptions>} */
    static defaultOptions: Defaults<ImageOverlayOptions>;
    /**
     * Instantiates an image overlay object given the URL of the image (or an image element) and the geographical
     * bounds it is tied to.
     * @param {NoInfer<S>} url
     * @param {LatLngBoundsExpression} bounds
     * @param {NoInfer<Partial<O>>} [options]
     */
    constructor(url: NoInfer<S>, bounds: LatLngBoundsExpression, options?: NoInfer<Partial<O>>);
    /** @param {LeafletMap} map */
    onAdd(map: LeafletMap): void;
    /** @param {LeafletMap} map */
    onRemove(map: LeafletMap): void;
    /**
     * Sets the opacity of the overlay.
     * @param {number} opacity
     */
    setOpacity(opacity: number): this;
    /** @param {{opacity?: number}} styleOpts */
    setStyle(styleOpts: {
        opacity?: number;
    }): this;
    /** Brings the layer to the top of all overlays. */
    bringToFront(): this;
    /** Brings the layer to the bottom of all overlays. */
    bringToBack(): this;
    /**
     * Changes the URL of the image.
     * @param {string} url
     */
    setUrl(url: string): this;
    /**
     * Update the bounds that this ImageOverlay covers.
     * @param {LatLngBoundsExpression} bounds
     */
    setBounds(bounds: LatLngBoundsExpression): this;
    getEvents(): {
        zoom: () => void;
        viewreset: () => void;
        zoomanim: (e: ZoomAnimEvent) => void;
    };
    /**
     * Changes the [zIndex](#imageoverlay-zindex) of the image overlay.
     * @param {number} value
     */
    setZIndex(value: number): this;
    /** Get the bounds that this ImageOverlay covers. */
    getBounds(): LatLngBounds;
    /**
     * Returns the instance of [`HTMLImageElement`](https://developer.mozilla.org/docs/Web/API/HTMLImageElement)
     * used by this overlay (for `VideoOverlay` and `SVGOverlay`, their `<video>` or `<svg>` element).
     */
    getElement(): El;
    _initImage(): void;
    /** @param {ZoomAnimEvent} e */
    _animateZoom(e: ZoomAnimEvent): void;
    _reset(): void;
    _updateOpacity(): void;
    _updateZIndex(): void;
    _overlayOnError(): void;
    /** Returns the center of the ImageOverlay. */
    getCenter(): LatLng;
}
export {};