A LineStyle describes how the outline of an object should be rendered.

A LineStyle is typically embedded into a ShapeStyle.

Example of how to use a simple line style for painting:

var shapeStyle = {
stroke: {
color: "rgb(100, 170, 220)",
width: 4 // pixels
}
};
geoCanvas.drawShape(shape, shapeStyle);
interface LineStyle {
    beginMarker?: LineMarker;
    bloom?: BloomStyle;
    color?: string;
    dash?: number[];
    dashOffset?: number;
    endMarker?: LineMarker;
    uom?: UnitOfMeasure;
    width?: number;
}

Properties

beginMarker?: LineMarker

Adds a marker at the beginning of a line. This property is optional.

Lines with a begin marker use complex stroking under the hood. Because complex strokes are always draped on 3D maps, that means a line with this option will always be draped as well.

bloom?: BloomStyle

Adds a BloomEffect to the line.

Bloom is only supported on WebGL maps.

Since

2022.1

color?: string

The stroke color as a CSS color string. For example "rgb(125, 125, 125)" or "rgba(125, 125, 125, 0.5)".

dash?: number[]

The dashing pattern of the stroke. A dashing pattern is an array that defines the dash lengths and gap lengths of the dashing pattern. Elements at even positions in the array are dash lengths, elements at odd positions are gap lengths. A length is a positive number. The array should contain an even number of elements. if not, the configured dashing pattern will be concatenated twice to obtain an array with an even number of elements.

For example, a dashing pattern of [10,5,6,5] will result of a dash of 10 units, followed by a gap of five units followed by a dash of 6 units, followed by a gap of 5 units. This pattern will be repeated over the length of the line. The unit of measure is identified by the uom property.

Dashed lines use complex stroking under the hood. Because complex strokes are always draped on 3D maps, that means a line with this option will always be draped as well.

dashOffset?: number

The dash offset defines at what point in the dashing pattern to start the stroke. The dash offset is a number that points to a location in the dashing pattern, expressed in a particular unit of measure (see uom), 0 being the beginning of the pattern. That location defines the point in the dashing pattern that will correspond to the beginning of the line being rendered.

For example, with a dashing pattern of [10, 5] and a dash offset of 7, a line will start with a dash of 3 units, a gap of 5 units, followed by a dash of 10 units, and so on. The unit of measure is identified by the uom property.

Dashed lines use complex stroking under the hood. Because complex strokes are always draped on 3D maps, that means a line with this option will always be draped as well.

endMarker?: LineMarker

Adds a marker at the end of a line. This property is optional.

Lines with an end marker use complex stroking under the hood. Because complex strokes are always draped on 3D maps, that means a line with this option will always be draped as well.

Determines the interpretation of units for style properties that express sizes. Supported UnitOfMeasures are:

  • UnitOfMeasureRegistry.getUnitOfMeasure("Pixels")
  • UnitOfMeasure of type QuantityKindRegistry.getQuantityKind("Length"), for example UnitOfMeasureRegistry.getUnitOfMeasure("Meter")

The unit of measure applies to the width, dash, dashoffset and line markers' size properties. The uom determines the interpretation of the values as pixels or as a ground unit that represents the actual size of real-world objects, like for example meter or foot.

The uom property is only supported on geographically referenced maps. Maps configured with cartesian reference do not support LineStyles with a uom set.

The property is optional and the default value is the Pixel unit.

Example of a line style with a width in meters and an arrow at the start:
var shapeStyle = {
stroke: {
color: "rgb(100, 170, 220)",
width: 40,
uom: UnitOfMeasureRegistry.getUnitOfMeasure("Meter"),
beginMarker: {
size: 100,
type: LineMarkerType.ARROW
}
}
};
geoCanvas.drawShape(shape, shapeStyle);

Since

2019.0

width?: number

The width of the stroke determines how thick the line will be drawn.