XYZ Maps Documentation
    Preparing search index...

    Interface LineStyle

    Interface for configuring the visual appearance of Lines.

    interface LineStyle {
        altitude?:
            | number
            | boolean
            | "terrain"
            | StyleValueFunction<number | boolean | "terrain">
            | StyleZoomRange<number | boolean | "terrain">
            | StyleExpression<number | boolean | "terrain">;
        from?:
            | number
            | StyleValueFunction<number>
            | StyleZoomRange<number>
            | StyleExpression<number>;
        offset?:
            | string
            | number
            | StyleZoomRange<string | number>
            | StyleExpression<string | number>
            | StyleValueFunction<string | number>;
        opacity?:
            | number
            | StyleValueFunction<number>
            | StyleZoomRange<number>
            | StyleExpression<number>;
        scaleByAltitude?:
            | boolean
            | StyleValueFunction<boolean>
            | StyleZoomRange<boolean>
            | StyleExpression<boolean>;
        stroke?:
            | Color
            | StyleZoomRange<Color>
            | StyleExpression<Color>
            | StyleValueFunction<Color>;
        strokeDasharray?:
            | "none"
            | (string | number)[]
            | StyleValueFunction<(string | number)[]>
            | StyleZoomRange<(string | number)[]>
            | StyleExpression<(string | number)[]>;
        strokeDashimage?: string;
        strokeLinecap?:
            | string
            | StyleValueFunction<string>
            | StyleZoomRange<string>
            | StyleExpression<string>;
        strokeLinejoin?:
            | string
            | StyleValueFunction<string>
            | StyleZoomRange<string>
            | StyleExpression<string>;
        strokeWidth:
            | string
            | number
            | StyleZoomRange<string | number>
            | StyleExpression<string | number>
            | StyleValueFunction<string | number>;
        to?:
            | number
            | StyleValueFunction<number>
            | StyleZoomRange<number>
            | StyleExpression<number>;
        type: "Line";
        zLayer?: number | StyleValueFunction<number> | StyleExpression<number>;
    }
    Index
    altitude?:
        | number
        | boolean
        | "terrain"
        | StyleValueFunction<number | boolean | "terrain">
        | StyleZoomRange<number | boolean | "terrain">
        | StyleExpression<number | boolean | "terrain">

    Altitude of the Line in meters.

    Describes the vertical distance from the global ground plane (0m) to the Line.

    Supported values:

    • false (default): place at 0m.

    • true: use the altitude (z) from the feature geometry if present, else 0. Not re-aligned to the rendered terrain. If the geometry altitude source differs from the TerrainTileLayer elevation source/resolution, the Line is not clamped to (and may intersect) the rendered terrain, so it can appear slightly above or below the visible surface.

    • number: fixed absolute altitude in meters. Also not adjusted when terrain tiles load; may not perfectly sit on the terrain unless both use exactly the same elevation source, datum and resolution.

    • 'terrain': sample (clamp to) the current terrain surface height. While the terrain tile is not yet loaded (or no terrain layer exists) the altitude is 0 and updates once data becomes available.

    Notes:

    • Use 'terrain' to keep the Line visually seated on the rendered terrain.
    • Use a numeric value for a constant absolute elevation independent of terrain updates.
    • Expect mismatches (floating / sinking) when using true or a fixed number with a different terrain data source.
    false
    @experimental
    from?:
        | number
        | StyleValueFunction<number>
        | StyleZoomRange<number>
        | StyleExpression<number>

    Define the starting position of a segment of the entire line in %. A Segment allows to display and style parts of the entire line individually. The value must be between 0 and 1. The Default is 0.

    from: 0.0 // -\> 0%, the segment has the same starting point as the entire line
    from: 0.5 // -\> 50%, the segment starts in the middle of the entire line
    offset?:
        | string
        | number
        | StyleZoomRange<string | number>
        | StyleExpression<string | number>
        | StyleValueFunction<string | number>

    Offset a line to the left or right side in pixel or meter. A positive values offsets to the right side, a negative value offsets to the left. The side is defined relative to the direction of the line geometry. The default unit is pixels. To define the offset in meters a string that contains the offset value and ends with "m" must be used. Applies to Line style only.

    // offset line by 8px
    { type: "Line", zIndex: 0, stroke:'blue', strokeWidth: 4, offset: 8}

    // offset line by 2m
    { type: "Line", zIndex: 0, stroke:'blue', strokeWidth: 4, offset: "2m"}
    opacity?:
        | number
        | StyleValueFunction<number>
        | StyleZoomRange<number>
        | StyleExpression<number>

    Defines the opacity of the style. The value must be between 0.0 (fully transparent) and 1.0 (fully opaque). It is valid for all style types.

    1
    
    scaleByAltitude?:
        | boolean
        | StyleValueFunction<boolean>
        | StyleZoomRange<boolean>
        | StyleExpression<boolean>

    Controls whether a Line's strokeWidth follows perspective at the feature's actual altitude. When disabled, the Line is scaled as if it were at ground level.

    Scaling is enabled by default for meter-based stroke widths and when altitude resolves to "terrain".

    false for pixel stroke widths; true for meter stroke widths or terrain altitude
    @experimental
    stroke?:
        | Color
        | StyleZoomRange<Color>
        | StyleExpression<Color>
        | StyleValueFunction<Color>

    Sets the stroke color of the Line.

    Color for a detailed list of possible supported formats.

    strokeDasharray?:
        | "none"
        | (string | number)[]
        | StyleValueFunction<(string | number)[]>
        | StyleZoomRange<(string | number)[]>
        | StyleExpression<(string | number)[]>

    The strokeDasharray attribute controls the pattern of dashes and gaps used to stroke paths. It's an array of that specify the lengths of alternating dashes and gaps. If an odd number of values is provided, then the list of values is repeated to yield an even number of values. Thus, 5,3,2 is equivalent to 5,3,2,5,3,2. The size of dashes and gaps can be defined in pixel or meter. The default unit for dash and gap size is pixel. In a pattern utilizing both meter and pixel units, only the initial "dash" and "gap" combination is utilized, with the subsequent ones being skipped. To define the size in meters, a string containing the "dash"/"gap" size and ending with "m" must be used.

    // dash and gap size is defined in pixel.
    strokeDasharray: [20,10]
    // dash and gap size is defined in meter.
    strokeDasharray: ["20m","10m"]
    // dash -> 10 meter, gap -> 10 pixel.
    strokeDasharray: ["20m",10] || ["20m","10px"]
    strokeDashimage?: string

    Specifies the URL of the image to be rendered at the positions of the dashes. If strokeDashimage is defined, only the first dash and gap definition of the LineStyle.strokeDasharray pattern is used. The dashimage will be colored with the color defined in stroke.

    strokeLinecap?:
        | string
        | StyleValueFunction<string>
        | StyleZoomRange<string>
        | StyleExpression<string>

    This controls the shape of the ends of lines. there are three possible values for strokeLinecap:

    • "butt" closes the line off with a straight edge that's normal (at 90 degrees) to the direction of the stroke and crosses its end.
    • "square" has essentially the same appearance, but stretches the stroke slightly beyond the actual path. The distance that the stroke goes beyond the path is half the strokeWidth.
    • "round" produces a rounded effect on the end of the stroke. The radius of this curve is also controlled by the strokeWidth. This attribute is valid for Line styles only.

    If "strokeLinecap" is used in combination with "altitude", only "butt" is supported for "strokeLinecap".

    strokeLinejoin?:
        | string
        | StyleValueFunction<string>
        | StyleZoomRange<string>
        | StyleExpression<string>

    The joint where the two segments in a line meet is controlled by the strokeLinejoin attribute, There are three possible values for this attribute:

    • "miter" extends the line slightly beyond its normal width to create a square corner where only one angle is used.
    • "round" creates a rounded line segment.
    • "bevel" creates a new angle to aid in the transition between the two segments. This attribute is valid for Line styles only.

    If "strokeLinejoin" is used in combination with "altitude", the use of "round" is not supported.

    strokeWidth:
        | string
        | number
        | StyleZoomRange<string | number>
        | StyleExpression<string | number>
        | StyleValueFunction<string | number>

    Sets the width of the line. The unit of strokeWidth is defined in pixels. For Polygons that are using PolygonStyle.extrude, the maximum possible strokeWidth is 1.0 pixel. For Styles of type Line the strokeWidth can also be defined in meters by using a string: "${width}m".

    // define a Line that has a with of 1 meter
    {
    zIndex: 0,
    type: "Line",
    stroke: "blue",
    strokeWidth: "1m"
    }
    // define a Line that has a with of 16 pixel
    {
    zIndex: 0,
    type: "Line",
    stroke: "green",
    strokeWidth: "16
    }
    to?:
        | number
        | StyleValueFunction<number>
        | StyleZoomRange<number>
        | StyleExpression<number>

    Define the end position of a segment of the entire line in %. A Segment allows to display and style parts of the entire line individually. The value must be between 0 and 1. The Default is 1.

    to: 0.5 // -\> 50%, the segment ends in the middle of the entire line
    to: 1.0 // -\> 100%, the segment has the same end point as the entire line
    type: "Line"

    Specifies the type of style to render.

    zLayer?: number | StyleValueFunction<number> | StyleExpression<number>

    Indicates drawing order across multiple layers. Styles using zLayer with a high value are rendered on top of zLayers with a low value. If no zLayer is defined, it will fall back to the LayerStyle.zLayer or depend on the display layer order. The first (lowest) layer has a zLayer value of 1.

    {...zLayer: 2, zIndex: 5} will be rendered on top of {...zLayer: 1, zIndex: 10}