Class LayerComponent

mgl-layer - a layer component

See

Example

...
<mgl-map ...>
  <mgl-layer
    id="state-borders"
    type="line"
    [source]="states"
    [paint]="{
      'line-color': '#627BC1',
      'line-width': 2
    }"
  ></mgl-layer>
</mgl-map>

Implements

OnInit
OnDestroy
OnChanges
LayerEvents

Constructors

constructor

new LayerComponent(): LayerComponent
Returns LayerComponent

Properties

`Readonly`before

before: InputSignal<undefined | string> = ...

`Readonly`filter

filter: InputSignal<undefined | FilterSpecification> = ...

`Readonly`id

id: InputSignal<string> = ...

Init input

`Readonly`layerClick

layerClick: OutputEmitterRef<MapMouseEvent & {
features?: MapGeoJSONFeature[];
} & EventData> = ...

`Readonly`layerContextMenu

layerContextMenu: OutputEmitterRef<MapMouseEvent & {
features?: MapGeoJSONFeature[];
} & EventData> = ...

`Readonly`layerDblClick

layerDblClick: OutputEmitterRef<MapMouseEvent & {
features?: MapGeoJSONFeature[];
} & EventData> = ...

`Readonly`layerMouseDown

layerMouseDown: OutputEmitterRef<MapMouseEvent & {
features?: MapGeoJSONFeature[];
} & EventData> = ...

`Readonly`layerMouseEnter

layerMouseEnter: OutputEmitterRef<MapMouseEvent & {
features?: MapGeoJSONFeature[];
} & EventData> = ...

`Readonly`layerMouseLeave

layerMouseLeave: OutputEmitterRef<MapMouseEvent & {
features?: MapGeoJSONFeature[];
} & EventData> = ...

`Readonly`layerMouseMove

layerMouseMove: OutputEmitterRef<MapMouseEvent & {
features?: MapGeoJSONFeature[];
} & EventData> = ...

`Readonly`layerMouseOut

layerMouseOut: OutputEmitterRef<MapMouseEvent & {
features?: MapGeoJSONFeature[];
} & EventData> = ...

`Readonly`layerMouseOver

layerMouseOver: OutputEmitterRef<MapMouseEvent & {
features?: MapGeoJSONFeature[];
} & EventData> = ...

`Readonly`layerMouseUp

layerMouseUp: OutputEmitterRef<MapMouseEvent & {
features?: MapGeoJSONFeature[];
} & EventData> = ...

`Readonly`layerTouchCancel

layerTouchCancel: OutputEmitterRef<MapTouchEvent & {
features?: MapGeoJSONFeature[];
} & EventData> = ...

`Readonly`layerTouchEnd

layerTouchEnd: OutputEmitterRef<MapTouchEvent & {
features?: MapGeoJSONFeature[];
} & EventData> = ...

`Readonly`layerTouchStart

layerTouchStart: OutputEmitterRef<MapTouchEvent & {
features?: MapGeoJSONFeature[];
} & EventData> = ...

`Readonly`layout

