XYZ Maps Documentation
    Preparing search index...

    Interface RectStyle

    Interface for configuring the visual appearance of Rectangles.

    interface RectStyle {
        alignment?:
            | "map"
            | "viewport"
            | StyleValueFunction<string>
            | StyleZoomRange<string>
            | StyleExpression<string>;
        altitude?:
            | number
            | boolean
            | "terrain"
            | StyleValueFunction<number | boolean | "terrain">
            | StyleZoomRange<number | boolean | "terrain">
            | StyleExpression<number | boolean | "terrain">;
        anchor?:
            | StyleValueFunction<string>
            | StyleZoomRange<string>
            | StyleExpression<string>
            | "Line"
            | "Coordinate"
            | "Centroid";
        checkLineSpace?:
            | boolean
            | StyleValueFunction<boolean>
            | StyleZoomRange<boolean>
            | StyleExpression<boolean>;
        collide?:
            | boolean
            | StyleValueFunction<boolean>
            | StyleZoomRange<boolean>
            | StyleExpression<boolean>;
        collisionGroup?:
            | string
            | StyleValueFunction<string>
            | StyleZoomRange<string>
            | StyleExpression<string>;
        fill?:
            | Color
            | StyleZoomRange<Color>
            | StyleExpression<Color>
            | StyleValueFunction<Color>;
        height?:
            | number
            | StyleValueFunction<number>
            | StyleZoomRange<number>
            | StyleExpression<number>;
        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>;
        repeat?:
            | number
            | StyleValueFunction<number>
            | StyleZoomRange<number>
            | StyleExpression<number>;
        rotation?:
            | number
            | StyleValueFunction<number>
            | StyleZoomRange<number>
            | StyleExpression<number>;
        scaleByAltitude?:
            | boolean
            | StyleValueFunction<boolean>
            | StyleZoomRange<boolean>
            | StyleExpression<boolean>;
        stroke?:
            | Color
            | StyleZoomRange<Color>
            | StyleExpression<Color>
            | StyleValueFunction<Color>;
        strokeWidth?:
            | string
            | number
            | StyleZoomRange<string | number>
            | StyleExpression<string | number>
            | StyleValueFunction<string | number>;
        type: "Rect";
        width?:
            | number
            | StyleValueFunction<number>
            | StyleZoomRange<number>
            | StyleExpression<number>;
        zIndex:
            | number
            | StyleValueFunction<number>
            | StyleZoomRange<number>
            | StyleExpression<number>;
        zLayer?: number | StyleValueFunction<number> | StyleExpression<number>;
    }
    Index
    alignment?:
        | "map"
        | "viewport"
        | StyleValueFunction<string>
        | StyleZoomRange<string>
        | StyleExpression<string>

    Alignment for styles of type "Rect". Possible values are: "map" and "viewport". "map" aligns to the plane of the map and "viewport" aligns to the plane of the viewport/screen. Default alignment for Text based on point geometries is "viewport" while "map" is the default for line geometries.

    altitude?:
        | number
        | boolean
        | "terrain"
        | StyleValueFunction<number | boolean | "terrain">
        | StyleZoomRange<number | boolean | "terrain">
        | StyleExpression<number | boolean | "terrain">

    Altitude of the Rectangle center in meters.

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

    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 Rectangle 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 Rectangle 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
    anchor?:
        | StyleValueFunction<string>
        | StyleZoomRange<string>
        | StyleExpression<string>
        | "Line"
        | "Coordinate"
        | "Centroid"

    Sets the anchor point for rectangle style used with Line or Polygon geometry.

    Possible values for Line geometry are "Coordinate" and "Line".

    • "Coordinate": the respective style is displayed at each coordinate of the polyline.
    • "Line": the respective style is displayed on the shape of the polyline when there is enough space. See checkLineSpace to disable the space check.

    Possible values for Polygon geometry are "Center" and "Centroid".

    • "Center": the center of the bounding box of the polygon.
    • "Centroid": the geometric centroid of the polygon geometry.
    For Polygon geometry the default is "Center". For Line geometry the default is "Coordinate".
    
    checkLineSpace?:
        | boolean
        | StyleValueFunction<boolean>
        | StyleZoomRange<boolean>
        | StyleExpression<boolean>

    Enable or disable the space check for point styles on line geometries. Only applies to "Rect" styles with anchor set to "Line". If check checkLineSpace is enabled the respective style is only displayed if there is enough space on the line, otherwise it is not displayed.

    true
    
    collide?:
        | boolean
        | StyleValueFunction<boolean>
        | StyleZoomRange<boolean>
        | StyleExpression<boolean>

    Enable or disable collision detection. If the collision detection is enabled for multiple Styles within the same StyleGroup, the respective Styles are handled as a single Object ("CollisionGroup") where the combined bounding-box is determined automatically.

    • true: collision are allowed, Collision detection is disabled.
    • false: avoid collisions, Collision detection is enabled.
    true
    
    collisionGroup?:
        | string
        | StyleValueFunction<string>
        | StyleZoomRange<string>
        | StyleExpression<string>

    Enables collision detection and combines all styles of a StyleGroup with the same "CollisionGroup" into a single logical object for collision detection.

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

    Sets the color to fill the Rectangle.

    Color for a detailed list of possible supported formats.

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

    Height of the REctangle in pixels. The unit of height is defined in pixels. For styles of type "Rect" the height can also be defined in meters by using a string: "${width}m". If the height is not explicitly defined, the value of the width is used as the height.

    // define a Rect that has a width of 2 meter and a height of 1 meter.
    {
    zIndex: 0,
    type: "Rect",
    fill: "blue",
    width: "2m",
    height: "1m"
    }
    // define a Rect that has a width of 20 pixel and a height of 28 pixel.
    {
    zIndex: 0,
    type: "Rect",
    fill: "green",
    width: 20,
    height: 28
    }
    offsetX?:
        | string
        | number
        | StyleZoomRange<string | number>
        | StyleExpression<string | number>
        | StyleValueFunction<string | number>

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

    // offset Rectangle by 1m to the left
    { type: "Rect", zIndex: 0, fill:'blue', width: 24, offsetX: "-1m"}
    offsetY?:
        | number
        | StyleValueFunction<number>
        | StyleZoomRange<number>
        | StyleExpression<number>

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

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

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

    // offset rectangle by 1m to the top
    { type: "Rect", zIndex: 0, fill:'blue', radius: 24, 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). It is valid for all style types.

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

    Minimum distance in pixels between repeated style-groups on line geometries. Applies per tile only.

    256 (pixels)
    
    rotation?:
        | number
        | StyleValueFunction<number>
        | StyleZoomRange<number>
        | StyleExpression<number>

    Rotate the Rectangle by the angle in degrees.

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

    Controls perspective scaling of a Rectangle's width and height based on altitude. When disabled, its dimensions are scaled as if the Rectangle were at ground level. This applies only when alignment is "map"; viewport-aligned Rectangles are unaffected.

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

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

    Sets the stroke color of the Rectangle.

    Color for a detailed list of possible supported formats.

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

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

    // define a Rectangle that has a strokeWidth of 2 pixels
    {
    zIndex: 0,
    type: "Rect",
    stroke: "blue",
    strokeWidth: 2,
    width: 32
    }
    type: "Rect"

    Specifies the type of style to render.

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

    Width of the style in pixels. The default unit of width is defined in pixels. For styles of type "Rect" the width can also be defined in meters by using a string: "${width}m".

    // define a Rect that has a width (and height) of 2.2 meter
    {
    zIndex: 0,
    type: "Rect",
    fill: "blue",
    width: "2.2m"
    }
    // define a Rect that has a width (and height) of 16 pixel
    {
    zIndex: 0,
    type: "Rect",
    fill: "green",
    width: 16
    }
    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}