leaflet/dist/types/control/LayersControl.d.ts

JavaScript library for mobile-friendly interactive maps

import { Control } from './Control.js';
import type { Defaults, LayersControlDefaults, LayersControlOptions, LeafletEvent } from '../types.js';
import type { Layer } from '../layer/Layer.js';
import type { LeafletMap } from '../map/Map.js';
/** @import {ControlOptions, Defaults, LayersControlDefaults, LayersControlOptions, LeafletEvent} from '../types.js' */
/** @import {Layer} from '../layer/Layer.js' */
/** @import {LeafletMap} from '../map/Map.js' */
/** @satisfies {Defaults<ControlOptions>} */
declare const defaultOptions: {
    /**
     * If `true`, the control will be collapsed into an icon and expanded
     * on pointer hover, touch, or keyboard activation.
     */
    collapsed: boolean;
    /**
     * Collapse delay in milliseconds. If greater than 0, the control will remain
     * open longer, making it easier to scroll through long layer lists.
     */
    collapseDelay: number;
    position: "topright";
    /**
     * If `true`, the control will assign zIndexes in increasing order to all of
     * its layers so that the order is preserved when switching them on/off.
     */
    autoZIndex: boolean;
    /** If `true`, the base layers in the control will be hidden when there is only one. */
    hideSingleBase: boolean;
    /**
     * Whether to sort the layers. When `false`, layers will keep
     * the order in which they were added to the control.
     */
    sortLayers: boolean;
    /**
     * A [compare function](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/sort)
     * that will be used for sorting the layers, when `sortLayers` is `true`. The function receives
     * both the `Layer` instances and their names, as in `sortFunction(layerA, layerB, nameA, nameB)`.
     * By default, it sorts layers alphabetically by their name.
     * @param {Layer} layerA
     * @param {Layer} layerB
     * @param {string} nameA
     * @param {string} nameB
     * @returns {number}
     */
    sortFunction(layerA: Layer, layerB: Layer, nameA: string, nameB: string): number;
};
export type LayersControlDefaultsValues = typeof defaultOptions;
export type LayersControlEntry = {
    layer: Layer;
    name: string;
    overlay?: boolean;
};
export type LayersControlEventProps = {
    /**
     * The name of the layer that was added or removed.
     */
    name: string;
};
/** @typedef {typeof defaultOptions} LayersControlDefaultsValues */
/** @typedef {{layer: Layer, name: string, overlay?: boolean}} LayersControlEntry */
/**
 * @typedef {Object} LayersControlEventProps
 * @property {string} name The name of the layer that was added or removed.
 */
/**
 * The layers control gives users the ability to switch between different base layers and switch overlays on/off
 * (check out the [detailed example](https://leafletjs.com/examples/layers-control/)). Extends `Control`.
 * @example
 * ```js
 * const baseLayers = {
 * 	"Mapbox": mapbox,
 * 	"OpenStreetMap": osm
 * };
 *
 * const overlays = {
 * 	"Marker": marker,
 * 	"Roads": roadsLayer
 * };
 *
 * new LayersControl(baseLayers, overlays).addTo(map);
 * ```
 *
 * The `baseLayers` and `overlays` parameters are object literals with layer
 * names as keys and `Layer` objects as values:
 *
 * ```js
 * {
 *     "<someName1>": layer1,
 *     "<someName2>": layer2
 * }
 * ```
 *
 * The layer names can contain HTML, which allows you to add additional styling to the items:
 *
 * ```js
 * {"<img src='my-layer-icon' /> <span class='my-layer-item'>My Layer</span>": myLayer}
 * ```
 * @template {LayersControlOptions} [O=LayersControlOptions]
 * @extends {Control<O & LayersControlDefaults>}
 */
export declare class LayersControl<O extends LayersControlOptions = LayersControlOptions> extends Control<O & LayersControlDefaults> {
    /** @type {Map<HTMLInputElement, Layer>} */
    _layerControlInputs: Map<HTMLInputElement, Layer>;
    /** @type {LayersControlEntry[]} */
    _layers: LayersControlEntry[];
    _lastZIndex: number;
    _handlingClick: boolean;
    _preventClick: boolean;
    _collapseDelayTimeout: number | undefined;
    /** @type {HTMLFieldSetElement} */
    _section: HTMLFieldSetElement;
    _layersLink: HTMLAnchorElement | undefined;
    /** @type {HTMLDivElement} */
    _baseLayersList: HTMLDivElement;
    /** @type {HTMLDivElement} */
    _separator: HTMLDivElement;
    /** @type {HTMLDivElement} */
    _overlaysList: HTMLDivElement;
    static initHooks: boolean;
    /** @type {Defaults<LayersControlOptions>} */
    static defaultOptions: Defaults<LayersControlOptions>;
    /**
     * Creates a layers control with the given layers. Base layers will be switched with radio buttons,
     * while overlays will be switched with checkboxes. Note that all base layers should be passed in
     * the base layers object, but only one should be added to the map during map instantiation.
     * @param {{[name: string]: Layer}} [baseLayers]
     * @param {{[name: string]: Layer}} [overlays]
     * @param {NoInfer<Partial<O>>} [options]
     */
    constructor(baseLayers?: {
        [name: string]: Layer;
    }, overlays?: {
        [name: string]: Layer;
    }, options?: NoInfer<Partial<O>>);
    /** @param {LeafletMap} map */
    onAdd(map: LeafletMap): HTMLElement;
    /** @param {LeafletMap} map */
    addTo(map: LeafletMap): this;
    /** @param {LeafletMap} map */
    onRemove(map: LeafletMap): void;
    /**
     * Adds a base layer (radio button entry) with the given name to the control.
     * @param {Layer} layer
     * @param {string} name
     */
    addBaseLayer(layer: Layer, name: string): this;
    /**
     * Adds an overlay (checkbox entry) with the given name to the control.
     * @param {Layer} layer
     * @param {string} name
     */
    addOverlay(layer: Layer, name: string): this;
    /**
     * Remove the given layer from the control.
     * @param {Layer} layer
     */
    removeLayer(layer: Layer): this;
    /** Expand the control container if collapsed. */
    expand(): this;
    /** Collapse the control container if expanded. */
    collapse(): this;
    _initLayout(): void;
    /**
     * @param {Layer & {setZIndex?(zIndex: number): void}} layer
     * @param {string} name
     * @param {boolean} [overlay]
     */
    _addLayer(layer: Layer & {
        setZIndex?(zIndex: number): void;
    }, name: string, overlay?: boolean): void;
    _update(): this;
    /** @param {LeafletEvent} e */
    _onLayerChange(e: LeafletEvent): void;
    /** @param {LayersControlEntry} obj */
    _addItem(obj: LayersControlEntry): HTMLLabelElement;
    /** @param {MouseEvent} e */
    _onInputClick(e: MouseEvent): void;
    _checkDisabledLayers(): void;
    _expandIfNotCollapsed(): this;
    _expandSafely(): void;
}
export {};