import LngLat from '../geo/lng_lat';
import Point, { PointLike } from '../util/point';
import type { Anchor } from './anchor';
import { Evented } from '../util/evented';
import type Map from './map';
import Popup from './popup';
import type { LngLatLike } from '../geo/lng_lat';
import type { MapMouseEvent, MapTouchEvent } from './events';
declare type Options = {
    element?: HTMLElement;
    offset?: PointLike;
    anchor?: Anchor;
    color?: string;
    scale?: number;
    draggable?: boolean;
    clickTolerance?: number;
    rotation?: number;
    rotationAlignment?: string;
    pitchAlignment?: string;
};
/**
 * Creates a marker component
 * @param {Object} [options]
 * @param {HTMLElement} [options.element] DOM element to use as a marker. The default is a light blue, droplet-shaped SVG marker.
 * @param {string} [options.anchor='center'] A string indicating the part of the Marker that should be positioned closest to the coordinate set via {@link Marker#setLngLat}.
 *   Options are `'center'`, `'top'`, `'bottom'`, `'left'`, `'right'`, `'top-left'`, `'top-right'`, `'bottom-left'`, and `'bottom-right'`.
 * @param {PointLike} [options.offset] The offset in pixels as a {@link PointLike} object to apply relative to the element's center. Negatives indicate left and up.
 * @param {string} [options.color='#3FB1CE'] The color to use for the default marker if options.element is not provided. The default is light blue.
 * @param {number} [options.scale=1] The scale to use for the default marker if options.element is not provided. The default scale corresponds to a height of `41px` and a width of `27px`.
 * @param {boolean} [options.draggable=false] A boolean indicating whether or not a marker is able to be dragged to a new position on the map.
 * @param {number} [options.clickTolerance=0] The max number of pixels a user can shift the mouse pointer during a click on the marker for it to be considered a valid click (as opposed to a marker drag). The default is to inherit map's clickTolerance.
 * @param {number} [options.rotation=0] The rotation angle of the marker in degrees, relative to its respective `rotationAlignment` setting. A positive value will rotate the marker clockwise.
 * @param {string} [options.pitchAlignment='auto'] `map` aligns the `Marker` to the plane of the map. `viewport` aligns the `Marker` to the plane of the viewport. `auto` automatically matches the value of `rotationAlignment`.
 * @param {string} [options.rotationAlignment='auto'] `map` aligns the `Marker`'s rotation relative to the map, maintaining a bearing as the map rotates. `viewport` aligns the `Marker`'s rotation relative to the viewport, agnostic to map rotations. `auto` is equivalent to `viewport`.
 * @example
 * var marker = new maplibregl.Marker()
 *   .setLngLat([30.5, 50.5])
 *   .addTo(map);
 * @example
 * // Set options
 * var marker = new maplibregl.Marker({
 *     color: "#FFFFFF",
 *     draggable: true
 *   }).setLngLat([30.5, 50.5])
 *   .addTo(map);
 * @see [Add custom icons with Markers](https://maplibre.org/maplibre-gl-js-docs/example/custom-marker-icons/)
 * @see [Create a draggable Marker](https://maplibre.org/maplibre-gl-js-docs/example/drag-a-marker/)
 */
