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

JavaScript library for mobile-friendly interactive maps

import { DivOverlay } from './DivOverlay.js';
import { Point } from '../geometry/Point.js';
import type { Defaults, DivOverlayEventMap, PointExpression, PopupDefaults, PopupOptions, ZoomAnimEvent } from '../types.js';
import type { LeafletMap } from '../map/Map.js';
/** @import {Defaults, DivOverlayEventMap, PointExpression, PopupDefaults, PopupOptions, ZoomAnimEvent} from '../types.js' */
/** @import {LatLng} from '../geo/LatLng.js' */
/** @import {LeafletMap} from '../map/Map.js' */
/** @import {Layer} from './Layer.js' */
declare const defaultOptions: {
    /** `Map pane` where the popup will be added. */
    pane: string;
    /**
     * The offset of the popup position.
     * @type {PointExpression}
     */
    offset: PointExpression;
    /** Max width of the popup, in pixels. */
    maxWidth: number;
    /** Min width of the popup, in pixels. */
    minWidth: number;
    /**
     * If set, creates a scrollable container of the given height inside a popup if its content exceeds it.
     * The scrollable container can be styled using the `leaflet-popup-scrolled` CSS class selector.
     * @type {number | null}
     */
    maxHeight: number | null;
    /** Set it to `false` if you don't want the map to do panning animation to fit the opened popup. */
    autoPan: boolean;
    /**
     * The margin between the popup and the top left corner of the map view after autopanning was performed.
     * @type {PointExpression | null}
     */
    autoPanPaddingTopLeft: PointExpression | null;
    /**
     * The margin between the popup and the bottom right corner of the map view after autopanning was performed.
     * @type {PointExpression | null}
     */
    autoPanPaddingBottomRight: PointExpression | null;
    /**
     * Equivalent of setting both top left and bottom right autopan padding to the same value.
     * @type {PointExpression}
     */
    autoPanPadding: PointExpression;
    /** Set it to `true` if you want to prevent users from panning the popup off of the screen while it is open. */
    keepInView: boolean;
    /** Controls the presence of a close button in the popup. */
    closeButton: boolean;
    /** Specifies the 'aria-label' attribute of the close button. */
    closeButtonLabel: string;
    /**
     * Set it to `false` if you want to override the default behavior
     * of the popup closing when another popup is opened.
     */
    autoClose: boolean;
    /** Set it to `false` if you want to override the default behavior of the ESC key for closing of the popup. */
    closeOnEscapeKey: boolean;
    /** A custom CSS class name to assign to the popup. */
    className: string;
    /**
     * Whether the popup shall react to changes in the size of its contents
     * (e.g. when an image inside the popup loads) and reposition itself.
     */
    trackResize: boolean;
};
export type PopupDefaultsValues = typeof defaultOptions;
export type PopupProps = {
    /**
     * Set it if you want to override the default behavior of the popup closing
     * when user clicks on the map. Defaults to the map's [`closePopupOnClick`](#map-closepopuponclick) option.
     */
    closeOnClick?: boolean;
};
export type PopupEventProps = {
    /**
     * The popup that was opened or closed.
     */
    popup: Popup;
};
/** @typedef {typeof defaultOptions} PopupDefaultsValues */
/**
 * @typedef {Object} PopupProps
 * @property {boolean} [closeOnClick] Set it if you want to override the default behavior of the popup closing
 *   when user clicks on the map. Defaults to the map's [`closePopupOnClick`](#map-closepopuponclick) option.
 */
/**
 * @typedef {Object} PopupEventProps
 * @property {Popup} popup The popup that was opened or closed.
 */
/**
 * Used to open popups in certain places of the map. Use [Map.openPopup](#map-openpopup)
 * to open popups while making sure that only one popup is open at one time (recommended
 * for usability), or use [Map.addLayer](#map-addlayer) to open as many as you want.
 * @example
 * If you want to just bind a popup to marker click and then open it, it's really easy:
 *
 * ```js
 * marker.bindPopup(popupContent).openPopup();
 * ```
 * Path overlays like polylines also have a `bindPopup` method.
 *
 * A popup can be also standalone:
 *
 * ```js
 * const popup = new Popup()
 * 	.setLatLng(latlng)
 * 	.setContent('<p>Hello world!<br />This is a nice popup.</p>')
 * 	.openOn(map);
 * ```
 * or
 * ```js
 * const popup = new Popup(latlng, {content: '<p>Hello world!<br />This is a nice popup.</p>'})
 * 	.openOn(map);
 * ```
 *
 * **Security note.** Popup string content is rendered as HTML. If your content
 * may include untrusted input (e.g. data from users or external APIs), sanitize
 * it with a library like [DOMPurify](https://github.com/cure53/DOMPurify), or
 * build a DOM element using `textContent` to render it as plain text:
 *
 * ```js
 * const el = document.createElement('div');
 * el.textContent = untrustedString;
 * marker.bindPopup(el);
 * ```
 *
 * @template {PopupOptions} [O=PopupOptions]
 * @template {DivOverlayEventMap} [E=DivOverlayEventMap]
 * @extends {DivOverlay<O & PopupDefaults, E>}
 */
export declare class Popup<O extends PopupOptions = PopupOptions, E extends DivOverlayEventMap = DivOverlayEventMap> extends DivOverlay<O & PopupDefaults, E> {
    _wrapper: HTMLDivElement | undefined;
    _tipContainer: HTMLDivElement | undefined;
    _tip: HTMLDivElement | undefined;
    _closeButton: HTMLAnchorElement | undefined;
    _resizeObserver: ResizeObserver | undefined;
    _autopanning: boolean | undefined;
    /** @type {Defaults<PopupOptions>} */
    static defaultOptions: Defaults<PopupOptions>;
    /**
     * Alternative to `map.openPopup(popup)`. Adds the popup to the map and closes the previous one.
     * @param {LeafletMap} map
     */
    openOn(map: LeafletMap): this;
    /** @param {LeafletMap} map */
    onAdd(map: LeafletMap): void;
    /** @param {LeafletMap} map */
    onRemove(map: LeafletMap): void;
    getEvents(): import("../types.js").MapListeners;
    _initLayout(): void;
    _updateLayout(): void;
    /** @param {ZoomAnimEvent} e */
    _animateZoom(e: ZoomAnimEvent): void;
    _adjustPan(): void;
    _getAnchor(): Point;
}
export {};