@maplibre/ngx-maplibre-gl/lib/marker/marker.component.d.ts

A Angular binding of maplibre-gl

import { ElementRef, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
import type { LngLatLike, Marker } from 'maplibre-gl';
import * as i0 from "@angular/core";
/**
 * `mgl-marker` - a marker component
 * @see [Marker](https://maplibre.org/maplibre-gl-js/docs/API/classes/Marker/)
 *
 * @category Components
 *
 * @example
 * ```html
 * ...
 * <mgl-map ...>
 *   <mgl-marker [lngLat]="[-66.324462890625, -16.024695711685304]">
 *     <div (click)="alert('Foo')" class="marker">Hello</div>
 *   </mgl-marker>
 * </mgl-map>
 * ```
 *
 * Note: Only use this if you **really** need to use HTML/Angular component to render your symbol. These markers are slow compared to a `Layer` of symbol because they're not rendered using WebGL.
 */
export declare class MarkerComponent implements OnChanges, OnInit, OnDestroy {
    /** Init injection */
    private readonly mapService;
    private readonly destroyRef;
    /** Init inputs */
    readonly offset: import("@angular/core").InputSignal<import("maplibre-gl").PointLike | undefined>;
    readonly anchor: import("@angular/core").InputSignal<import("maplibre-gl").PositionAnchor | undefined>;
    readonly clickTolerance: import("@angular/core").InputSignal<number | undefined>;
    readonly color: import("@angular/core").InputSignal<string | undefined>;
    readonly scale: import("@angular/core").InputSignal<number | undefined>;
    readonly opacity: import("@angular/core").InputSignal<string | undefined>;
    readonly opacityWhenCovered: import("@angular/core").InputSignal<string | undefined>;
    readonly subpixelPositioning: import("@angular/core").InputSignal<boolean | undefined>;
    /** Dynamic input */
    readonly feature: import("@angular/core").InputSignal<import("geojson").Feature<import("geojson").Point, import("geojson").GeoJsonProperties> | undefined>;
    readonly lngLat: import("@angular/core").InputSignal<LngLatLike | undefined>;
    readonly draggable: import("@angular/core").InputSignal<boolean | undefined>;
    readonly popupShown: import("@angular/core").InputSignal<boolean | undefined>;
    readonly className: import("@angular/core").InputSignal<string | undefined>;
    readonly pitchAlignment: import("@angular/core").InputSignal<import("maplibre-gl").Alignment | undefined>;
    readonly rotationAlignment: import("@angular/core").InputSignal<import("maplibre-gl").Alignment | undefined>;
    readonly rotation: import("@angular/core").InputSignal<number | undefined>;
    readonly markerDragStart: import("@angular/core").OutputEmitterRef<Marker>;
    readonly markerDragEnd: import("@angular/core").OutputEmitterRef<Marker>;
    readonly markerDrag: import("@angular/core").OutputEmitterRef<Marker>;
    readonly content: import("@angular/core").Signal<ElementRef<HTMLDivElement>>;
    readonly markerInstance: import("@angular/core").WritableSignal<Marker | null>;
    constructor();
    ngOnDestroy(): void;
    ngOnInit(): void;
    ngOnChanges(changes: SimpleChanges): void;
    removeMarker(): void;
    togglePopup(): void;
    static ɵfac: i0.ɵɵFactoryDeclaration<MarkerComponent, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<MarkerComponent, "mgl-marker", never, { "offset": { "alias": "offset"; "required": false; "isSignal": true; }; "anchor": { "alias": "anchor"; "required": false; "isSignal": true; }; "clickTolerance": { "alias": "clickTolerance"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "scale": { "alias": "scale"; "required": false; "isSignal": true; }; "opacity": { "alias": "opacity"; "required": false; "isSignal": true; }; "opacityWhenCovered": { "alias": "opacityWhenCovered"; "required": false; "isSignal": true; }; "subpixelPositioning": { "alias": "subpixelPositioning"; "required": false; "isSignal": true; }; "feature": { "alias": "feature"; "required": false; "isSignal": true; }; "lngLat": { "alias": "lngLat"; "required": false; "isSignal": true; }; "draggable": { "alias": "draggable"; "required": false; "isSignal": true; }; "popupShown": { "alias": "popupShown"; "required": false; "isSignal": true; }; "className": { "alias": "className"; "required": false; "isSignal": true; }; "pitchAlignment": { "alias": "pitchAlignment"; "required": false; "isSignal": true; }; "rotationAlignment": { "alias": "rotationAlignment"; "required": false; "isSignal": true; }; "rotation": { "alias": "rotation"; "required": false; "isSignal": true; }; }, { "markerDragStart": "markerDragStart"; "markerDragEnd": "markerDragEnd"; "markerDrag": "markerDrag"; }, never, ["*"], true, never>;
}