OpenLayers v7.3.0 API - Module: ol/style/flat

Type Definitions

FlatCircle{Object}

Circle style properties for rendering point features. At least circle-radius must be provided.

Properties:

Name	Type	Argument	Default	Description
`circle-radius`	number	<optional>		Circle radius.
`circle-fill-color`	Color \| ColorLike	<optional>		The fill color.
`circle-stroke-color`	Color \| ColorLike	<optional>		The stroke color.
`circle-stroke-width`	number	<optional>		Stroke pixel width.
`circle-stroke-line-cap`	CanvasLineCap	<optional>	'round'	Line cap style: `butt`, `round`, or `square`.
`circle-stroke-line-join`	CanvasLineJoin	<optional>	'round'	Line join style: `bevel`, `round`, or `miter`.
`circle-stroke-line-dash`	Array.<number>	<optional>		Line dash pattern.
`circle-stroke-line-dash-offset`	number	<optional>	0	Line dash offset.
`circle-stroke-miter-limit`	number	<optional>	10	Miter limit.
`circle-displacement`	Array.<number>	<optional>	[0,0]	displacement
`circle-scale`	number \| Size	<optional>	1	Scale. A two dimensional scale will produce an ellipse. Unless two dimensional scaling is required a better result may be obtained with an appropriate setting for `circle-radius`.
`circle-rotation`	number	<optional>	0	Rotation in radians (positive rotation clockwise, meaningful only when used in conjunction with a two dimensional scale).
`circle-rotate-with-view`	boolean	<optional>	false	Whether to rotate the shape with the view (meaningful only when used in conjunction with a two dimensional scale).
`circle-declutter-mode`	"declutter" \| "obstacle" \| "none" \| undefined	<optional>		Declutter mode

FlatFill{Object}

Fill style properties applied to polygon features.

Properties:

Name	Type	Argument	Description
`fill-color`	Color \| ColorLike	<optional>	The fill color.

FlatIcon{Object}

Icon style properties applied to point features. One of icon-src or icon-img must be provided to render points with an icon.

Properties:

Name	Type	Argument	Default	Description
`icon-src`	string	<optional>		Image source URI.
`icon-img`	HTMLImageElement \| HTMLCanvasElement	<optional>		Image object for the icon. If the `icon-src` option is not provided then the provided image must already be loaded. And in that case, it is required to provide the size of the image, with the `icon-img-size` option.
`icon-img-size`	Size	<optional>		Image size in pixels. Only required if `icon-img` is set and `icon-src` is not. The provided size needs to match the actual size of the image.
`icon-anchor`	Array.<number>	<optional>	[0.5, 0.5]	Anchor. Default value is the icon center.
`icon-anchor-origin`	IconOrigin	<optional>	'top-left'	Origin of the anchor: `bottom-left`, `bottom-right`, `top-left` or `top-right`.
`icon-anchor-x-units`	IconAnchorUnits	<optional>	'fraction'	Units in which the anchor x value is specified. A value of `'fraction'` indicates the x value is a fraction of the icon. A value of `'pixels'` indicates the x value in pixels.
`icon-anchor-y-units`	IconAnchorUnits	<optional>	'fraction'	Units in which the anchor y value is specified. A value of `'fraction'` indicates the y value is a fraction of the icon. A value of `'pixels'` indicates the y value in pixels.
`icon-color`	Color \| string	<optional>		Color to tint the icon. If not specified, the icon will be left as is.
`icon-cross-origin`	null \| string	<optional>		The `crossOrigin` attribute for loaded images. Note that you must provide a `icon-cross-origin` value if you want to access pixel data with the Canvas renderer. See https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image for more detail.
`icon-offset`	Array.<number>	<optional>	[0, 0]	Offset, which, together with the size and the offset origin, define the sub-rectangle to use from the original icon image.
`icon-displacement`	Array.<number>	<optional>	[0,0]	Displacement of the icon.
`icon-offset-origin`	IconOrigin	<optional>	'top-left'	Origin of the offset: `bottom-left`, `bottom-right`, `top-left` or `top-right`.
`icon-opacity`	number	<optional>	1	Opacity of the icon.
`icon-scale`	number \| Size	<optional>	1	Scale.
`icon-rotation`	number	<optional>	0	Rotation in radians (positive rotation clockwise).
`icon-rotate-with-view`	boolean	<optional>	false	Whether to rotate the icon with the view.
`icon-size`	Size	<optional>		Icon size in pixel. Can be used together with `icon-offset` to define the sub-rectangle to use from the origin (sprite) icon image.
`icon-declutter-mode`	"declutter" \| "obstacle" \| "none" \| undefined	<optional>		Declutter mode