layout: InputSignal<
    | undefined
    | {
        visibility?: "none" | "visible";
    }
    | {
        fill-sort-key?: DataDrivenPropertyValueSpecification<number>;
        visibility?: "none" | "visible";
    }
    | {
        visibility?: "none" | "visible";
    }
    | {
        line-cap?: PropertyValueSpecification<"round" | "butt" | "square">;
        line-join?: DataDrivenPropertyValueSpecification<"round" | "bevel" | "miter">;
        line-miter-limit?: PropertyValueSpecification<number>;
        line-round-limit?: PropertyValueSpecification<number>;
        line-sort-key?: DataDrivenPropertyValueSpecification<number>;
        visibility?: "none" | "visible";
    }
    | {
        icon-allow-overlap?: PropertyValueSpecification<boolean>;
        icon-anchor?: DataDrivenPropertyValueSpecification<
            | "center"
            | "top"
            | "bottom"
            | "left"
            | "right"
            | "top-left"
            | "top-right"
            | "bottom-left"
            | "bottom-right">;
        icon-ignore-placement?: PropertyValueSpecification<boolean>;
        icon-image?: DataDrivenPropertyValueSpecification<string>;
        icon-keep-upright?: PropertyValueSpecification<boolean>;
        icon-offset?: DataDrivenPropertyValueSpecification<[number, number]>;
        icon-optional?: PropertyValueSpecification<boolean>;
        icon-overlap?: PropertyValueSpecification<"never" | "always" | "cooperative">;
        icon-padding?: DataDrivenPropertyValueSpecification<PaddingSpecification>;
        icon-pitch-alignment?: PropertyValueSpecification<"map" | "viewport" | "auto">;
        icon-rotate?: DataDrivenPropertyValueSpecification<number>;
        icon-rotation-alignment?: PropertyValueSpecification<"map" | "viewport" | "auto">;
        icon-size?: DataDrivenPropertyValueSpecification<number>;
        icon-text-fit?: PropertyValueSpecification<
            | "none"
            | "width"
            | "height"
            | "both">;
        icon-text-fit-padding?: PropertyValueSpecification<[number, number, number, number]>;
        symbol-avoid-edges?: PropertyValueSpecification<boolean>;
        symbol-placement?: PropertyValueSpecification<"point" | "line" | "line-center">;
        symbol-sort-key?: DataDrivenPropertyValueSpecification<number>;
        symbol-spacing?: PropertyValueSpecification<number>;
        symbol-z-order?: PropertyValueSpecification<"auto" | "source" | "viewport-y">;
        text-allow-overlap?: PropertyValueSpecification<boolean>;
        text-anchor?: DataDrivenPropertyValueSpecification<
            | "center"
            | "top"
            | "bottom"
            | "left"
            | "right"
            | "top-left"
            | "top-right"
            | "bottom-left"
            | "bottom-right">;
        text-field?: DataDrivenPropertyValueSpecification<string>;
        text-font?: DataDrivenPropertyValueSpecification<string[]>;
        text-ignore-placement?: PropertyValueSpecification<boolean>;
        text-justify?: DataDrivenPropertyValueSpecification<
            | "center"
            | "left"
            | "right"
            | "auto">;
        text-keep-upright?: PropertyValueSpecification<boolean>;
        text-letter-spacing?: DataDrivenPropertyValueSpecification<number>;
        text-line-height?: PropertyValueSpecification<number>;
        text-max-angle?: PropertyValueSpecification<number>;
        text-max-width?: DataDrivenPropertyValueSpecification<number>;
        text-offset?: DataDrivenPropertyValueSpecification<[number, number]>;
        text-optional?: PropertyValueSpecification<boolean>;
        text-overlap?: PropertyValueSpecification<"never" | "always" | "cooperative">;
        text-padding?: PropertyValueSpecification<number>;
        text-pitch-alignment?: PropertyValueSpecification<"map" | "viewport" | "auto">;
        text-radial-offset?: DataDrivenPropertyValueSpecification<number>;
        text-rotate?: DataDrivenPropertyValueSpecification<number>;
        text-rotation-alignment?: PropertyValueSpecification<
            | "map"
            | "viewport"
            | "auto"
            | "viewport-glyph">;
        text-size?: DataDrivenPropertyValueSpecification<number>;
        text-transform?: DataDrivenPropertyValueSpecification<"none" | "uppercase" | "lowercase">;
        text-variable-anchor?: PropertyValueSpecification<(
            | "center"
            | "top"
            | "bottom"
            | "left"
            | "right"
            | "top-left"
            | "top-right"
            | "bottom-left"
            | "bottom-right")[]>;
        text-variable-anchor-offset?: DataDrivenPropertyValueSpecification<VariableAnchorOffsetCollectionSpecification>;
        text-writing-mode?: PropertyValueSpecification<("horizontal" | "vertical")[]>;
        visibility?: "none" | "visible";
    }
    | {
        visibility?: "none" | "visible";
    }
    | {
        circle-sort-key?: DataDrivenPropertyValueSpecification<number>;
        visibility?: "none" | "visible";
    }
    | {
        visibility?: "none" | "visible";
    }
    | {
        visibility?: "none" | "visible";
    }> = ...

`Readonly`maxzoom

maxzoom: InputSignal<undefined | number> = ...

`Readonly`metadata

metadata: InputSignal<unknown> = ...

`Readonly`minzoom

minzoom: InputSignal<undefined | number> = ...

`Readonly`paint

