@maplibre/ngx-maplibre-gl

import { OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core'; import type { FilterSpecification } from 'maplibre-gl'; import type { EventData, LayerEvents } from '../map/map.types'; import * as i0 from "@angular/core"; /** * `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> * ``` */ export declare class LayerComponent implements OnInit, OnDestroy, OnChanges, LayerEvents { /** Init injection */ private readonly destroyRef; private readonly mapService; /** Init input */ readonly id: import("@angular/core").InputSignal<string>; readonly type: import("@angular/core").InputSignal<"symbol" | "fill" | "line" | "circle" | "heatmap" | "fill-extrusion" | "raster" | "hillshade" | "background">; readonly source: import("@angular/core").InputSignal<string | undefined>; readonly metadata: import("@angular/core").InputSignal<unknown>; readonly sourceLayer: import("@angular/core").InputSignal<string | undefined>; /** * A flag to enable removeSource clean up functionality * * Init input */ readonly removeSource: import("@angular/core").InputSignal<boolean | undefined>; readonly filter: import("@angular/core").InputSignal<FilterSpecification | undefined>; readonly layout: import("@angular/core").InputSignal<{ visibility?: "visible" | "none"; } | { "fill-sort-key"?: import("maplibre-gl").DataDrivenPropertyValueSpecification<number>; visibility?: "visible" | "none"; } | { visibility?: "visible" | "none"; } | { "line-cap"?: import("maplibre-gl").PropertyValueSpecification<"butt" | "round" | "square">; "line-join"?: import("maplibre-gl").DataDrivenPropertyValueSpecification<"bevel" | "round" | "miter">; "line-miter-limit"?: import("maplibre-gl").PropertyValueSpecification<number>; "line-round-limit"?: import("maplibre-gl").PropertyValueSpecification<number>; "line-sort-key"?: import("maplibre-gl").DataDrivenPropertyValueSpecification<number>; visibility?: "visible" | "none"; } | { "symbol-placement"?: import("maplibre-gl").PropertyValueSpecification<"point" | "line" | "line-center">; "symbol-spacing"?: import("maplibre-gl").PropertyValueSpecification<number>; "symbol-avoid-edges"?: import("maplibre-gl").PropertyValueSpecification<boolean>; "symbol-sort-key"?: import("maplibre-gl").DataDrivenPropertyValueSpecification<number>; "symbol-z-order"?: import("maplibre-gl").PropertyValueSpecification<"auto" | "viewport-y" | "source">; "icon-allow-overlap"?: import("maplibre-gl").PropertyValueSpecification<boolean>; "icon-overlap"?: import("maplibre-gl").PropertyValueSpecification<"never" | "always" | "cooperative">; "icon-ignore-placement"?: import("maplibre-gl").PropertyValueSpecification<boolean>; "icon-optional"?: import("maplibre-gl").PropertyValueSpecification<boolean>; "icon-rotation-alignment"?: import("maplibre-gl").PropertyValueSpecification<"map" | "viewport" | "auto">; "icon-size"?: import("maplibre-gl").DataDrivenPropertyValueSpecification<number>; "icon-text-fit"?: import("maplibre-gl").PropertyValueSpecification<"none" | "width" | "height" | "both">; "icon-text-fit-padding"?: import("maplibre-gl").PropertyValueSpecification<[number, number, number, number]>; "icon-image"?: import("maplibre-gl").DataDrivenPropertyValueSpecification<import("maplibre-gl").ResolvedImageSpecification>; "icon-rotate"?: import("maplibre-gl").DataDrivenPropertyValueSpecification<number>; "icon-padding"?: import("maplibre-gl").DataDrivenPropertyValueSpecification<import("maplibre-gl").PaddingSpecification>; "icon-keep-upright"?: import("maplibre-gl").PropertyValueSpecification<boolean>; "icon-offset"?: import("maplibre-gl").DataDrivenPropertyValueSpecification<[number, number]>; "icon-anchor"?: import("maplibre-gl").DataDrivenPropertyValueSpecification<"center" | "left" | "right" | "top" | "bottom" | "top-left" | "top-right" | "bottom-left" | "bottom-right">; "icon-pitch-alignment"?: import("maplibre-gl").PropertyValueSpecification<"map" | "viewport" | "auto">; "text-pitch-alignment"?: import("maplibre-gl").PropertyValueSpecification<"map" | "viewport" | "auto">; "text-rotation-alignment"?: import("maplibre-gl").PropertyValueSpecification<"map" | "viewport" | "viewport-glyph" | "auto">; "text-field"?: import("maplibre-gl").DataDrivenPropertyValueSpecification<import("maplibre-gl").FormattedSpecification>; "text-font"?: import("maplibre-gl").DataDrivenPropertyValueSpecification<Array<string>>; "text-size"?: import("maplibre-gl").DataDrivenPropertyValueSpecification<number>; "text-max-width"?: import("maplibre-gl").DataDrivenPropertyValueSpecification<number>; "text-line-height"?: import("maplibre-gl").PropertyValueSpecification<number>; "text-letter-spacing"?: import("maplibre-gl").DataDrivenPropertyValueSpecification<number>; "text-justify"?: import("maplibre-gl").DataDrivenPropertyValueSpecification<"auto" | "left" | "center" | "right">; "text-radial-offset"?: import("maplibre-gl").DataDrivenPropertyValueSpecification<number>; "text-variable-anchor"?: import("maplibre-gl").PropertyValueSpecification<Array<"center" | "left" | "right" | "top" | "bottom" | "top-left" | "top-right" | "bottom-left" | "bottom-right">>; "text-variable-anchor-offset"?: import("maplibre-gl").DataDrivenPropertyValueSpecification<import("maplibre-gl").VariableAnchorOffsetCollectionSpecification>; "text-anchor"?: import("maplibre-gl").DataDrivenPropertyValueSpecification<"center" | "left" | "right" | "top" | "bottom" | "top-left" | "top-right" | "bottom-left" | "bottom-right">; "text-max-angle"?: import("maplibre-gl").PropertyValueSpecification<number>; "text-writing-mode"?: import("maplibre-gl").PropertyValueSpecification<Array<"horizontal" | "vertical">>; "text-rotate"?: import("maplibre-gl").DataDrivenPropertyValueSpecification<number>; "text-padding"?: import("maplibre-gl").PropertyValueSpecification<number>; "text-keep-upright"?: import("maplibre-gl").PropertyValueSpecification<boolean>; "text-transform"?: import("maplibre-gl").DataDrivenPropertyValueSpecification<"none" | "uppercase" | "lowercase">; "text-offset"?: import("maplibre-gl").DataDrivenPropertyValueSpecification<[number, number]>; "text-allow-overlap"?: import("maplibre-gl").PropertyValueSpecification<boolean>; "text-overlap"?: import("maplibre-gl").PropertyValueSpecification<"never" | "always" | "cooperative">; "text-ignore-placement"?: import("maplibre-gl").PropertyValueSpecification<boolean>; "text-optional"?: import("maplibre-gl").PropertyValueSpecification<boolean>; visibility?: "visible" | "none"; } | { visibility?: "visible" | "none"; } | { "circle-sort-key"?: import("maplibre-gl").DataDrivenPropertyValueSpecification<number>; visibility?: "visible" | "none"; } | { visibility?: "visible" | "none"; } | { visibility?: "visible" | "none"; } | undefined>; readonly paint: import("@angular/core").InputSignal<{ "background-color"?: import("maplibre-gl").PropertyValueSpecification<import("maplibre-gl").ColorSpecification>; "background-pattern"?: import("maplibre-gl").PropertyValueSpecification<import("maplibre-gl").ResolvedImageSpecification>; "background-opacity"?: import("maplibre-gl").PropertyValueSpecification<number>; } | { "fill-antialias"?: import("maplibre-gl").PropertyValueSpecification<boolean>; "fill-opacity"?: import("maplibre-gl").DataDrivenPropertyValueSpecification<number>; "fill-color"?: import("maplibre-gl").DataDrivenPropertyValueSpecification<import("maplibre-gl").ColorSpecification>; "fill-outline-color"?: import("maplibre-gl").DataDrivenPropertyValueSpecification<import("maplibre-gl").ColorSpecification>; "fill-translate"?: import("maplibre-gl").PropertyValueSpecification<[number, number]>; "fill-translate-anchor"?: import("maplibre-gl").PropertyValueSpecification<"map" | "viewport">; "fill-pattern"?: import("maplibre-gl").DataDrivenPropertyValueSpecification<import("maplibre-gl").ResolvedImageSpecification>; } | { "fill-extrusion-opacity"?: import("maplibre-gl").PropertyValueSpecification<number>; "fill-extrusion-color"?: import("maplibre-gl").DataDrivenPropertyValueSpecification<import("maplibre-gl").ColorSpecification>; "fill-extrusion-translate"?: import("maplibre-gl").PropertyValueSpecification<[number, number]>; "fill-extrusion-translate-anchor"?: import("maplibre-gl").PropertyValueSpecification<"map" | "viewport">; "fill-extrusion-pattern"?: import("maplibre-gl").DataDrivenPropertyValueSpecification<import("maplibre-gl").ResolvedImageSpecification>; "fill-extrusion-height"?: import("maplibre-gl").DataDrivenPropertyValueSpecification<number>; "fill-extrusion-base"?: import("maplibre-gl").DataDrivenPropertyValueSpecification<number>; "fill-extrusion-vertical-gradient"?: import("maplibre-gl").PropertyValueSpecification<boolean>; } | { "line-opacity"?: import("maplibre-gl").DataDrivenPropertyValueSpecification<number>; "line-color"?: import("maplibre-gl").DataDrivenPropertyValueSpecification<import("maplibre-gl").ColorSpecification>; "line-translate"?: import("maplibre-gl").PropertyValueSpecification<[number, number]>; "line-translate-anchor"?: import("maplibre-gl").PropertyValueSpecification<"map" | "viewport">; "line-width"?: import("maplibre-gl").DataDrivenPropertyValueSpecification<number>; "line-gap-width"?: import("maplibre-gl").DataDrivenPropertyValueSpecification<number>; "line-offset"?: import("maplibre-gl").DataDrivenPropertyValueSpecification<number>; "line-blur"?: import("maplibre-gl").DataDrivenPropertyValueSpecification<number>; "line-dasharray"?: import("maplibre-gl").PropertyValueSpecification<Array<number>>; "line-pattern"?: import("maplibre-gl").DataDrivenPropertyValueSpecification<import("maplibre-gl").ResolvedImageSpecification>; "line-gradient"?: import("maplibre-gl").ExpressionSpecification; } | { "icon-opacity"?: import("maplibre-gl").DataDrivenPropertyValueSpecification<number>; "icon-color"?: import("maplibre-gl").DataDrivenPropertyValueSpecification<import("maplibre-gl").ColorSpecification>; "icon-halo-color"?: import("maplibre-gl").DataDrivenPropertyValueSpecification<import("maplibre-gl").ColorSpecification>; "icon-halo-width"?: import("maplibre-gl").DataDrivenPropertyValueSpecification<number>; "icon-halo-blur"?: import("maplibre-gl").DataDrivenPropertyValueSpecification<number>; "icon-translate"?: import("maplibre-gl").PropertyValueSpecification<[number, number]>; "icon-translate-anchor"?: import("maplibre-gl").PropertyValueSpecification<"map" | "viewport">; "text-opacity"?: import("maplibre-gl").DataDrivenPropertyValueSpecification<number>; "text-color"?: import("maplibre-gl").DataDrivenPropertyValueSpecification<import("maplibre-gl").ColorSpecification>; "text-halo-color"?: import("maplibre-gl").DataDrivenPropertyValueSpecification<import("maplibre-gl").ColorSpecification>; "text-halo-width"?: import("maplibre-gl").DataDrivenPropertyValueSpecification<number>; "text-halo-blur"?: import("maplibre-gl").DataDrivenPropertyValueSpecification<number>; "text-translate"?: import("maplibre-gl").PropertyValueSpecification<[number, number]>; "text-translate-anchor"?: import("maplibre-gl").PropertyValueSpecification<"map" | "viewport">; } | { "raster-opacity"?: import("maplibre-gl").PropertyValueSpecification<number>; "raster-hue-rotate"?: import("maplibre-gl").PropertyValueSpecification<number>; "raster-brightness-min"?: import("maplibre-gl").PropertyValueSpecification<number>; "raster-brightness-max"?: import("maplibre-gl").PropertyValueSpecification<number>; "raster-saturation"?: import("maplibre-gl").PropertyValueSpecification<number>; "raster-contrast"?: import("maplibre-gl").PropertyValueSpecification<number>; "raster-resampling"?: import("maplibre-gl").PropertyValueSpecification<"linear" | "nearest">; "raster-fade-duration"?: import("maplibre-gl").PropertyValueSpecification<number>; } | { "circle-radius"?: import("maplibre-gl").DataDrivenPropertyValueSpecification<number>; "circle-color"?: import("maplibre-gl").DataDrivenPropertyValueSpecification<import("maplibre-gl").ColorSpecification>; "circle-blur"?: import("maplibre-gl").DataDrivenPropertyValueSpecification<number>; "circle-opacity"?: import("maplibre-gl").DataDrivenPropertyValueSpecification<number>; "circle-translate"?: import("maplibre-gl").PropertyValueSpecification<[number, number]>; "circle-translate-anchor"?: import("maplibre-gl").PropertyValueSpecification<"map" | "viewport">; "circle-pitch-scale"?: import("maplibre-gl").PropertyValueSpecification<"map" | "viewport">; "circle-pitch-alignment"?: import("maplibre-gl").PropertyValueSpecification<"map" | "viewport">; "circle-stroke-width"?: import("maplibre-gl").DataDrivenPropertyValueSpecification<number>; "circle-stroke-color"?: import("maplibre-gl").DataDrivenPropertyValueSpecification<import("maplibre-gl").ColorSpecification>; "circle-stroke-opacity"?: import("maplibre-gl").DataDrivenPropertyValueSpecification<number>; } | { "heatmap-radius"?: import("maplibre-gl").DataDrivenPropertyValueSpecification<number>; "heatmap-weight"?: import("maplibre-gl").DataDrivenPropertyValueSpecification<number>; "heatmap-intensity"?: import("maplibre-gl").PropertyValueSpecification<number>; "heatmap-color"?: import("maplibre-gl").ExpressionSpecification; "heatmap-opacity"?: import("maplibre-gl").PropertyValueSpecification<number>; } | { "hillshade-illumination-direction"?: import("maplibre-gl").PropertyValueSpecification<number>; "hillshade-illumination-anchor"?: import("maplibre-gl").PropertyValueSpecification<"map" | "viewport">; "hillshade-exaggeration"?: import("maplibre-gl").PropertyValueSpecification<number>; "hillshade-shadow-color"?: import("maplibre-gl").PropertyValueSpecification<import("maplibre-gl").ColorSpecification>; "hillshade-highlight-color"?: import("maplibre-gl").PropertyValueSpecification<import("maplibre-gl").ColorSpecification>; "hillshade-accent-color"?: import("maplibre-gl").PropertyValueSpecification<import("maplibre-gl").ColorSpecification>; } | undefined>; readonly before: import("@angular/core").InputSignal<string | undefined>; readonly minzoom: import("@angular/core").InputSignal<number | undefined>; readonly maxzoom: import("@angular/core").InputSignal<number | undefined>; readonly layerClick: import("@angular/core").OutputEmitterRef<import("maplibre-gl").MapMouseEvent & { features?: import("maplibre-gl").MapGeoJSONFeature[]; } & EventData>; readonly layerDblClick: import("@angular/core").OutputEmitterRef<import("maplibre-gl").MapMouseEvent & { features?: import("maplibre-gl").MapGeoJSONFeature[]; } & EventData>; readonly layerMouseDown: import("@angular/core").OutputEmitterRef<import("maplibre-gl").MapMouseEvent & { features?: import("maplibre-gl").MapGeoJSONFeature[]; } & EventData>; readonly layerMouseUp: import("@angular/core").OutputEmitterRef<import("maplibre-gl").MapMouseEvent & { features?: import("maplibre-gl").MapGeoJSONFeature[]; } & EventData>; readonly layerMouseEnter: import("@angular/core").OutputEmitterRef<import("maplibre-gl").MapMouseEvent & { features?: import("maplibre-gl").MapGeoJSONFeature[]; } & EventData>; readonly layerMouseLeave: import("@angular/core").OutputEmitterRef<import("maplibre-gl").MapMouseEvent & { features?: import("maplibre-gl").MapGeoJSONFeature[]; } & EventData>; readonly layerMouseMove: import("@angular/core").OutputEmitterRef<import("maplibre-gl").MapMouseEvent & { features?: import("maplibre-gl").MapGeoJSONFeature[]; } & EventData>; readonly layerMouseOver: import("@angular/core").OutputEmitterRef<import("maplibre-gl").MapMouseEvent & { features?: import("maplibre-gl").MapGeoJSONFeature[]; } & EventData>; readonly layerMouseOut: import("@angular/core").OutputEmitterRef<import("maplibre-gl").MapMouseEvent & { features?: import("maplibre-gl").MapGeoJSONFeature[]; } & EventData>; readonly layerContextMenu: import("@angular/core").OutputEmitterRef<import("maplibre-gl").MapMouseEvent & { features?: import("maplibre-gl").MapGeoJSONFeature[]; } & EventData>; readonly layerTouchStart: import("@angular/core").OutputEmitterRef<import("maplibre-gl").MapTouchEvent & { features?: import("maplibre-gl").MapGeoJSONFeature[]; } & EventData>; readonly layerTouchEnd: import("@angular/core").OutputEmitterRef<import("maplibre-gl").MapTouchEvent & { features?: import("maplibre-gl").MapGeoJSONFeature[]; } & EventData>; readonly layerTouchCancel: import("@angular/core").OutputEmitterRef<import("maplibre-gl").MapTouchEvent & { features?: import("maplibre-gl").MapGeoJSONFeature[]; } & EventData>; private readonly layerAdded; private readonly sourceIdAdded; ngOnInit(): void; ngOnChanges(changes: SimpleChanges): void; ngOnDestroy(): void; private init; static ɵfac: i0.ɵɵFactoryDeclaration<LayerComponent, never>; static ɵcmp: i0.ɵɵ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>; }