FlatShape{Object}

Regular shape style properties for rendering point features. At least shape-points must be provided.

Properties:

Name	Type	Argument	Default	Description
`shape-points`	number	<optional>		Number of points for stars and regular polygons. In case of a polygon, the number of points is the number of sides.
`shape-fill-color`	Color \| ColorLike	<optional>		The fill color.
`shape-stroke-color`	Color \| ColorLike	<optional>		The stroke color.
`shape-stroke-width`	number	<optional>		Stroke pixel width.
`shape-stroke-line-cap`	CanvasLineCap	<optional>	'round'	Line cap style: `butt`, `round`, or `square`.
`shape-stroke-line-join`	CanvasLineJoin	<optional>	'round'	Line join style: `bevel`, `round`, or `miter`.
`shape-stroke-line-dash`	Array.<number>	<optional>		Line dash pattern.
`shape-stroke-line-dash-offset`	number	<optional>	0	Line dash offset.
`shape-stroke-miter-limit`	number	<optional>	10	Miter limit.
`shape-radius`	number	<optional>		Radius of a regular polygon.
`shape-radius1`	number	<optional>		First radius of a star. Ignored if radius is set.
`shape-radius2`	number	<optional>		Second radius of a star.
`shape-angle`	number	<optional>	0	Shape's angle in radians. A value of 0 will have one of the shape's point facing up.
`shape-displacement`	Array.<number>	<optional>	[0,0]	Displacement of the shape
`shape-rotation`	number	<optional>	0	Rotation in radians (positive rotation clockwise).
`shape-rotate-with-view`	boolean	<optional>	false	Whether to rotate the shape with the view.
`shape-scale`	number \| Size	<optional>	1	Scale. Unless two dimensional scaling is required a better result may be obtained with appropriate settings for `shape-radius`, `shape-radius1` and `shape-radius2`.
`shape-declutter-mode`	"declutter" \| "obstacle" \| "none" \| undefined	<optional>		Declutter mode.

FlatStroke{Object}

Stroke style properties applied to line strings and polygon boundaries. To apply a stroke, at least one of stroke-color or stroke-width must be provided.

Properties:

Name	Type	Argument	Default	Description
`stroke-color`	Color \| ColorLike	<optional>		The stroke color.
`stroke-width`	number	<optional>		Stroke pixel width.
`stroke-line-cap`	CanvasLineCap	<optional>	'round'	Line cap style: `butt`, `round`, or `square`.
`stroke-line-join`	CanvasLineJoin	<optional>	'round'	Line join style: `bevel`, `round`, or `miter`.
`stroke-line-dash`	Array.<number>	<optional>		Line dash pattern.
`stroke-line-dash-offset`	number	<optional>	0	Line dash offset.
`stroke-miter-limit`	number	<optional>	10	Miter limit.

FlatStyle{FlatFill} {FlatStroke} {FlatText} {FlatIcon} {FlatShape} {FlatCircle}

For static styling, the layer.setStyle() method can be called with an object literal that has fill, stroke, text, icon, regular shape, and/or circle properties.

FlatStyleLike{FlatStyle} {Array<FlatStyle>}

A flat style literal or an array of the same.

FlatText{Object}

Label style properties applied to all features. At a minimum, a text-value must be provided.

Properties:

