@maplibre/ngx-maplibre-gl

import { ElementRef, OnChanges, OnDestroy, SimpleChanges } from '@angular/core'; import type { AnimationOptions, LngLatBoundsLike, Map, MapLibreEvent, MapLibreZoomEvent, MapContextEvent, MapDataEvent, MapMouseEvent, MapTouchEvent, MapWheelEvent, PointLike, TerrainSpecification, ProjectionSpecification } from 'maplibre-gl'; import { type MovingOptions } from './map.service'; import type { MapEvent, EventData } from './map.types'; import * as i0 from "@angular/core"; /** * `mgl-map` - The main map component * @see [Map](https://maplibre.org/maplibre-gl-js/docs/API/classes/Map/) * * @category Map Component * * @example * ```typescript * ... * @Component({ * template: ` * <mgl-map * [style]="'https://demotiles.maplibre.org/style.json'" * [zoom]="[9]" * [center]="[-74.50, 40]" * (mapLoad)="map = $event" * ></mgl-map> * `, * ... * }) * export class DisplayMapComponent { * map: Map; // MapLibre GL Map object (MapLibre is ran outside angular zone, keep that in mind when binding events from this object) * ... * } * ``` */ export declare class MapComponent implements OnChanges, OnDestroy, MapEvent { private readonly mapService; private readonly elementRef; /** Init input */ readonly collectResourceTiming: import("@angular/core").InputSignal<boolean | undefined>; /** Init input */ readonly crossSourceCollisions: import("@angular/core").InputSignal<boolean | undefined>; /** Init input */ readonly customMapboxApiUrl: import("@angular/core").InputSignal<string | undefined>; /** Init input */ readonly fadeDuration: import("@angular/core").InputSignal<number | undefined>; /** Init input */ readonly hash: import("@angular/core").InputSignal<string | boolean | undefined>; /** Init input */ readonly refreshExpiredTiles: import("@angular/core").InputSignal<boolean | undefined>; /** Init input */ readonly canvasContextAttributes: import("@angular/core").InputSignal<import("maplibre-gl").WebGLContextAttributesWithType | undefined>; /** Init input */ readonly bearingSnap: import("@angular/core").InputSignal<number | undefined>; /** Init input */ readonly interactive: import("@angular/core").InputSignal<boolean | undefined>; /** Init input */ readonly pitchWithRotate: import("@angular/core").InputSignal<boolean | undefined>; /** Init input */ readonly clickTolerance: import("@angular/core").InputSignal<number | undefined>; /** Init input */ readonly attributionControl: import("@angular/core").InputSignal<false | import("maplibre-gl").AttributionControlOptions | undefined>; /** Init input */ readonly logoPosition: import("@angular/core").InputSignal<import("maplibre-gl").ControlPosition | undefined>; /** Init input */ readonly maxTileCacheSize: import("@angular/core").InputSignal<number | null | undefined>; /** Init input */ readonly localIdeographFontFamily: import("@angular/core").InputSignal<string | false | undefined>; /** Init input */ readonly trackResize: import("@angular/core").InputSignal<boolean | undefined>; /** Init input */ readonly transformRequest: import("@angular/core").InputSignal<import("maplibre-gl").RequestTransformFunction | null | undefined>; /** Init input */ readonly bounds: import("@angular/core").InputSignal<LngLatBoundsLike | undefined>; /** Init input */ readonly locale: import("@angular/core").InputSignal<any>; /** Init input */ readonly cooperativeGestures: import("@angular/core").InputSignal<boolean | undefined>; /** Init input */ readonly cancelPendingTileRequestsWhileZooming: import("@angular/core").InputSignal<boolean | undefined>; /** Init input */ readonly centerClampedToGround: import("@angular/core").InputSignal<boolean | undefined>; /** Init input */ readonly maplibreLogo: import("@angular/core").InputSignal<boolean | undefined>; /** Init input */ readonly maxCanvasSize: import("@angular/core").InputSignal<[number, number] | undefined>; /** Init input */ readonly maxTileCacheZoomLevels: import("@angular/core").InputSignal<number | undefined>; /** Init input */ readonly pixelRatio: import("@angular/core").InputSignal<number | undefined>; /** Init input */ readonly rollEnabled: import("@angular/core").InputSignal<boolean | undefined>; /** Init input */ readonly transformCameraUpdate: import("@angular/core").InputSignal<import("maplibre-gl").CameraUpdateTransformFunction | null | undefined>; /** Init input */ readonly validateStyle: import("@angular/core").InputSignal<boolean | undefined>; /** Dynamic input */ readonly minZoom: import("@angular/core").InputSignal<number | null | undefined>; /** Dynamic input */ readonly maxZoom: import("@angular/core").InputSignal<number | null | undefined>; /** Dynamic input */ readonly minPitch: import("@angular/core").InputSignal<number | null | undefined>; /** Dynamic input */ readonly maxPitch: import("@angular/core").InputSignal<number | null | undefined>; /** Dynamic input */ readonly scrollZoom: import("@angular/core").InputSignal<boolean | import("maplibre-gl").AroundCenterOptions | undefined>; /** Dynamic input */ readonly dragRotate: import("@angular/core").InputSignal<boolean | undefined>; /** Dynamic input */ readonly touchPitch: import("@angular/core").InputSignal<boolean | import("maplibre-gl").AroundCenterOptions | undefined>; /** Dynamic input */ readonly touchZoomRotate: import("@angular/core").InputSignal<boolean | import("maplibre-gl").AroundCenterOptions | undefined>; /** Dynamic input */ readonly doubleClickZoom: import("@angular/core").InputSignal<boolean | undefined>; /** Dynamic input */ readonly keyboard: import("@angular/core").InputSignal<boolean | undefined>; /** Dynamic input */ readonly dragPan: import("@angular/core").InputSignal<boolean | import("maplibre-gl").DragPanOptions | undefined>; /** Dynamic input */ readonly boxZoom: import("@angular/core").InputSignal<boolean | undefined>; /** Dynamic input */ readonly style: import("@angular/core").InputSignal<string | import("maplibre-gl").StyleSpecification | undefined>; /** Dynamic input */ readonly center: import("@angular/core").InputSignal<import("maplibre-gl").LngLatLike | undefined>; /** Dynamic input */ readonly maxBounds: import("@angular/core").InputSignal<LngLatBoundsLike | undefined>; /** Dynamic input */ readonly zoom: import("@angular/core").InputSignal<[number] | undefined>; /** Dynamic input */ readonly bearing: import("@angular/core").InputSignal<[number] | undefined>; /** Dynamic input */ readonly pitch: import("@angular/core").InputSignal<[number] | undefined>; /** Dynamic input */ readonly roll: import("@angular/core").InputSignal<number | undefined>; /** Dynamic input */ readonly fitBoundsOptions: import("@angular/core").InputSignal<import("maplibre-gl").FitBoundsOptions | undefined>; /** Dynamic input */ readonly renderWorldCopies: import("@angular/core").InputSignal<boolean | undefined>; /** Dynamic input */ readonly elevation: import("@angular/core").InputSignal<number | undefined>; /** Dynamic input that is not part of the `MapOptions` object */ readonly terrain: import("@angular/core").InputSignal<TerrainSpecification | undefined>; /** Dynamic input that is not part of the `MapOptions` object */ readonly projection: import("@angular/core").InputSignal<ProjectionSpecification | undefined>; /** Added by ngx-mapbox-gl */ readonly movingMethod: import("@angular/core").InputSignal<"jumpTo" | "easeTo" | "flyTo">; readonly movingOptions: import("@angular/core").InputSignal<MovingOptions | undefined>; readonly fitBounds: import("@angular/core").InputSignal<LngLatBoundsLike | undefined>; readonly fitScreenCoordinates: import("@angular/core").InputSignal<[PointLike, PointLike] | undefined>; readonly centerWithPanTo: import("@angular/core").InputSignal<boolean | undefined>; readonly panToOptions: import("@angular/core").InputSignal<AnimationOptions | undefined>; readonly cursorStyle: import("@angular/core").InputSignal<string | undefined>; readonly mapResize: import("@angular/core").OutputEmitterRef<MapLibreEvent & EventData>; readonly mapRemove: import("@angular/core").OutputEmitterRef<MapLibreEvent & EventData>; readonly mapMouseDown: import("@angular/core").OutputEmitterRef<MapMouseEvent & EventData>; readonly mapMouseUp: import("@angular/core").OutputEmitterRef<MapMouseEvent & EventData>; readonly mapMouseMove: import("@angular/core").OutputEmitterRef<MapMouseEvent & EventData>; readonly mapClick: import("@angular/core").OutputEmitterRef<MapMouseEvent & EventData>; readonly mapDblClick: import("@angular/core").OutputEmitterRef<MapMouseEvent & EventData>; readonly mapMouseOver: import("@angular/core").OutputEmitterRef<MapMouseEvent & EventData>; readonly mapMouseOut: import("@angular/core").OutputEmitterRef<MapMouseEvent & EventData>; readonly mapContextMenu: import("@angular/core").OutputEmitterRef<MapMouseEvent & EventData>; readonly mapTouchStart: import("@angular/core").OutputEmitterRef<MapTouchEvent & EventData>; readonly mapTouchEnd: import("@angular/core").OutputEmitterRef<MapTouchEvent & EventData>; readonly mapTouchMove: import("@angular/core").OutputEmitterRef<MapTouchEvent & EventData>; readonly mapTouchCancel: import("@angular/core").OutputEmitterRef<MapTouchEvent & EventData>; readonly mapWheel: import("@angular/core").OutputEmitterRef<MapWheelEvent & EventData>; readonly moveStart: import("@angular/core").OutputEmitterRef<MapLibreEvent<MouseEvent | TouchEvent | WheelEvent | undefined> & EventData>; readonly move: import("@angular/core").OutputEmitterRef<MapLibreEvent<MouseEvent | TouchEvent | WheelEvent | undefined> & EventData>; readonly moveEnd: import("@angular/core").OutputEmitterRef<MapLibreEvent<MouseEvent | TouchEvent | WheelEvent | undefined> & EventData>; readonly mapDragStart: import("@angular/core").OutputEmitterRef<MapLibreEvent<MouseEvent | TouchEvent | undefined> & EventData>; readonly mapDrag: import("@angular/core").OutputEmitterRef<MapLibreEvent<MouseEvent | TouchEvent | undefined> & EventData>; readonly mapDragEnd: import("@angular/core").OutputEmitterRef<MapLibreEvent<MouseEvent | TouchEvent | undefined> & EventData>; readonly zoomStart: import("@angular/core").OutputEmitterRef<MapLibreEvent<MouseEvent | TouchEvent | WheelEvent | undefined> & EventData>; readonly zoomEvt: import("@angular/core").OutputEmitterRef<MapLibreEvent<MouseEvent | TouchEvent | WheelEvent | undefined> & EventData>; readonly zoomEnd: import("@angular/core").OutputEmitterRef<MapLibreEvent<MouseEvent | TouchEvent | WheelEvent | undefined> & EventData>; readonly rotateStart: import("@angular/core").OutputEmitterRef<MapLibreEvent<MouseEvent | TouchEvent | undefined> & EventData>; readonly rotate: import("@angular/core").OutputEmitterRef<MapLibreEvent<MouseEvent | TouchEvent | undefined> & EventData>; readonly rotateEnd: import("@angular/core").OutputEmitterRef<MapLibreEvent<MouseEvent | TouchEvent | undefined> & EventData>; readonly pitchStart: import("@angular/core").OutputEmitterRef<MapLibreEvent<MouseEvent | TouchEvent | undefined> & EventData>; readonly pitchEvt: import("@angular/core").OutputEmitterRef<MapLibreEvent<MouseEvent | TouchEvent | undefined> & EventData>; readonly pitchEnd: import("@angular/core").OutputEmitterRef<MapLibreEvent<MouseEvent | TouchEvent | undefined> & EventData>; readonly boxZoomStart: import("@angular/core").OutputEmitterRef<MapLibreZoomEvent & EventData>; readonly boxZoomEnd: import("@angular/core").OutputEmitterRef<MapLibreZoomEvent & EventData>; readonly boxZoomCancel: import("@angular/core").OutputEmitterRef<MapLibreZoomEvent & EventData>; readonly webGlContextLost: import("@angular/core").OutputEmitterRef<MapContextEvent & EventData>; readonly webGlContextRestored: import("@angular/core").OutputEmitterRef<MapContextEvent & EventData>; readonly mapLoad: import("@angular/core").OutputEmitterRef<Map>; readonly idle: import("@angular/core").OutputEmitterRef<MapLibreEvent & EventData>; readonly render: import("@angular/core").OutputEmitterRef<MapLibreEvent & EventData>; readonly mapError: import("@angular/core").OutputEmitterRef<ErrorEvent & EventData>; readonly data: import("@angular/core").OutputEmitterRef<MapDataEvent & EventData>; readonly styleData: import("@angular/core").OutputEmitterRef<MapLibreEvent<unknown> & { dataType: "style"; } & EventData>; readonly sourceData: import("@angular/core").OutputEmitterRef<MapLibreEvent<unknown> & { dataType: "source"; isSourceLoaded: boolean; source: import("maplibre-gl").SourceSpecification; sourceId: string; sourceDataType: import("maplibre-gl").MapSourceDataType; sourceDataChanged?: boolean; tile: any; } & EventData>; readonly dataLoading: import("@angular/core").OutputEmitterRef<MapDataEvent & EventData>; readonly styleDataLoading: import("@angular/core").OutputEmitterRef<MapLibreEvent<unknown> & { dataType: "style"; } & EventData>; readonly sourceDataLoading: import("@angular/core").OutputEmitterRef<MapLibreEvent<unknown> & { dataType: "source"; isSourceLoaded: boolean; source: import("maplibre-gl").SourceSpecification; sourceId: string; sourceDataType: import("maplibre-gl").MapSourceDataType; sourceDataChanged?: boolean; tile: any; } & EventData>; readonly styleImageMissing: import("@angular/core").OutputEmitterRef<{ id: string; } & EventData>; get mapInstance(): Map; readonly mapContainer: import("@angular/core").Signal<ElementRef<HTMLDivElement>>; constructor(); ngOnDestroy(): void; ngOnChanges(changes: SimpleChanges): Promise<void>; static ɵfac: i0.ɵɵFactoryDeclaration<MapComponent, never>; static ɵcmp: i0.ɵɵComponentDeclaration<MapComponent, "mgl-map", never, { "collectResourceTiming": { "alias": "collectResourceTiming"; "required": false; "isSignal": true; }; "crossSourceCollisions": { "alias": "crossSourceCollisions"; "required": false; "isSignal": true; }; "customMapboxApiUrl": { "alias": "customMapboxApiUrl"; "required": false; "isSignal": true; }; "fadeDuration": { "alias": "fadeDuration"; "required": false; "isSignal": true; }; "hash": { "alias": "hash"; "required": false; "isSignal": true; }; "refreshExpiredTiles": { "alias": "refreshExpiredTiles"; "required": false; "isSignal": true; }; "canvasContextAttributes": { "alias": "canvasContextAttributes"; "required": false; "isSignal": true; }; "bearingSnap": { "alias": "bearingSnap"; "required": false; "isSignal": true; }; "interactive": { "alias": "interactive"; "required": false; "isSignal": true; }; "pitchWithRotate": { "alias": "pitchWithRotate"; "required": false; "isSignal": true; }; "clickTolerance": { "alias": "clickTolerance"; "required": false; "isSignal": true; }; "attributionControl": { "alias": "attributionControl"; "required": false; "isSignal": true; }; "logoPosition": { "alias": "logoPosition"; "required": false; "isSignal": true; }; "maxTileCacheSize": { "alias": "maxTileCacheSize"; "required": false; "isSignal": true; }; "localIdeographFontFamily": { "alias": "localIdeographFontFamily"; "required": false; "isSignal": true; }; "trackResize": { "alias": "trackResize"; "required": false; "isSignal": true; }; "transformRequest": { "alias": "transformRequest"; "required": false; "isSignal": true; }; "bounds": { "alias": "bounds"; "required": false; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; "cooperativeGestures": { "alias": "cooperativeGestures"; "required": false; "isSignal": true; }; "cancelPendingTileRequestsWhileZooming": { "alias": "cancelPendingTileRequestsWhileZooming"; "required": false; "isSignal": true; }; "centerClampedToGround": { "alias": "centerClampedToGround"; "required": false; "isSignal": true; }; "maplibreLogo": { "alias": "maplibreLogo"; "required": false; "isSignal": true; }; "maxCanvasSize": { "alias": "maxCanvasSize"; "required": false; "isSignal": true; }; "maxTileCacheZoomLevels": { "alias": "maxTileCacheZoomLevels"; "required": false; "isSignal": true; }; "pixelRatio": { "alias": "pixelRatio"; "required": false; "isSignal": true; }; "rollEnabled": { "alias": "rollEnabled"; "required": false; "isSignal": true; }; "transformCameraUpdate": { "alias": "transformCameraUpdate"; "required": false; "isSignal": true; }; "validateStyle": { "alias": "validateStyle"; "required": false; "isSignal": true; }; "minZoom": { "alias": "minZoom"; "required": false; "isSignal": true; }; "maxZoom": { "alias": "maxZoom"; "required": false; "isSignal": true; }; "minPitch": { "alias": "minPitch"; "required": false; "isSignal": true; }; "maxPitch": { "alias": "maxPitch"; "required": false; "isSignal": true; }; "scrollZoom": { "alias": "scrollZoom"; "required": false; "isSignal": true; }; "dragRotate": { "alias": "dragRotate"; "required": false; "isSignal": true; }; "touchPitch": { "alias": "touchPitch"; "required": false; "isSignal": true; }; "touchZoomRotate": { "alias": "touchZoomRotate"; "required": false; "isSignal": true; }; "doubleClickZoom": { "alias": "doubleClickZoom"; "required": false; "isSignal": true; }; "keyboard": { "alias": "keyboard"; "required": false; "isSignal": true; }; "dragPan": { "alias": "dragPan"; "required": false; "isSignal": true; }; "boxZoom": { "alias": "boxZoom"; "required": false; "isSignal": true; }; "style": { "alias": "style"; "required": true; "isSignal": true; }; "center": { "alias": "center"; "required": false; "isSignal": true; }; "maxBounds": { "alias": "maxBounds"; "required": false; "isSignal": true; }; "zoom": { "alias": "zoom"; "required": false; "isSignal": true; }; "bearing": { "alias": "bearing"; "required": false; "isSignal": true; }; "pitch": { "alias": "pitch"; "required": false; "isSignal": true; }; "roll": { "alias": "roll"; "required": false; "isSignal": true; }; "fitBoundsOptions": { "alias": "fitBoundsOptions"; "required": false; "isSignal": true; }; "renderWorldCopies": { "alias": "renderWorldCopies"; "required": false; "isSignal": true; }; "elevation": { "alias": "elevation"; "required": false; "isSignal": true; }; "terrain": { "alias": "terrain"; "required": false; "isSignal": true; }; "projection": { "alias": "projection"; "required": false; "isSignal": true; }; "movingMethod": { "alias": "movingMethod"; "required": false; "isSignal": true; }; "movingOptions": { "alias": "movingOptions"; "required": false; "isSignal": true; }; "fitBounds": { "alias": "fitBounds"; "required": false; "isSignal": true; }; "fitScreenCoordinates": { "alias": "fitScreenCoordinates"; "required": false; "isSignal": true; }; "centerWithPanTo": { "alias": "centerWithPanTo"; "required": false; "isSignal": true; }; "panToOptions": { "alias": "panToOptions"; "required": false; "isSignal": true; }; "cursorStyle": { "alias": "cursorStyle"; "required": false; "isSignal": true; }; }, { "mapResize": "mapResize"; "mapRemove": "mapRemove"; "mapMouseDown": "mapMouseDown"; "mapMouseUp": "mapMouseUp"; "mapMouseMove": "mapMouseMove"; "mapClick": "mapClick"; "mapDblClick": "mapDblClick"; "mapMouseOver": "mapMouseOver"; "mapMouseOut": "mapMouseOut"; "mapContextMenu": "mapContextMenu"; "mapTouchStart": "mapTouchStart"; "mapTouchEnd": "mapTouchEnd"; "mapTouchMove": "mapTouchMove"; "mapTouchCancel": "mapTouchCancel"; "mapWheel": "mapWheel"; "moveStart": "moveStart"; "move": "move"; "moveEnd": "moveEnd"; "mapDragStart": "mapDragStart"; "mapDrag": "mapDrag"; "mapDragEnd": "mapDragEnd"; "zoomStart": "zoomStart"; "zoomEvt": "zoomEvt"; "zoomEnd": "zoomEnd"; "rotateStart": "rotateStart"; "rotate": "rotate"; "rotateEnd": "rotateEnd"; "pitchStart": "pitchStart"; "pitchEvt": "pitchEvt"; "pitchEnd": "pitchEnd"; "boxZoomStart": "boxZoomStart"; "boxZoomEnd": "boxZoomEnd"; "boxZoomCancel": "boxZoomCancel"; "webGlContextLost": "webGlContextLost"; "webGlContextRestored": "webGlContextRestored"; "mapLoad": "mapLoad"; "idle": "idle"; "render": "render"; "mapError": "mapError"; "data": "data"; "styleData": "styleData"; "sourceData": "sourceData"; "dataLoading": "dataLoading"; "styleDataLoading": "styleDataLoading"; "sourceDataLoading": "sourceDataLoading"; "styleImageMissing": "styleImageMissing"; }, never, never, true, never>; }