XYZ Maps Documentation
    Preparing search index...

    Interface BoxStyle

    Interface for configuring the visual appearance of Boxes.

    interface BoxStyle {
        altitude?:
            | number
            | boolean
            | "terrain"
            | StyleValueFunction<number | boolean | "terrain">
            | StyleZoomRange<number | boolean | "terrain">
            | StyleExpression<number | boolean | "terrain">;
        depth?:
            | number
            | StyleValueFunction<number>
            | StyleZoomRange<number>
            | StyleExpression<number>;
        emissive?:
            | Color
            | StyleZoomRange<Color>
            | StyleExpression<Color>
            | StyleValueFunction<Color>;
        fill?:
            | Color
            | StyleZoomRange<Color>
            | StyleExpression<Color>
            | StyleValueFunction<Color>;
        fillIntensity?: number;
        height?:
            | number
            | StyleValueFunction<number>
            | StyleZoomRange<number>
            | StyleExpression<number>;
        light?: string;
        offsetX?:
            | string
            | number
            | StyleZoomRange<string | number>
            | StyleExpression<string | number>
            | StyleValueFunction<string | number>;
        offsetY?:
            | number
            | StyleValueFunction<number>
            | StyleZoomRange<number>
            | StyleExpression<number>;
        offsetZ?:
            | 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>;
        shininess?: number;
        specular?:
            | Color
            | StyleZoomRange<Color>
            | StyleExpression<Color>
            | StyleValueFunction<Color>;
        stroke?:
            | Color
            | StyleZoomRange<Color>
            | StyleExpression<Color>
            | StyleValueFunction<Color>;
        strokeWidth?:
            | string
            | number
            | StyleValueFunction<number>
            | StyleZoomRange<string | number>
            | StyleExpression<string | number>;
        type: "Box";
        width:
            | number
            | StyleValueFunction<number>
            | StyleZoomRange<number>
            | StyleExpression<number>;
        zIndex:
            | number
            | StyleValueFunction<number>
            | StyleZoomRange<number>
            | StyleExpression<number>;
        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 Box center in meters.

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

    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 source/resolution, the Box can appear slightly above or below the visible terrain 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 Box visually seated on the rendered terrain.
    • Use a numeric value for a constant absolute elevation independent of terrain updates.
    • To position something N meters above terrain: use 'terrain' plus offsetZ (e.g. offsetZ: '5m').
    • Expect mismatches (floating / sinking) when using true or a fixed number with a different terrain data source.
    false
    @experimental
    depth?:
        | number
        | StyleValueFunction<number>
        | StyleZoomRange<number>
        | StyleExpression<number>

    The depth of the Box. The depth defines the length of the edges of a "Box" parallel to the Z axis. If the depth is not explicitly defined, the value of the "width" is used as the height.

    // define a Box that has a width, height and depth of 16px
    {
    zIndex: 0,
    type: "Box",
    stroke: "blue",
    fill: "red",
    width: 16,
    height: 16,
    depth: 16
    }
    emissive?:
        | Color
        | StyleZoomRange<Color>
        | StyleExpression<Color>
        | StyleValueFunction<Color>

    Sets the emissive color of the "Box", giving it a glow effect.

    Color for a detailed list of possible supported formats.

    fill?:
        | Color
        | StyleZoomRange<Color>
        | StyleExpression<Color>
        | StyleValueFunction<Color>

    Sets the color to fill the Box.

    Color for a detailed list of possible supported formats.

    fillIntensity?: number

    Controls the intensity of the fill color under directional lighting.

    fillIntensity determines how much the "Box"'s fill color is affected by the directional lighting in the scene. A higher value increases the intensity of the fill color, making it more vibrant under strong lighting, while a lower value reduces the effect, resulting in a more muted color.

    The value should range from 0 to 1, where 0 means no color intensity and 1 represents full intensity.

    1
    
    height?:
        | number
        | StyleValueFunction<number>
        | StyleZoomRange<number>
        | StyleExpression<number>

    The Height of the Box. The unit of height is defined in pixels. If the height is not explicitly defined, the value of the width is used as the height.

    // define a Box that have a width of 32px and a height of 48px.
    {
    zIndex: 0,
    type: "Box",
    fill: "blue",
    width: 32,
    height: 48
    }
    light?: string

    Specifies the name of the light group to use for illuminating specific features on a layer. This property must reference a key corresponding to a light group defined in LayerStyle.lights. A light group consists of lighting sources such as ambient or directional lights that affect the appearance of features.

    If light is not defined, the default light group "defaultLight" will be used to illuminate the layer's features.

    LayerStyle.lights for defining and referencing available light groups.

    "defaultLight"
    
    offsetX?:
        | string
        | number
        | StyleZoomRange<string | number>
        | StyleExpression<string | number>
        | StyleValueFunction<string | number>

    Offset the Box in pixels on x-axis. A positive value offsets to the right, a negative value to the left. The default unit is pixels.

    // offset Box by 8px to the right.
    { type: "Box", zIndex: 0, with: 32, fill: 'red', offsetX: 8}
    offsetY?:
        | number
        | StyleValueFunction<number>
        | StyleZoomRange<number>
        | StyleExpression<number>

    Offset the Box in pixels on y-axis. A positive value offsetY offsets downwards, a negative value upwards. The default unit is pixels.

    // offset Box by 8px to the bottom
    { type: "Box", zIndex: 0, fill: 'red', width:32, offsetY: 8}

    // offset Box by 1m to the top
    { type: "Box", zIndex: 0, fill: 'blue', width: 32, offsetY: "-1m"}
    offsetZ?:
        | string
        | number
        | StyleZoomRange<string | number>
        | StyleExpression<string | number>
        | StyleValueFunction<string | number>

    Offset the Box in pixels on z-axis. A positive value offsets up, a negative value down. The default unit is pixels.

    // offset Image by 8px to the top.
    { type: "Box", zIndex: 0, fill: 'red', width:32, offsetZ: 8}

    // offset Circle by 1m to the top
    { type: "Box", zIndex: 0, fill: 'red', width:32, offsetZ: "1m"}
    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).

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

    Controls perspective scaling of a Box's width, height, and depth based on altitude. When enabled, the Box's dimensions reflect its actual altitude. When disabled, they are scaled as if the Box were at ground level.

    Box dimensions are pixel-based, so scaling is disabled by default and enabled by default when altitude resolves to "terrain".

    false for pixel dimensions; true for terrain altitude
    @experimental
    shininess?: number

    Sets the shininess of the "Box", determining how glossy its surface appears. A higher value makes the "Box" surface more reflective.

    • Effect: The shininess value controls the size and intensity of the specular highlight, which is colored by the specular property.
    • Specular Dependency: The shininess property enhances the effect of the specular color. If specular is not set, shininess has no visible effect.
    • Range: The shininess value typically ranges from 0 to 128.
    • Low Values (0-10): Produce a wide, diffused highlight, resulting in a matte or dull appearance.
    • High Values (50-128): Produce a small, intense highlight, resulting in a glossy or shiny appearance.
    32
    
    specular?:
        | Color
        | StyleZoomRange<Color>
        | StyleExpression<Color>
        | StyleValueFunction<Color>

    Sets the specular color of the "Box", affecting how it reflects light.

    • Effect: The specular property determines the color of the light reflection, while the shininess value controls the intensity and size of the reflection.
    • Shininess Dependency: If specular is set and shininess is not explicitly set, the default shininess value will be used to control the reflection's appearance.

    Color for a detailed list of possible supported formats.

    stroke?:
        | Color
        | StyleZoomRange<Color>
        | StyleExpression<Color>
        | StyleValueFunction<Color>

    Sets the stroke color of the Box.

    Color for a detailed list of possible supported formats.

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

    Sets the width of the stroke. The unit of strokeWidth is defined in pixels.

    // define a red filled Box that with a blue stroke of 2px width.
    {
    zIndex: 0,
    type: "Box",
    fill: "red",
    stroke: "blue",
    strokeWidth: "2
    }
    type: "Box"

    Specifies the type of style to render.

    width:
        | number
        | StyleValueFunction<number>
        | StyleZoomRange<number>
        | StyleExpression<number>

    The Width of the Box. The unit of width is defined in pixels.

    // define a Box that has a width, height and depth of 32 pixels.
    {
    zIndex: 0,
    type: "Box",
    fill: "blue",
    width: 32
    }
    zIndex:
        | number
        | StyleValueFunction<number>
        | StyleZoomRange<number>
        | StyleExpression<number>

    Indicates the drawing order within a layer. Styles with larger zIndex value are rendered above those with smaller values. The zIndex is defined relative to the "zLayer" property. If "zLayer" is defined all zIndex values are relative to the "zLayer" value.

    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}