UNPKG

@maplibre/ngx-maplibre-gl

Version:
712 lines (707 loc) 90.8 kB
import * as _angular_core from '@angular/core'; import { OutputEmitterRef, OnChanges, OnDestroy, ElementRef, SimpleChanges, OnInit, TemplateRef } from '@angular/core'; import * as maplibre_gl from 'maplibre-gl'; import { MapLibreEvent, MapMouseEvent, MapTouchEvent, MapWheelEvent, MapLibreZoomEvent, MapContextEvent, Map, MapDataEvent, MapStyleDataEvent, MapSourceDataEvent, MapLayerMouseEvent, MapLayerTouchEvent, GeolocateControl, FlyToOptions, AnimationOptions, CameraOptions, MapOptions, TerrainSpecification, ProjectionSpecification, LayerSpecification, PopupOptions, MarkerOptions, LngLatLike, Marker, StyleSpecification, LngLatBoundsLike, PointLike, QueryRenderedFeaturesOptions, Popup, IControl, ControlPosition, SourceSpecification, Source, BackgroundLayerSpecification, FillLayerSpecification, FillExtrusionLayerSpecification, LineLayerSpecification, SymbolLayerSpecification, RasterLayerSpecification, CircleLayerSpecification, FilterSpecification, FitBoundsOptions, VectorSourceSpecification, RasterDEMSourceSpecification, RasterSourceSpecification, ImageSourceSpecification, CanvasSourceSpecification, Offset, Unit, MapGeoJSONFeature } from 'maplibre-gl'; import * as rxjs from 'rxjs'; import * as geojson from 'geojson'; interface EventData { [key: string]: any; } interface MapEvent { mapResize: OutputEmitterRef<MapLibreEvent & EventData>; mapRemove: OutputEmitterRef<MapLibreEvent & EventData>; mapMouseDown: OutputEmitterRef<MapMouseEvent & EventData>; mapMouseUp: OutputEmitterRef<MapMouseEvent & EventData>; mapMouseMove: OutputEmitterRef<MapMouseEvent & EventData>; mapClick: OutputEmitterRef<MapMouseEvent & EventData>; mapDblClick: OutputEmitterRef<MapMouseEvent & EventData>; mapMouseOver: OutputEmitterRef<MapMouseEvent & EventData>; mapMouseOut: OutputEmitterRef<MapMouseEvent & EventData>; mapContextMenu: OutputEmitterRef<MapMouseEvent & EventData>; mapTouchStart: OutputEmitterRef<MapTouchEvent & EventData>; mapTouchEnd: OutputEmitterRef<MapTouchEvent & EventData>; mapTouchMove: OutputEmitterRef<MapTouchEvent & EventData>; mapTouchCancel: OutputEmitterRef<MapTouchEvent & EventData>; mapWheel: OutputEmitterRef<MapWheelEvent & EventData>; moveStart: OutputEmitterRef<MapLibreEvent<MouseEvent | TouchEvent | WheelEvent | undefined> & EventData>; move: OutputEmitterRef<MapLibreEvent<MouseEvent | TouchEvent | WheelEvent | undefined> & EventData>; moveEnd: OutputEmitterRef<MapLibreEvent<MouseEvent | TouchEvent | WheelEvent | undefined> & EventData>; mapDragStart: OutputEmitterRef<MapLibreEvent<MouseEvent | TouchEvent | undefined> & EventData>; mapDrag: OutputEmitterRef<MapLibreEvent<MouseEvent | TouchEvent | undefined> & EventData>; mapDragEnd: OutputEmitterRef<MapLibreEvent<MouseEvent | TouchEvent | undefined> & EventData>; zoomStart: OutputEmitterRef<MapLibreEvent<MouseEvent | TouchEvent | WheelEvent | undefined> & EventData>; zoomEvt: OutputEmitterRef<MapLibreEvent<MouseEvent | TouchEvent | WheelEvent | undefined> & EventData>; zoomEnd: OutputEmitterRef<MapLibreEvent<MouseEvent | TouchEvent | WheelEvent | undefined> & EventData>; rotateStart: OutputEmitterRef<MapLibreEvent<MouseEvent | TouchEvent | undefined> & EventData>; rotate: OutputEmitterRef<MapLibreEvent<MouseEvent | TouchEvent | undefined> & EventData>; rotateEnd: OutputEmitterRef<MapLibreEvent<MouseEvent | TouchEvent | undefined> & EventData>; pitchStart: OutputEmitterRef<MapLibreEvent<MouseEvent | TouchEvent | undefined> & EventData>; pitchEvt: OutputEmitterRef<MapLibreEvent<MouseEvent | TouchEvent | undefined> & EventData>; pitchEnd: OutputEmitterRef<MapLibreEvent<MouseEvent | TouchEvent | undefined> & EventData>; boxZoomStart: OutputEmitterRef<MapLibreZoomEvent & EventData>; boxZoomEnd: OutputEmitterRef<MapLibreZoomEvent & EventData>; boxZoomCancel: OutputEmitterRef<MapLibreZoomEvent & EventData>; webGlContextLost: OutputEmitterRef<MapContextEvent & EventData>; webGlContextRestored: OutputEmitterRef<MapContextEvent & EventData>; mapLoad: OutputEmitterRef<Map>; render: OutputEmitterRef<MapLibreEvent & EventData>; mapError: OutputEmitterRef<ErrorEvent & EventData>; data: OutputEmitterRef<MapDataEvent & EventData>; styleData: OutputEmitterRef<MapStyleDataEvent & EventData>; sourceData: OutputEmitterRef<MapSourceDataEvent & EventData>; dataLoading: OutputEmitterRef<MapDataEvent & EventData>; styleDataLoading: OutputEmitterRef<MapStyleDataEvent & EventData>; sourceDataLoading: OutputEmitterRef<MapSourceDataEvent & EventData>; styleImageMissing: OutputEmitterRef<{ id: string; } & EventData>; idle: OutputEmitterRef<MapLibreEvent & EventData>; } interface LayerEvents { layerClick: OutputEmitterRef<MapLayerMouseEvent & EventData>; layerDblClick: OutputEmitterRef<MapLayerMouseEvent & EventData>; layerMouseDown: OutputEmitterRef<MapLayerMouseEvent & EventData>; layerMouseUp: OutputEmitterRef<MapLayerMouseEvent & EventData>; layerMouseEnter: OutputEmitterRef<MapLayerMouseEvent & EventData>; layerMouseLeave: OutputEmitterRef<MapLayerMouseEvent & EventData>; layerMouseMove: OutputEmitterRef<MapLayerMouseEvent & EventData>; layerMouseOver: OutputEmitterRef<MapLayerMouseEvent & EventData>; layerMouseOut: OutputEmitterRef<MapLayerMouseEvent & EventData>; layerContextMenu: OutputEmitterRef<MapLayerMouseEvent & EventData>; layerTouchStart: OutputEmitterRef<MapLayerTouchEvent & EventData>; layerTouchEnd: OutputEmitterRef<MapLayerTouchEvent & EventData>; layerTouchCancel: OutputEmitterRef<MapLayerTouchEvent & EventData>; } /** * in typescript 4.1 DOM interface Position and Coordinates renamed to GeolocationPosition GeolocationCoordinates * to avoid deprecation angular version < 11.0.0 we declared own Coordinates, Position interface */ interface NgxMapLibreGeolocationCoordinates { readonly accuracy: number; readonly altitude: number | null; readonly altitudeAccuracy: number | null; readonly heading: number | null; readonly latitude: number; readonly longitude: number; readonly speed: number | null; } interface Position { coords: NgxMapLibreGeolocationCoordinates; target: GeolocateControl; timestamp: number; type: string; } type MapImageData = HTMLImageElement | ArrayBufferView | { width: number; height: number; data: Uint8Array | Uint8ClampedArray; } | ImageData | ImageBitmap; interface MapImageOptions { pixelRatio: number; sdf: boolean; } interface SetupMap { mapOptions: Omit<MapOptions, 'bearing' | 'pitch' | 'zoom'> & { bearing?: [number]; pitch?: [number]; zoom?: [number]; terrain?: TerrainSpecification; projection?: ProjectionSpecification; }; mapEvents: MapEvent; } interface SetupLayer { layerOptions: LayerSpecification; layerEvents: LayerEvents; } interface SetupPopup { popupOptions: PopupOptions; popupEvents: { popupOpen: OutputEmitterRef<void>; popupClose: OutputEmitterRef<void>; }; } /** * @private */ interface SetupMarkerOptions extends MarkerOptions { element: HTMLElement; feature?: GeoJSON.Feature<GeoJSON.Point>; lngLat?: LngLatLike; } interface SetupMarker { markersOptions: SetupMarkerOptions; markersEvents: { markerDragStart: OutputEmitterRef<Marker>; markerDrag: OutputEmitterRef<Marker>; markerDragEnd: OutputEmitterRef<Marker>; }; } type MovingOptions = FlyToOptions | (AnimationOptions & CameraOptions) | CameraOptions; /** * @private */ declare class MapService { private readonly zone; mapInstance: Map; mapEvents: MapEvent; private readonly subscriptionsPerInstance; private readonly mapCreated; private readonly mapLoaded; private readonly markersToRemove; private readonly popupsToRemove; private readonly imageIdsToRemove; readonly mapCreated$: rxjs.Observable<void>; readonly mapLoaded$: rxjs.Observable<void>; setup(options: SetupMap): void; destroyMap(): void; updateMinZoom(minZoom: number): void; updateMaxZoom(maxZoom: number): void; updateMinPitch(minPitch: number): void; updateMaxPitch(maxPitch: number): void; updateRenderWorldCopies(status: boolean): void; updateScrollZoom(status: boolean): void; updateDragRotate(status: boolean): void; updateTouchPitch(status: boolean): void; updateTouchZoomRotate(status: boolean): void; updateDoubleClickZoom(status: boolean): void; updateKeyboard(status: boolean): void; updateDragPan(status: boolean): void; updateBoxZoom(status: boolean): void; updateStyle(style: StyleSpecification): void; updateMaxBounds(maxBounds: LngLatBoundsLike): void; setProjection(options: ProjectionSpecification): void; setTerrain(options: TerrainSpecification): void; getTerrain(): TerrainSpecification | null; setCenterElevation(elevation: number): void; changeCanvasCursor(cursor: string): void; queryRenderedFeatures(pointOrBox?: PointLike | [PointLike, PointLike] | QueryRenderedFeaturesOptions, parameters?: QueryRenderedFeaturesOptions): GeoJSON.Feature<GeoJSON.GeometryObject>[]; panTo(center: LngLatLike, options?: AnimationOptions): void; move(movingMethod: 'jumpTo' | 'easeTo' | 'flyTo', movingOptions?: MovingOptions, zoom?: number, center?: LngLatLike, bearing?: number, pitch?: number, roll?: number): void; addLayer(layer: SetupLayer, bindEvents: boolean, before?: string): void; removeLayer(layerId: string): void; addMarker(marker: SetupMarker): Marker; removeMarker(marker: Marker): void; createPopup(popup: SetupPopup, element: Node): Popup; addPopupToMap(popup: Popup, lngLat: LngLatLike): void; addPopupToMarker(marker: Marker, popup: Popup): void; removePopupFromMap(popup: Popup): void; removePopupFromMarker(marker: Marker): void; addControl(control: IControl, position?: ControlPosition): void; removeControl(control: IControl): void; loadAndAddImage(imageId: string, url: string, options?: MapImageOptions): Promise<void>; addImage(imageId: string, data: MapImageData, options?: MapImageOptions): void; removeImage(imageId: string): void; addSource(sourceId: string, source: SourceSpecification): void; getSource<T extends Source>(sourceId: string): T; removeSource(sourceId: string): void; setAllLayerPaintProperty(layerId: string, paint: BackgroundLayerSpecification['paint'] | FillLayerSpecification['paint'] | FillExtrusionLayerSpecification['paint'] | LineLayerSpecification['paint'] | SymbolLayerSpecification['paint'] | RasterLayerSpecification['paint'] | CircleLayerSpecification['paint']): void; setAllLayerLayoutProperty(layerId: string, layout: BackgroundLayerSpecification['layout'] | FillLayerSpecification['layout'] | FillExtrusionLayerSpecification['layout'] | LineLayerSpecification['layout'] | SymbolLayerSpecification['layout'] | RasterLayerSpecification['layout'] | CircleLayerSpecification['layout']): void; setLayerFilter(layerId: string, filter: FilterSpecification | null | undefined): void; setLayerBefore(layerId: string, beforeId: string): void; setLayerZoomRange(layerId: string, minZoom?: number, maxZoom?: number): void; fitBounds(bounds: LngLatBoundsLike, options?: FitBoundsOptions): void; fitScreenCoordinates(points: [PointLike, PointLike], bearing: number, options?: AnimationOptions & CameraOptions): void; clearMapElements(): void; private createMap; private removeMarkers; private removePopups; private removeImages; private findLayersBySourceId; private hookEvents; private createSubscriptionForLayer; private createSubscriptionForPopup; static ɵfac: _angular_core.ɵɵFactoryDeclaration<MapService, never>; static ɵprov: _angular_core.ɵɵInjectableDeclaration<MapService>; } /** * `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) * ... * } * ``` */ declare class MapComponent implements OnChanges, OnDestroy, MapEvent { private readonly mapService; private readonly elementRef; /** Init input */ readonly collectResourceTiming: _angular_core.InputSignal<boolean | undefined>; /** Init input */ readonly crossSourceCollisions: _angular_core.InputSignal<boolean | undefined>; /** Init input */ readonly customMapboxApiUrl: _angular_core.InputSignal<string | undefined>; /** Init input */ readonly fadeDuration: _angular_core.InputSignal<number | undefined>; /** Init input */ readonly hash: _angular_core.InputSignal<string | boolean | undefined>; /** Init input */ readonly refreshExpiredTiles: _angular_core.InputSignal<boolean | undefined>; /** Init input */ readonly canvasContextAttributes: _angular_core.InputSignal<maplibre_gl.WebGLContextAttributesWithType | undefined>; /** Init input */ readonly bearingSnap: _angular_core.InputSignal<number | undefined>; /** Init input */ readonly interactive: _angular_core.InputSignal<boolean | undefined>; /** Init input */ readonly pitchWithRotate: _angular_core.InputSignal<boolean | undefined>; /** Init input */ readonly clickTolerance: _angular_core.InputSignal<number | undefined>; /** Init input */ readonly attributionControl: _angular_core.InputSignal<false | maplibre_gl.AttributionControlOptions | undefined>; /** Init input */ readonly logoPosition: _angular_core.InputSignal<maplibre_gl.ControlPosition | undefined>; /** Init input */ readonly maxTileCacheSize: _angular_core.InputSignal<number | null | undefined>; /** Init input */ readonly localIdeographFontFamily: _angular_core.InputSignal<string | false | undefined>; /** Init input */ readonly trackResize: _angular_core.InputSignal<boolean | undefined>; /** Init input */ readonly transformRequest: _angular_core.InputSignal<maplibre_gl.RequestTransformFunction | null | undefined>; /** Init input */ readonly bounds: _angular_core.InputSignal<LngLatBoundsLike | undefined>; /** Init input */ readonly locale: _angular_core.InputSignal<any>; /** Init input */ readonly cooperativeGestures: _angular_core.InputSignal<boolean | undefined>; /** Init input */ readonly cancelPendingTileRequestsWhileZooming: _angular_core.InputSignal<boolean | undefined>; /** Init input */ readonly centerClampedToGround: _angular_core.InputSignal<boolean | undefined>; /** Init input */ readonly maplibreLogo: _angular_core.InputSignal<boolean | undefined>; /** Init input */ readonly maxCanvasSize: _angular_core.InputSignal<[number, number] | undefined>; /** Init input */ readonly maxTileCacheZoomLevels: _angular_core.InputSignal<number | undefined>; /** Init input */ readonly pixelRatio: _angular_core.InputSignal<number | undefined>; /** Init input */ readonly rollEnabled: _angular_core.InputSignal<boolean | undefined>; /** Init input */ readonly transformCameraUpdate: _angular_core.InputSignal<maplibre_gl.CameraUpdateTransformFunction | null | undefined>; /** Init input */ readonly validateStyle: _angular_core.InputSignal<boolean | undefined>; /** Dynamic input */ readonly minZoom: _angular_core.InputSignal<number | null | undefined>; /** Dynamic input */ readonly maxZoom: _angular_core.InputSignal<number | null | undefined>; /** Dynamic input */ readonly minPitch: _angular_core.InputSignal<number | null | undefined>; /** Dynamic input */ readonly maxPitch: _angular_core.InputSignal<number | null | undefined>; /** Dynamic input */ readonly scrollZoom: _angular_core.InputSignal<boolean | maplibre_gl.AroundCenterOptions | undefined>; /** Dynamic input */ readonly dragRotate: _angular_core.InputSignal<boolean | undefined>; /** Dynamic input */ readonly touchPitch: _angular_core.InputSignal<boolean | maplibre_gl.AroundCenterOptions | undefined>; /** Dynamic input */ readonly touchZoomRotate: _angular_core.InputSignal<boolean | maplibre_gl.AroundCenterOptions | undefined>; /** Dynamic input */ readonly doubleClickZoom: _angular_core.InputSignal<boolean | undefined>; /** Dynamic input */ readonly keyboard: _angular_core.InputSignal<boolean | undefined>; /** Dynamic input */ readonly dragPan: _angular_core.InputSignal<boolean | maplibre_gl.DragPanOptions | undefined>; /** Dynamic input */ readonly boxZoom: _angular_core.InputSignal<boolean | undefined>; /** Dynamic input */ readonly style: _angular_core.InputSignal<string | maplibre_gl.StyleSpecification | undefined>; /** Dynamic input */ readonly center: _angular_core.InputSignal<maplibre_gl.LngLatLike | undefined>; /** Dynamic input */ readonly maxBounds: _angular_core.InputSignal<LngLatBoundsLike | undefined>; /** Dynamic input */ readonly zoom: _angular_core.InputSignal<[number] | undefined>; /** Dynamic input */ readonly bearing: _angular_core.InputSignal<[number] | undefined>; /** Dynamic input */ readonly pitch: _angular_core.InputSignal<[number] | undefined>; /** Dynamic input */ readonly roll: _angular_core.InputSignal<number | undefined>; /** Dynamic input */ readonly fitBoundsOptions: _angular_core.InputSignal<maplibre_gl.FitBoundsOptions | undefined>; /** Dynamic input */ readonly renderWorldCopies: _angular_core.InputSignal<boolean | undefined>; /** Dynamic input */ readonly elevation: _angular_core.InputSignal<number | undefined>; /** Dynamic input that is not part of the `MapOptions` object */ readonly terrain: _angular_core.InputSignal<TerrainSpecification | undefined>; /** Dynamic input that is not part of the `MapOptions` object */ readonly projection: _angular_core.InputSignal<ProjectionSpecification | undefined>; /** Added by ngx-mapbox-gl */ readonly movingMethod: _angular_core.InputSignal<"jumpTo" | "easeTo" | "flyTo">; readonly movingOptions: _angular_core.InputSignal<MovingOptions | undefined>; readonly fitBounds: _angular_core.InputSignal<LngLatBoundsLike | undefined>; readonly fitScreenCoordinates: _angular_core.InputSignal<[PointLike, PointLike] | undefined>; readonly centerWithPanTo: _angular_core.InputSignal<boolean | undefined>; readonly panToOptions: _angular_core.InputSignal<AnimationOptions | undefined>; readonly cursorStyle: _angular_core.InputSignal<string | undefined>; readonly mapResize: _angular_core.OutputEmitterRef<MapLibreEvent & EventData>; readonly mapRemove: _angular_core.OutputEmitterRef<MapLibreEvent & EventData>; readonly mapMouseDown: _angular_core.OutputEmitterRef<MapMouseEvent & EventData>; readonly mapMouseUp: _angular_core.OutputEmitterRef<MapMouseEvent & EventData>; readonly mapMouseMove: _angular_core.OutputEmitterRef<MapMouseEvent & EventData>; readonly mapClick: _angular_core.OutputEmitterRef<MapMouseEvent & EventData>; readonly mapDblClick: _angular_core.OutputEmitterRef<MapMouseEvent & EventData>; readonly mapMouseOver: _angular_core.OutputEmitterRef<MapMouseEvent & EventData>; readonly mapMouseOut: _angular_core.OutputEmitterRef<MapMouseEvent & EventData>; readonly mapContextMenu: _angular_core.OutputEmitterRef<MapMouseEvent & EventData>; readonly mapTouchStart: _angular_core.OutputEmitterRef<MapTouchEvent & EventData>; readonly mapTouchEnd: _angular_core.OutputEmitterRef<MapTouchEvent & EventData>; readonly mapTouchMove: _angular_core.OutputEmitterRef<MapTouchEvent & EventData>; readonly mapTouchCancel: _angular_core.OutputEmitterRef<MapTouchEvent & EventData>; readonly mapWheel: _angular_core.OutputEmitterRef<MapWheelEvent & EventData>; readonly moveStart: _angular_core.OutputEmitterRef<MapLibreEvent<MouseEvent | TouchEvent | WheelEvent | undefined> & EventData>; readonly move: _angular_core.OutputEmitterRef<MapLibreEvent<MouseEvent | TouchEvent | WheelEvent | undefined> & EventData>; readonly moveEnd: _angular_core.OutputEmitterRef<MapLibreEvent<MouseEvent | TouchEvent | WheelEvent | undefined> & EventData>; readonly mapDragStart: _angular_core.OutputEmitterRef<MapLibreEvent<MouseEvent | TouchEvent | undefined> & EventData>; readonly mapDrag: _angular_core.OutputEmitterRef<MapLibreEvent<MouseEvent | TouchEvent | undefined> & EventData>; readonly mapDragEnd: _angular_core.OutputEmitterRef<MapLibreEvent<MouseEvent | TouchEvent | undefined> & EventData>; readonly zoomStart: _angular_core.OutputEmitterRef<MapLibreEvent<MouseEvent | TouchEvent | WheelEvent | undefined> & EventData>; readonly zoomEvt: _angular_core.OutputEmitterRef<MapLibreEvent<MouseEvent | TouchEvent | WheelEvent | undefined> & EventData>; readonly zoomEnd: _angular_core.OutputEmitterRef<MapLibreEvent<MouseEvent | TouchEvent | WheelEvent | undefined> & EventData>; readonly rotateStart: _angular_core.OutputEmitterRef<MapLibreEvent<MouseEvent | TouchEvent | undefined> & EventData>; readonly rotate: _angular_core.OutputEmitterRef<MapLibreEvent<MouseEvent | TouchEvent | undefined> & EventData>; readonly rotateEnd: _angular_core.OutputEmitterRef<MapLibreEvent<MouseEvent | TouchEvent | undefined> & EventData>; readonly pitchStart: _angular_core.OutputEmitterRef<MapLibreEvent<MouseEvent | TouchEvent | undefined> & EventData>; readonly pitchEvt: _angular_core.OutputEmitterRef<MapLibreEvent<MouseEvent | TouchEvent | undefined> & EventData>; readonly pitchEnd: _angular_core.OutputEmitterRef<MapLibreEvent<MouseEvent | TouchEvent | undefined> & EventData>; readonly boxZoomStart: _angular_core.OutputEmitterRef<MapLibreZoomEvent & EventData>; readonly boxZoomEnd: _angular_core.OutputEmitterRef<MapLibreZoomEvent & EventData>; readonly boxZoomCancel: _angular_core.OutputEmitterRef<MapLibreZoomEvent & EventData>; readonly webGlContextLost: _angular_core.OutputEmitterRef<MapContextEvent & EventData>; readonly webGlContextRestored: _angular_core.OutputEmitterRef<MapContextEvent & EventData>; readonly mapLoad: _angular_core.OutputEmitterRef<Map>; readonly idle: _angular_core.OutputEmitterRef<MapLibreEvent & EventData>; readonly render: _angular_core.OutputEmitterRef<MapLibreEvent & EventData>; readonly mapError: _angular_core.OutputEmitterRef<ErrorEvent & EventData>; readonly data: _angular_core.OutputEmitterRef<MapDataEvent & EventData>; readonly styleData: _angular_core.OutputEmitterRef<MapLibreEvent<unknown> & { dataType: "style"; } & EventData>; readonly sourceData: _angular_core.OutputEmitterRef<MapLibreEvent<unknown> & { dataType: "source"; isSourceLoaded: boolean; source: maplibre_gl.SourceSpecification; sourceId: string; sourceDataType: maplibre_gl.MapSourceDataType; sourceDataChanged?: boolean; tile: any; } & EventData>; readonly dataLoading: _angular_core.OutputEmitterRef<MapDataEvent & EventData>; readonly styleDataLoading: _angular_core.OutputEmitterRef<MapLibreEvent<unknown> & { dataType: "style"; } & EventData>; readonly sourceDataLoading: _angular_core.OutputEmitterRef<MapLibreEvent<unknown> & { dataType: "source"; isSourceLoaded: boolean; source: maplibre_gl.SourceSpecification; sourceId: string; sourceDataType: maplibre_gl.MapSourceDataType; sourceDataChanged?: boolean; tile: any; } & EventData>; readonly styleImageMissing: _angular_core.OutputEmitterRef<{ id: string; } & EventData>; get mapInstance(): Map; readonly mapContainer: _angular_core.Signal<ElementRef<HTMLDivElement>>; constructor(); ngOnDestroy(): void; ngOnChanges(changes: SimpleChanges): Promise<void>; static ɵfac: _angular_core.ɵɵFactoryDeclaration<MapComponent, never>; static ɵcmp: _angular_core.ɵɵ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>; } /** * `mgl-layer` - a layer component * @see [layers](https://maplibre.org/maplibre-style-spec/layers/) * * @category Layer Component * * @example * ```html * ... * <mgl-map ...> * <mgl-layer * id="state-borders" * type="line" * [source]="states" * [paint]="{ * 'line-color': '#627BC1', * 'line-width': 2 * }" * ></mgl-layer> * </mgl-map> * ``` */ declare class LayerComponent implements OnInit, OnDestroy, OnChanges, LayerEvents { /** Init injection */ private readonly destroyRef; private readonly mapService; /** Init input */ readonly id: _angular_core.InputSignal<string>; readonly type: _angular_core.InputSignal<"symbol" | "fill" | "line" | "circle" | "heatmap" | "fill-extrusion" | "raster" | "hillshade" | "color-relief" | "background">; readonly source: _angular_core.InputSignal<string | undefined>; readonly metadata: _angular_core.InputSignal<unknown>; readonly sourceLayer: _angular_core.InputSignal<string | undefined>; /** * A flag to enable removeSource clean up functionality * * Init input */ readonly removeSource: _angular_core.InputSignal<boolean | undefined>; readonly filter: _angular_core.InputSignal<FilterSpecification | undefined>; readonly layout: _angular_core.InputSignal<{ visibility?: "visible" | "none"; } | { "fill-sort-key"?: maplibre_gl.DataDrivenPropertyValueSpecification<number>; visibility?: "visible" | "none"; } | { visibility?: "visible" | "none"; } | { "line-cap"?: maplibre_gl.PropertyValueSpecification<"butt" | "round" | "square">; "line-join"?: maplibre_gl.DataDrivenPropertyValueSpecification<"bevel" | "round" | "miter">; "line-miter-limit"?: maplibre_gl.PropertyValueSpecification<number>; "line-round-limit"?: maplibre_gl.PropertyValueSpecification<number>; "line-sort-key"?: maplibre_gl.DataDrivenPropertyValueSpecification<number>; visibility?: "visible" | "none"; } | { "symbol-placement"?: maplibre_gl.PropertyValueSpecification<"point" | "line" | "line-center">; "symbol-spacing"?: maplibre_gl.PropertyValueSpecification<number>; "symbol-avoid-edges"?: maplibre_gl.PropertyValueSpecification<boolean>; "symbol-sort-key"?: maplibre_gl.DataDrivenPropertyValueSpecification<number>; "symbol-z-order"?: maplibre_gl.PropertyValueSpecification<"auto" | "viewport-y" | "source">; "icon-allow-overlap"?: maplibre_gl.PropertyValueSpecification<boolean>; "icon-overlap"?: maplibre_gl.PropertyValueSpecification<"never" | "always" | "cooperative">; "icon-ignore-placement"?: maplibre_gl.PropertyValueSpecification<boolean>; "icon-optional"?: maplibre_gl.PropertyValueSpecification<boolean>; "icon-rotation-alignment"?: maplibre_gl.PropertyValueSpecification<"map" | "viewport" | "auto">; "icon-size"?: maplibre_gl.DataDrivenPropertyValueSpecification<number>; "icon-text-fit"?: maplibre_gl.PropertyValueSpecification<"none" | "width" | "height" | "both">; "icon-text-fit-padding"?: maplibre_gl.PropertyValueSpecification<[number, number, number, number]>; "icon-image"?: maplibre_gl.DataDrivenPropertyValueSpecification<maplibre_gl.ResolvedImageSpecification>; "icon-rotate"?: maplibre_gl.DataDrivenPropertyValueSpecification<number>; "icon-padding"?: maplibre_gl.DataDrivenPropertyValueSpecification<maplibre_gl.PaddingSpecification>; "icon-keep-upright"?: maplibre_gl.PropertyValueSpecification<boolean>; "icon-offset"?: maplibre_gl.DataDrivenPropertyValueSpecification<[number, number]>; "icon-anchor"?: maplibre_gl.DataDrivenPropertyValueSpecification<"center" | "left" | "right" | "top" | "bottom" | "top-left" | "top-right" | "bottom-left" | "bottom-right">; "icon-pitch-alignment"?: maplibre_gl.PropertyValueSpecification<"map" | "viewport" | "auto">; "text-pitch-alignment"?: maplibre_gl.PropertyValueSpecification<"map" | "viewport" | "auto">; "text-rotation-alignment"?: maplibre_gl.PropertyValueSpecification<"map" | "viewport" | "viewport-glyph" | "auto">; "text-field"?: maplibre_gl.DataDrivenPropertyValueSpecification<maplibre_gl.FormattedSpecification>; "text-font"?: maplibre_gl.DataDrivenPropertyValueSpecification<Array<string>>; "text-size"?: maplibre_gl.DataDrivenPropertyValueSpecification<number>; "text-max-width"?: maplibre_gl.DataDrivenPropertyValueSpecification<number>; "text-line-height"?: maplibre_gl.PropertyValueSpecification<number>; "text-letter-spacing"?: maplibre_gl.DataDrivenPropertyValueSpecification<number>; "text-justify"?: maplibre_gl.DataDrivenPropertyValueSpecification<"auto" | "left" | "center" | "right">; "text-radial-offset"?: maplibre_gl.DataDrivenPropertyValueSpecification<number>; "text-variable-anchor"?: maplibre_gl.PropertyValueSpecification<Array<"center" | "left" | "right" | "top" | "bottom" | "top-left" | "top-right" | "bottom-left" | "bottom-right">>; "text-variable-anchor-offset"?: maplibre_gl.DataDrivenPropertyValueSpecification<maplibre_gl.VariableAnchorOffsetCollectionSpecification>; "text-anchor"?: maplibre_gl.DataDrivenPropertyValueSpecification<"center" | "left" | "right" | "top" | "bottom" | "top-left" | "top-right" | "bottom-left" | "bottom-right">; "text-max-angle"?: maplibre_gl.PropertyValueSpecification<number>; "text-writing-mode"?: maplibre_gl.PropertyValueSpecification<Array<"horizontal" | "vertical">>; "text-rotate"?: maplibre_gl.DataDrivenPropertyValueSpecification<number>; "text-padding"?: maplibre_gl.PropertyValueSpecification<number>; "text-keep-upright"?: maplibre_gl.PropertyValueSpecification<boolean>; "text-transform"?: maplibre_gl.DataDrivenPropertyValueSpecification<"none" | "uppercase" | "lowercase">; "text-offset"?: maplibre_gl.DataDrivenPropertyValueSpecification<[number, number]>; "text-allow-overlap"?: maplibre_gl.PropertyValueSpecification<boolean>; "text-overlap"?: maplibre_gl.PropertyValueSpecification<"never" | "always" | "cooperative">; "text-ignore-placement"?: maplibre_gl.PropertyValueSpecification<boolean>; "text-optional"?: maplibre_gl.PropertyValueSpecification<boolean>; visibility?: "visible" | "none"; } | { visibility?: "visible" | "none"; } | { "circle-sort-key"?: maplibre_gl.DataDrivenPropertyValueSpecification<number>; visibility?: "visible" | "none"; } | { visibility?: "visible" | "none"; } | { visibility?: "visible" | "none"; } | { visibility?: "visible" | "none"; } | undefined>; readonly paint: _angular_core.InputSignal<{ "background-color"?: maplibre_gl.PropertyValueSpecification<maplibre_gl.ColorSpecification>; "background-pattern"?: maplibre_gl.PropertyValueSpecification<maplibre_gl.ResolvedImageSpecification>; "background-opacity"?: maplibre_gl.PropertyValueSpecification<number>; } | { "fill-antialias"?: maplibre_gl.PropertyValueSpecification<boolean>; "fill-opacity"?: maplibre_gl.DataDrivenPropertyValueSpecification<number>; "fill-color"?: maplibre_gl.DataDrivenPropertyValueSpecification<maplibre_gl.ColorSpecification>; "fill-outline-color"?: maplibre_gl.DataDrivenPropertyValueSpecification<maplibre_gl.ColorSpecification>; "fill-translate"?: maplibre_gl.PropertyValueSpecification<[number, number]>; "fill-translate-anchor"?: maplibre_gl.PropertyValueSpecification<"map" | "viewport">; "fill-pattern"?: maplibre_gl.DataDrivenPropertyValueSpecification<maplibre_gl.ResolvedImageSpecification>; } | { "fill-extrusion-opacity"?: maplibre_gl.PropertyValueSpecification<number>; "fill-extrusion-color"?: maplibre_gl.DataDrivenPropertyValueSpecification<maplibre_gl.ColorSpecification>; "fill-extrusion-translate"?: maplibre_gl.PropertyValueSpecification<[number, number]>; "fill-extrusion-translate-anchor"?: maplibre_gl.PropertyValueSpecification<"map" | "viewport">; "fill-extrusion-pattern"?: maplibre_gl.DataDrivenPropertyValueSpecification<maplibre_gl.ResolvedImageSpecification>; "fill-extrusion-height"?: maplibre_gl.DataDrivenPropertyValueSpecification<number>; "fill-extrusion-base"?: maplibre_gl.DataDrivenPropertyValueSpecification<number>; "fill-extrusion-vertical-gradient"?: maplibre_gl.PropertyValueSpecification<boolean>; } | { "line-opacity"?: maplibre_gl.DataDrivenPropertyValueSpecification<number>; "line-color"?: maplibre_gl.DataDrivenPropertyValueSpecification<maplibre_gl.ColorSpecification>; "line-translate"?: maplibre_gl.PropertyValueSpecification<[number, number]>; "line-translate-anchor"?: maplibre_gl.PropertyValueSpecification<"map" | "viewport">; "line-width"?: maplibre_gl.DataDrivenPropertyValueSpecification<number>; "line-gap-width"?: maplibre_gl.DataDrivenPropertyValueSpecification<number>; "line-offset"?: maplibre_gl.DataDrivenPropertyValueSpecification<number>; "line-blur"?: maplibre_gl.DataDrivenPropertyValueSpecification<number>; "line-dasharray"?: maplibre_gl.PropertyValueSpecification<Array<number>>; "line-pattern"?: maplibre_gl.DataDrivenPropertyValueSpecification<maplibre_gl.ResolvedImageSpecification>; "line-gradient"?: maplibre_gl.ExpressionSpecification; } | { "icon-opacity"?: maplibre_gl.DataDrivenPropertyValueSpecification<number>; "icon-color"?: maplibre_gl.DataDrivenPropertyValueSpecification<maplibre_gl.ColorSpecification>; "icon-halo-color"?: maplibre_gl.DataDrivenPropertyValueSpecification<maplibre_gl.ColorSpecification>; "icon-halo-width"?: maplibre_gl.DataDrivenPropertyValueSpecification<number>; "icon-halo-blur"?: maplibre_gl.DataDrivenPropertyValueSpecification<number>; "icon-translate"?: maplibre_gl.PropertyValueSpecification<[number, number]>; "icon-translate-anchor"?: maplibre_gl.PropertyValueSpecification<"map" | "viewport">; "text-opacity"?: maplibre_gl.DataDrivenPropertyValueSpecification<number>; "text-color"?: maplibre_gl.DataDrivenPropertyValueSpecification<maplibre_gl.ColorSpecification>; "text-halo-color"?: maplibre_gl.DataDrivenPropertyValueSpecification<maplibre_gl.ColorSpecification>; "text-halo-width"?: maplibre_gl.DataDrivenPropertyValueSpecification<number>; "text-halo-blur"?: maplibre_gl.DataDrivenPropertyValueSpecification<number>; "text-translate"?: maplibre_gl.PropertyValueSpecification<[number, number]>; "text-translate-anchor"?: maplibre_gl.PropertyValueSpecification<"map" | "viewport">; } | { "raster-opacity"?: maplibre_gl.PropertyValueSpecification<number>; "raster-hue-rotate"?: maplibre_gl.PropertyValueSpecification<number>; "raster-brightness-min"?: maplibre_gl.PropertyValueSpecification<number>; "raster-brightness-max"?: maplibre_gl.PropertyValueSpecification<number>; "raster-saturation"?: maplibre_gl.PropertyValueSpecification<number>; "raster-contrast"?: maplibre_gl.PropertyValueSpecification<number>; "raster-resampling"?: maplibre_gl.PropertyValueSpecification<"linear" | "nearest">; "raster-fade-duration"?: maplibre_gl.PropertyValueSpecification<number>; } | { "circle-radius"?: maplibre_gl.DataDrivenPropertyValueSpecification<number>; "circle-color"?: maplibre_gl.DataDrivenPropertyValueSpecification<maplibre_gl.ColorSpecification>; "circle-blur"?: maplibre_gl.DataDrivenPropertyValueSpecification<number>; "circle-opacity"?: maplibre_gl.DataDrivenPropertyValueSpecification<number>; "circle-translate"?: maplibre_gl.PropertyValueSpecification<[number, number]>; "circle-translate-anchor"?: maplibre_gl.PropertyValueSpecification<"map" | "viewport">; "circle-pitch-scale"?: maplibre_gl.PropertyValueSpecification<"map" | "viewport">; "circle-pitch-alignment"?: maplibre_gl.PropertyValueSpecification<"map" | "viewport">; "circle-stroke-width"?: maplibre_gl.DataDrivenPropertyValueSpecification<number>; "circle-stroke-color"?: maplibre_gl.DataDrivenPropertyValueSpecification<maplibre_gl.ColorSpecification>; "circle-stroke-opacity"?: maplibre_gl.DataDrivenPropertyValueSpecification<number>; } | { "heatmap-radius"?: maplibre_gl.DataDrivenPropertyValueSpecification<number>; "heatmap-weight"?: maplibre_gl.DataDrivenPropertyValueSpecification<number>; "heatmap-intensity"?: maplibre_gl.PropertyValueSpecification<number>; "heatmap-color"?: maplibre_gl.ExpressionSpecification; "heatmap-opacity"?: maplibre_gl.PropertyValueSpecification<number>; } | { "hillshade-illumination-direction"?: maplibre_gl.PropertyValueSpecification<maplibre_gl.NumberArraySpecification>; "hillshade-illumination-altitude"?: maplibre_gl.PropertyValueSpecification<maplibre_gl.NumberArraySpecification>; "hillshade-illumination-anchor"?: maplibre_gl.PropertyValueSpecification<"map" | "viewport">; "hillshade-exaggeration"?: maplibre_gl.PropertyValueSpecification<number>; "hillshade-shadow-color"?: maplibre_gl.PropertyValueSpecification<maplibre_gl.ColorArraySpecification>; "hillshade-highlight-color"?: maplibre_gl.PropertyValueSpecification<maplibre_gl.ColorArraySpecification>; "hillshade-accent-color"?: maplibre_gl.PropertyValueSpecification<maplibre_gl.ColorSpecification>; "hillshade-method"?: maplibre_gl.PropertyValueSpecification<"standard" | "basic" | "combined" | "igor" | "multidirectional">; } | { "color-relief-opacity"?: maplibre_gl.PropertyValueSpecification<number>; "color-relief-color"?: maplibre_gl.ExpressionSpecification; } | undefined>; readonly before: _angular_core.InputSignal<string | undefined>; readonly minzoom: _angular_core.InputSignal<number | undefined>; readonly maxzoom: _angular_core.InputSignal<number | undefined>; readonly layerClick: _angular_core.OutputEmitterRef<maplibre_gl.MapMouseEvent & { features?: maplibre_gl.MapGeoJSONFeature[]; } & EventData>; readonly layerDblClick: _angular_core.OutputEmitterRef<maplibre_gl.MapMouseEvent & { features?: maplibre_gl.MapGeoJSONFeature[]; } & EventData>; readonly layerMouseDown: _angular_core.OutputEmitterRef<maplibre_gl.MapMouseEvent & { features?: maplibre_gl.MapGeoJSONFeature[]; } & EventData>; readonly layerMouseUp: _angular_core.OutputEmitterRef<maplibre_gl.MapMouseEvent & { features?: maplibre_gl.MapGeoJSONFeature[]; } & EventData>; readonly layerMouseEnter: _angular_core.OutputEmitterRef<maplibre_gl.MapMouseEvent & { features?: maplibre_gl.MapGeoJSONFeature[]; } & EventData>; readonly layerMouseLeave: _angular_core.OutputEmitterRef<maplibre_gl.MapMouseEvent & { features?: maplibre_gl.MapGeoJSONFeature[]; } & EventData>; readonly layerMouseMove: _angular_core.OutputEmitterRef<maplibre_gl.MapMouseEvent & { features?: maplibre_gl.MapGeoJSONFeature[]; } & EventData>; readonly layerMouseOver: _angular_core.OutputEmitterRef<maplibre_gl.MapMouseEvent & { features?: maplibre_gl.MapGeoJSONFeature[]; } & EventData>; readonly layerMouseOut: _angular_core.OutputEmitterRef<maplibre_gl.MapMouseEvent & { features?: maplibre_gl.MapGeoJSONFeature[]; } & EventData>; readonly layerContextMenu: _angular_core.OutputEmitterRef<maplibre_gl.MapMouseEvent & { features?: maplibre_gl.MapGeoJSONFeature[]; } & EventData>; readonly layerTouchStart: _angular_core.OutputEmitterRef<maplibre_gl.MapTouchEvent & { features?: maplibre_gl.MapGeoJSONFeature[]; } & EventData>; readonly layerTouchEnd: _angular_core.OutputEmitterRef<maplibre_gl.MapTouchEvent & { features?: maplibre_gl.MapGeoJSONFeature[]; } & EventData>; readonly layerTouchCancel: _angular_core.OutputEmitterRef<maplibre_gl.MapTouchEvent & { features?: maplibre_gl.MapGeoJSONFeature[]; } & EventData>; private readonly layerAdded; private readonly sourceIdAdded; ngOnInit(): void; ngOnChanges(changes: SimpleChanges): void; ngOnDestroy(): void; private init; static ɵfac: _angular_core.ɵɵFactoryDeclaration<LayerComponent, never>; static ɵcmp: _angular_core.ɵɵComponentDeclaration<LayerComponent, "mgl-layer", never, { "id": { "alias": "id"; "required": true; "isSignal": true; }; "type": { "alias": "type"; "required": true; "isSignal": true; }; "source": { "alias": "source"; "required": false; "isSignal": true; }; "metadata": { "alias": "metadata"; "required": false; "isSignal": true; }; "sourceLayer": { "alias": "sourceLayer"; "required": false; "isSignal": true; }; "removeSource": { "alias": "removeSource"; "required": false; "isSignal": true; }; "filter": { "alias": "filter"; "required": false; "isSignal": true; }; "layout": { "alias": "layout"; "required": false; "isSignal": true; }; "paint": { "alias": "paint"; "required": false; "isSignal": true; }; "before": { "alias": "before"; "required": false; "isSignal": true; }; "minzoom": { "alias": "minzoom"; "required": false; "isSignal": true; }; "maxzoom": { "alias": "maxzoom"; "required": false; "isSignal": true; }; }, { "layerClick": "layerClick"; "layerDblClick": "layerDblClick"; "layerMouseDown": "layerMouseDown"; "layerMouseUp": "layerMouseUp"; "layerMouseEnter": "layerMouseEnter"; "layerMouseLeave": "layerMouseLeave"; "layerMouseMove": "layerMouseMove"; "layerMouseOver": "layerMouseOver"; "layerMouseOut": "layerMouseOut"; "layerContextMenu": "layerContextMenu"; "layerTouchStart": "layerTouchStart"; "layerTouchEnd": "layerTouchEnd"; "layerTouchCancel": "layerTouchCancel"; }, never, never, true, never>; } /** * `mglDraggable` - a directive for Feature or Marker * * @category Directives * * @see [Draggable Marker](https://maplibre.org/ng-maplibre-gl/demo/ngx-drag-a-point) */ declare class DraggableDirective implements OnInit, OnDestroy { /** Init injection */ private readonly mapService; private readonly ngZone; private readonly featureComponent; readonly layer: _angular_core.InputSignal<LayerComponent | null>; featureDragStart: _angular_core.OutputEmitterRef<MapMouseEvent>; featureDragEnd: _angular_core.OutputEmitterRef<MapMouseEvent>; featureDrag: _angular_core.OutputEmitterRef<MapMouseEvent>; private sub; ngOnInit(): void; ngOnDestroy(): void; private handleDraggable; private filterFeature; static ɵfac: _angular_core.ɵɵFactoryDeclaration<DraggableDire