export default class Marker extends Evented {
    _map: Map;
    _anchor: Anchor;
    _offset: Point;
    _element: HTMLElement;
    _popup: Popup | undefined | null;
    _lngLat: LngLat;
    _pos: Point | undefined | null;
    _color: string | undefined | null;
    _scale: number;
    _defaultMarker: boolean;
    _draggable: boolean;
    _clickTolerance: number;
    _isDragging: boolean;
    _state: 'inactive' | 'pending' | 'active';
    _positionDelta: Point | undefined | null;
    _pointerdownPos: Point | undefined | null;
    _rotation: number;
    _pitchAlignment: string;
    _rotationAlignment: string;
    _originalTabIndex: string | undefined | null;
    constructor(options?: Options, legacyOptions?: Options);
    /**
     * Attaches the `Marker` to a `Map` object.
     * @param {Map} map The Mapbox GL JS map to add the marker to.
     * @returns {Marker} `this`
     * @example
     * var marker = new maplibregl.Marker()
     *   .setLngLat([30.5, 50.5])
     *   .addTo(map); // add the marker to the map
     */
    addTo(map: Map): this;
    /**
     * Removes the marker from a map
     * @example
     * var marker = new maplibregl.Marker().addTo(map);
     * marker.remove();
     * @returns {Marker} `this`
     */
    remove(): this;
    /**
     * Get the marker's geographical location.
     *
     * The longitude of the result may differ by a multiple of 360 degrees from the longitude previously
     * set by `setLngLat` because `Marker` wraps the anchor longitude across copies of the world to keep
     * the marker on screen.
     *
     * @returns {LngLat} A {@link LngLat} describing the marker's location.
    * @example
    * // Store the marker's longitude and latitude coordinates in a variable
    * var lngLat = marker.getLngLat();
    * // Print the marker's longitude and latitude values in the console
    * console.log('Longitude: ' + lngLat.lng + ', Latitude: ' + lngLat.lat )
    * @see [Create a draggable Marker](https://maplibre.org/maplibre-gl-js-docs/example/drag-a-marker/)
    */
    getLngLat(): LngLat;
    /**
    * Set the marker's geographical position and move it.
    * @param {LngLat} lnglat A {@link LngLat} describing where the marker should be located.
    * @returns {Marker} `this`
    * @example
    * // Create a new marker, set the longitude and latitude, and add it to the map
    * new maplibregl.Marker()
    *   .setLngLat([-65.017, -16.457])
    *   .addTo(map);
    * @see [Add custom icons with Markers](https://maplibre.org/maplibre-gl-js-docs/example/custom-marker-icons/)
    * @see [Create a draggable Marker](https://maplibre.org/maplibre-gl-js-docs/example/drag-a-marker/)
    */
    setLngLat(lnglat: LngLatLike): this;
    /**
     * Returns the `Marker`'s HTML element.
     * @returns {HTMLElement} element
     */
    getElement(): HTMLElement;
    /**
     * Binds a {@link Popup} to the {@link Marker}.
     * @param popup An instance of the {@link Popup} class. If undefined or null, any popup
     * set on this {@link Marker} instance is unset.
     * @returns {Marker} `this`
     * @example
     * var marker = new maplibregl.Marker()
     *  .setLngLat([0, 0])
     *  .setPopup(new maplibregl.Popup().setHTML("<h1>Hello World!</h1>")) // add popup
     *  .addTo(map);
     * @see [Attach a popup to a marker instance](https://maplibre.org/maplibre-gl-js-docs/example/set-popup/)
     */
    setPopup(popup?: Popup | null): this;
    _onKeyPress(e: KeyboardEvent): void;
    _onMapClick(e: MapMouseEvent): void;
    /**
     * Returns the {@link Popup} instance that is bound to the {@link Marker}.
     * @returns {Popup} popup
     * @example
     * var marker = new maplibregl.Marker()
     *  .setLngLat([0, 0])
     *  .setPopup(new maplibregl.Popup().setHTML("<h1>Hello World!</h1>"))
     *  .addTo(map);
     *
     * console.log(marker.getPopup()); // return the popup instance
     */
    getPopup(): Popup;
    /**
     * Opens or closes the {@link Popup} instance that is bound to the {@link Marker}, depending on the current state of the {@link Popup}.
     * @returns {Marker} `this`
     * @example
     * var marker = new maplibregl.Marker()
     *  .setLngLat([0, 0])
     *  .setPopup(new maplibregl.Popup().setHTML("<h1>Hello World!</h1>"))
     *  .addTo(map);
     *
     * marker.togglePopup(); // toggle popup open or closed
     */
    togglePopup(): this;
    _update(e?: {
        type: 'move' | 'moveend';
    }): void;
    /**
     * Get the marker's offset.
     * @returns {Point} The marker's screen coordinates in pixels.
     */
    getOffset(): Point;
    /**
     * Sets the offset of the marker
     * @param {PointLike} offset The offset in pixels as a {@link PointLike} object to apply relative to the element's center. Negatives indicate left and up.
     * @returns {Marker} `this`
     */
    setOffset(offset: PointLike): this;
    _onMove(e: MapMouseEvent | MapTouchEvent): void;
    _onUp(): void;
    _addDragHandler(e: MapMouseEvent | MapTouchEvent): void;
    /**
     * Sets the `draggable` property and functionality of the marker
     * @param {boolean} [shouldBeDraggable=false] Turns drag functionality on/off
     * @returns {Marker} `this`
     */
    setDraggable(shouldBeDraggable: boolean): this;
    /**
     * Returns true if the marker can be dragged
     * @returns {boolean} True if the marker is draggable.
     */
    isDraggable(): boolean;
    /**
     * Sets the `rotation` property of the marker.
     * @param {number} [rotation=0] The rotation angle of the marker (clockwise, in degrees), relative to its respective {@link Marker#setRotationAlignment} setting.
     * @returns {Marker} `this`
     */
    setRotation(rotation: number): this;
    /**
     * Returns the current rotation angle of the marker (in degrees).
     * @returns {number} The current rotation angle of the marker.
     */
    getRotation(): number;
    /**
     * Sets the `rotationAlignment` property of the marker.
     * @param {string} [alignment='auto'] Sets the `rotationAlignment` property of the marker.
     * @returns {Marker} `this`
     */
    setRotationAlignment(alignment: string): this;
    /**
     * Returns the current `rotationAlignment` property of the marker.
     * @returns {string} The current rotational alignment of the marker.
     */
    getRotationAlignment(): string;
    /**
     * Sets the `pitchAlignment` property of the marker.
     * @param {string} [alignment] Sets the `pitchAlignment` property of the marker. If alignment is 'auto', it will automatically match `rotationAlignment`.
     * @returns {Marker} `this`
     */
    setPitchAlignment(alignment: string): this;
    /**
     * Returns the current `pitchAlignment` property of the marker.
     * @returns {string} The current pitch alignment of the marker in degrees.
     */
    getPitchAlignment(): string;
}
export {};
//# sourceMappingURL=marker.d.ts.map