Name	Type	Argument	Default	Description
`text-value`	string \| Array.<string>	<optional>		Text content or rich text content. For plain text provide a string, which can contain line breaks (`\n`). For rich text provide an array of text/font tuples. A tuple consists of the text to render and the font to use (or `''` to use the text style's font). A line break has to be a separate tuple (i.e. `'\n', ''`). Example: `['foo', 'bold 10px sans-serif', ' bar', 'italic 10px sans-serif', ' baz', '']` will yield "foo bar baz". Note: Rich text is not supported for the immediate rendering API.
`text-font`	string	<optional>		Font style as CSS `font` value, see: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/font. Default is `'10px sans-serif'`
`text-max-angle`	number	<optional>	Math.PI/4	When `text-placement` is set to `'line'`, allow a maximum angle between adjacent characters. The expected value is in radians, and the default is 45° (`Math.PI / 4`).
`text-offset-x`	number	<optional>	0	Horizontal text offset in pixels. A positive will shift the text right.
`text-offset-y`	number	<optional>	0	Vertical text offset in pixels. A positive will shift the text down.
`text-overflow`	boolean	<optional>	false	For polygon labels or when `placement` is set to `'line'`, allow text to exceed the width of the polygon at the label position or the length of the path that it follows.
`text-placement`	TextPlacement	<optional>	'point'	Text placement.
`text-repeat`	number	<optional>		Repeat interval in pixels. When set, the text will be repeated at this interval. Only available when `text-placement` is set to `'line'`. Overrides `text-align`.
`text-scale`	number \| Size	<optional>		Scale.
`text-rotate-with-view`	boolean	<optional>	false	Whether to rotate the text with the view.
`text-rotation`	number	<optional>	0	Rotation in radians (positive rotation clockwise).
`text-align`	CanvasTextAlign	<optional>		Text alignment. Possible values: `'left'`, `'right'`, `'center'`, `'end'` or `'start'`. Default is `'center'` for `text-placement: 'point'`. For `text-placement: 'line'`, the default is to let the renderer choose a placement where `text-max-angle` is not exceeded.
`text-justify`	TextJustify	<optional>		Text justification within the text box. If not set, text is justified towards the `textAlign` anchor. Otherwise, use options `'left'`, `'center'`, or `'right'` to justify the text within the text box. Note: `text-justify` is ignored for immediate rendering and also for `text-placement: 'line'`.
`text-baseline`	CanvasTextBaseline	<optional>	'middle'	Text base line. Possible values: `'bottom'`, `'top'`, `'middle'`, `'alphabetic'`, `'hanging'`, `'ideographic'`.
`text-padding`	Array.<number>	<optional>	[0, 0, 0, 0]	Padding in pixels around the text for decluttering and background. The order of values in the array is `[top, right, bottom, left]`.
`text-fill-color`	Color \| ColorLike	<optional>		The fill color.
`text-background-fill-color`	Color \| ColorLike	<optional>		The fill color.
`text-stroke-color`	Color \| ColorLike	<optional>		The stroke color.
`text-stroke-line-cap`	CanvasLineCap	<optional>	'round'	Line cap style: `butt`, `round`, or `square`.
`text-stroke-line-join`	CanvasLineJoin	<optional>	'round'	Line join style: `bevel`, `round`, or `miter`.
`text-stroke-line-dash`	Array.<number>	<optional>		Line dash pattern.
`text-stroke-line-dash-offset`	number	<optional>	0	Line dash offset.
`text-stroke-miter-limit`	number	<optional>	10	Miter limit.
`text-stroke-width`	number	<optional>		Stroke pixel width.
`text-background-stroke-color`	Color \| ColorLike	<optional>		The stroke color.
`text-background-stroke-line-cap`	CanvasLineCap	<optional>	'round'	Line cap style: `butt`, `round`, or `square`.
`text-background-stroke-line-join`	CanvasLineJoin	<optional>	'round'	Line join style: `bevel`, `round`, or `miter`.
`text-background-stroke-line-dash`	Array.<number>	<optional>		Line dash pattern.
`text-background-stroke-line-dash-offset`	number	<optional>	0	Line dash offset.
`text-background-stroke-miter-limit`	number	<optional>	10	Miter limit.
`text-background-stroke-width`	number	<optional>		Stroke pixel width.