paint: InputSignal<
    | undefined
    | {
        background-color?: PropertyValueSpecification<string>;
        background-opacity?: PropertyValueSpecification<number>;
        background-pattern?: PropertyValueSpecification<string>;
    }
    | {
        fill-antialias?: PropertyValueSpecification<boolean>;
        fill-color?: DataDrivenPropertyValueSpecification<string>;
        fill-opacity?: DataDrivenPropertyValueSpecification<number>;
        fill-outline-color?: DataDrivenPropertyValueSpecification<string>;
        fill-pattern?: DataDrivenPropertyValueSpecification<string>;
        fill-translate?: PropertyValueSpecification<[number, number]>;
        fill-translate-anchor?: PropertyValueSpecification<"map" | "viewport">;
    }
    | {
        fill-extrusion-base?: DataDrivenPropertyValueSpecification<number>;
        fill-extrusion-color?: DataDrivenPropertyValueSpecification<string>;
        fill-extrusion-height?: DataDrivenPropertyValueSpecification<number>;
        fill-extrusion-opacity?: PropertyValueSpecification<number>;
        fill-extrusion-pattern?: DataDrivenPropertyValueSpecification<string>;
        fill-extrusion-translate?: PropertyValueSpecification<[number, number]>;
        fill-extrusion-translate-anchor?: PropertyValueSpecification<"map" | "viewport">;
        fill-extrusion-vertical-gradient?: PropertyValueSpecification<boolean>;
    }
    | {
        line-blur?: DataDrivenPropertyValueSpecification<number>;
        line-color?: DataDrivenPropertyValueSpecification<string>;
        line-dasharray?: PropertyValueSpecification<number[]>;
        line-gap-width?: DataDrivenPropertyValueSpecification<number>;
        line-gradient?: ExpressionSpecification;
        line-offset?: DataDrivenPropertyValueSpecification<number>;
        line-opacity?: DataDrivenPropertyValueSpecification<number>;
        line-pattern?: DataDrivenPropertyValueSpecification<string>;
        line-translate?: PropertyValueSpecification<[number, number]>;
        line-translate-anchor?: PropertyValueSpecification<"map" | "viewport">;
        line-width?: DataDrivenPropertyValueSpecification<number>;
    }
    | {
        icon-color?: DataDrivenPropertyValueSpecification<string>;
        icon-halo-blur?: DataDrivenPropertyValueSpecification<number>;
        icon-halo-color?: DataDrivenPropertyValueSpecification<string>;
        icon-halo-width?: DataDrivenPropertyValueSpecification<number>;
        icon-opacity?: DataDrivenPropertyValueSpecification<number>;
        icon-translate?: PropertyValueSpecification<[number, number]>;
        icon-translate-anchor?: PropertyValueSpecification<"map" | "viewport">;
        text-color?: DataDrivenPropertyValueSpecification<string>;
        text-halo-blur?: DataDrivenPropertyValueSpecification<number>;
        text-halo-color?: DataDrivenPropertyValueSpecification<string>;
        text-halo-width?: DataDrivenPropertyValueSpecification<number>;
        text-opacity?: DataDrivenPropertyValueSpecification<number>;
        text-translate?: PropertyValueSpecification<[number, number]>;
        text-translate-anchor?: PropertyValueSpecification<"map" | "viewport">;
    }
    | {
        raster-brightness-max?: PropertyValueSpecification<number>;
        raster-brightness-min?: PropertyValueSpecification<number>;
        raster-contrast?: PropertyValueSpecification<number>;
        raster-fade-duration?: PropertyValueSpecification<number>;
        raster-hue-rotate?: PropertyValueSpecification<number>;
        raster-opacity?: PropertyValueSpecification<number>;
        raster-resampling?: PropertyValueSpecification<"linear" | "nearest">;
        raster-saturation?: PropertyValueSpecification<number>;
    }
    | {
        circle-blur?: DataDrivenPropertyValueSpecification<number>;
        circle-color?: DataDrivenPropertyValueSpecification<string>;
        circle-opacity?: DataDrivenPropertyValueSpecification<number>;
        circle-pitch-alignment?: PropertyValueSpecification<"map" | "viewport">;
        circle-pitch-scale?: PropertyValueSpecification<"map" | "viewport">;
        circle-radius?: DataDrivenPropertyValueSpecification<number>;
        circle-stroke-color?: DataDrivenPropertyValueSpecification<string>;
        circle-stroke-opacity?: DataDrivenPropertyValueSpecification<number>;
        circle-stroke-width?: DataDrivenPropertyValueSpecification<number>;
        circle-translate?: PropertyValueSpecification<[number, number]>;
        circle-translate-anchor?: PropertyValueSpecification<"map" | "viewport">;
    }
    | {
        heatmap-color?: ExpressionSpecification;
        heatmap-intensity?: PropertyValueSpecification<number>;
        heatmap-opacity?: PropertyValueSpecification<number>;
        heatmap-radius?: DataDrivenPropertyValueSpecification<number>;
        heatmap-weight?: DataDrivenPropertyValueSpecification<number>;
    }
    | {
        hillshade-accent-color?: PropertyValueSpecification<string>;
        hillshade-exaggeration?: PropertyValueSpecification<number>;
        hillshade-highlight-color?: PropertyValueSpecification<string>;
        hillshade-illumination-anchor?: PropertyValueSpecification<"map" | "viewport">;
        hillshade-illumination-direction?: PropertyValueSpecification<number>;
        hillshade-shadow-color?: PropertyValueSpecification<string>;
    }> = ...

