@maplibre/ngx-maplibre-gl

    Class LayerComponent

    mgl-layer - a layer component

    layers

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

    Implements

    Index

    Constructors

    Properties

    before: InputSignal<undefined | string> = ...
    filter: InputSignal<undefined | FilterSpecification> = ...
    id: InputSignal<string> = ...

    Init input

    layerClick: OutputEmitterRef<
        MapMouseEvent & { features?: MapGeoJSONFeature[] } & EventData,
    > = ...
    layerContextMenu: OutputEmitterRef<
        MapMouseEvent & { features?: MapGeoJSONFeature[] } & EventData,
    > = ...
    layerDblClick: OutputEmitterRef<
        MapMouseEvent & { features?: MapGeoJSONFeature[] } & EventData,
    > = ...
    layerMouseDown: OutputEmitterRef<
        MapMouseEvent & { features?: MapGeoJSONFeature[] } & EventData,
    > = ...
    layerMouseEnter: OutputEmitterRef<
        MapMouseEvent & { features?: MapGeoJSONFeature[] } & EventData,
    > = ...
    layerMouseLeave: OutputEmitterRef<
        MapMouseEvent & { features?: MapGeoJSONFeature[] } & EventData,
    > = ...
    layerMouseMove: OutputEmitterRef<
        MapMouseEvent & { features?: MapGeoJSONFeature[] } & EventData,
    > = ...
    layerMouseOut: OutputEmitterRef<
        MapMouseEvent & { features?: MapGeoJSONFeature[] } & EventData,
    > = ...
    layerMouseOver: OutputEmitterRef<
        MapMouseEvent & { features?: MapGeoJSONFeature[] } & EventData,
    > = ...
    layerMouseUp: OutputEmitterRef<
        MapMouseEvent & { features?: MapGeoJSONFeature[] } & EventData,
    > = ...
    layerTouchCancel: OutputEmitterRef<
        MapTouchEvent & { features?: MapGeoJSONFeature[] } & EventData,
    > = ...
    layerTouchEnd: OutputEmitterRef<
        MapTouchEvent & { features?: MapGeoJSONFeature[] } & EventData,
    > = ...
    layerTouchStart: OutputEmitterRef<
        MapTouchEvent & { features?: MapGeoJSONFeature[] } & EventData,
    > = ...
    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<
                "source"
                | "auto"
                | "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" }
        | { visibility?: "none" | "visible" },
    > = ...
    maxzoom: InputSignal<undefined | number> = ...
    metadata: InputSignal<unknown> = ...
    minzoom: InputSignal<undefined | number> = ...
    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<
                ColorArraySpecification,
            >;
            "hillshade-illumination-altitude"?: PropertyValueSpecification<
                NumberArraySpecification,
            >;
            "hillshade-illumination-anchor"?: PropertyValueSpecification<
                "map"
                | "viewport",
            >;
            "hillshade-illumination-direction"?: PropertyValueSpecification<
                NumberArraySpecification,
            >;
            "hillshade-method"?: PropertyValueSpecification<
                "standard"
                | "basic"
                | "combined"
                | "igor"
                | "multidirectional",
            >;
            "hillshade-shadow-color"?: PropertyValueSpecification<
                ColorArraySpecification,
            >;
        }
        | {
            "color-relief-color"?: ExpressionSpecification;
            "color-relief-opacity"?: PropertyValueSpecification<number>;
        },
    > = ...
    removeSource: InputSignal<undefined | boolean> = ...

    A flag to enable removeSource clean up functionality

    Init input

    source: InputSignal<undefined | string> = ...
    sourceLayer: InputSignal<undefined | string> = ...
    type: InputSignal<
        | "symbol"
        | "fill"
        | "line"
        | "circle"
        | "heatmap"
        | "fill-extrusion"
        | "raster"
        | "hillshade"
        | "color-relief"
        | "background",
    > = ...

    Methods

    • 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

    • 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

    MMNEPVFCICPMFPCPTTAAATR