BoxStyle | XYZ Maps Documentation

Interface for configuring the visual appearance of Boxes.

Hierarchy

BoxStyle

Index

Properties

Optional altitude

The altitude of the center of the Box in meters. The altitude defines the distance in the vertical direction between the ground plane at 0 meters and the geometry/style. If altitude is set to true, the altitude from the feature's geometry coordinates will be used automatically. If a number is set for altitude, the altitude of the feature's geometry is ignored and the value of "altitude" is used instead. The height must be defined in meters.

defaultvalue: false
experimental

Optional depth

depth: number | StyleValueFunction<number> | StyleZoomRange<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.

example

// 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
}

Optional fill

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

Sets the color to fill the Box.

see: Color for a detailed list of possible supported formats.

Optional height

height: number | StyleValueFunction<number> | StyleZoomRange<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.

example

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

Optional offsetX

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.

example

// offset Box by 8px to the right.
{ type: "Box", zIndex: 0, with: 32, fill: 'red', offsetX: 8}

Optional offsetY

offsetY: number | StyleValueFunction<number> | StyleZoomRange<number>

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

example

// 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"}

Optional offsetZ

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

example

// 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"}

Optional opacity

opacity: number | StyleValueFunction<number> | StyleZoomRange<number>

Defines the opacity of the style. The value must be between 0.0 (fully transparent) and 1.0 (fully opaque).

defaultvalue: 1

Optional scaleByAltitude

scaleByAltitude: boolean | StyleValueFunction<boolean> | StyleZoomRange<boolean>

Scales the size of a style based on the feature's altitude. If it's enabled (true), features closer to the camera will be drawn larger than those farther away. When off (false), the size of the style is always the same size, regardless of its actual altitude, as if it were placed on the ground (altitude 0). This attribute applies to styles of type "Rect", "Image", "Text", "Circle", "Line", "Box", or "Sphere" whose size (width, {@link radius}, strokeWidth) that are using "map" alignment only. If the size attribute is defined in meters, scaleByAltitude is enabled by default, for pixels it is disabled.

defaultvalue: false (pixels), true (meters)
experimental

Optional stroke

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

Sets the stroke color of the Box.

see: Color for a detailed list of possible supported formats.

Optional strokeWidth

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

example

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

type

type: "Box"

Specifies the type of style to render.

width

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

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

example

// define a Box that has a width, height and depth of 32 pixels.
{
    zIndex: 0,
    type: "Box",
    fill: "blue",
    width: 32
}

zIndex

zIndex: number | StyleValueFunction<number> | StyleZoomRange<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.

Optional zLayer

zLayer: number | StyleValueFunction<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 the zLayer depends on the display layer order. The first (lowest) layer has a zLayer value of 1.

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