`Readonly`removeSource

removeSource: InputSignal<undefined | boolean> = ...

A flag to enable removeSource clean up functionality

Init input

`Readonly`source

source: InputSignal<undefined | string> = ...

`Readonly`sourceLayer

sourceLayer: InputSignal<undefined | string> = ...

`Readonly`type

Methods

ngOnChanges

ngOnChanges(changes): void
A callback method that is invoked immediately after the default change detector has checked data-bound properties if at least one has changed, and before the view and content children are checked.
Parameters
- changes: SimpleChanges
  The changed properties.
Returns void
Implementation of OnChanges.ngOnChanges
- Defined in projects/ngx-maplibre-gl/src/lib/layer/layer.component.ts:114

ngOnDestroy

ngOnDestroy(): void
A callback method that performs custom clean-up, invoked immediately before a directive, pipe, or service instance is destroyed.

Returns void
Implementation of OnDestroy.ngOnDestroy
- Defined in projects/ngx-maplibre-gl/src/lib/layer/layer.component.ts:148

ngOnInit

ngOnInit(): void
A callback method that is invoked immediately after the default change detector has checked the directive's data-bound properties for the first time, and before any of the view or content children have been checked. It is invoked only once when the directive is instantiated.

Returns void
Implementation of OnInit.ngOnInit
- Defined in projects/ngx-maplibre-gl/src/lib/layer/layer.component.ts:99

Class LayerComponent

See

Example

Implements

Index

Constructors

Properties

Methods

Constructors

constructor

Returns LayerComponent

Properties

Readonlybefore

Readonlyfilter

Readonlyid

ReadonlylayerClick

ReadonlylayerContextMenu

ReadonlylayerDblClick

ReadonlylayerMouseDown

ReadonlylayerMouseEnter

ReadonlylayerMouseLeave

ReadonlylayerMouseMove

ReadonlylayerMouseOut

ReadonlylayerMouseOver

ReadonlylayerMouseUp

ReadonlylayerTouchCancel

ReadonlylayerTouchEnd

ReadonlylayerTouchStart

Readonlylayout

Readonlymaxzoom

Readonlymetadata

Readonlyminzoom

Readonlypaint

ReadonlyremoveSource

Readonlysource

ReadonlysourceLayer

Readonlytype

Methods

ngOnChanges

Parameters

Returns void

ngOnDestroy

Returns void

ngOnInit

Returns void

Settings

On This Page

`Readonly`before

`Readonly`filter

`Readonly`id

`Readonly`layerClick

`Readonly`layerContextMenu

`Readonly`layerDblClick

`Readonly`layerMouseDown

`Readonly`layerMouseEnter

`Readonly`layerMouseLeave

`Readonly`layerMouseMove

`Readonly`layerMouseOut

`Readonly`layerMouseOver

`Readonly`layerMouseUp

`Readonly`layerTouchCancel

`Readonly`layerTouchEnd

`Readonly`layerTouchStart

`Readonly`layout

`Readonly`maxzoom

`Readonly`metadata

`Readonly`minzoom

`Readonly`paint

`Readonly`removeSource

`Readonly`source

`Readonly`sourceLayer

`Readonly`type