Class: Style

.xyz.maps.layers.TileLayer. Style

Style object represents supported style attributes of Features. It indicates how a symbolizer in feature should be rendered.

A style object should always include "zIndex" and "type" attributes, and each type of symbolizer should include its own type-specific attributes:
-Circle: "radius" must be included and either "fill" or "stroke" should be included.
-Rect: "width" must be included and "height" will be set with the same value as "width" if only "width" is present. Either "fill" or "stroke" should be included
-Text: "text" or "textRef" should be included and "fill" or "stroke" should also be included for text color
-Image: "src" and "width" must be included. "height" will be set with the same value as "width" if only "width" is present.
-Line: "stroke" must be included.
-Polygon: "fill" or "stroke" must be included.
Examples:
//example of Circle:
{zIndex:0, type:"Circle", radius:16, fill:"#FFFF00"}
//example of Rect:
{zIndex:0, type:"Rect", fill:"#4C9EEF", stroke:"#0156BB", width:20, height:20}
//example of Text:
{zIndex:1, type:"Text", fill:"#FFFFFF", text:"HERE", font:"normal 12px Arial"}
//example of Image:
{zIndex:0, type:"Image", src:"./here.png", width:20, height:20}
//example of Line:
{zIndex:0, type:"Line", opacity:0.5, stroke:"#BE6B65", strokeLinecap:"round", strokeLinejoin:"round", strokeWidth:16}
//example of Polygon:
{zIndex:0, type:"Polygon", opacity:0.5, stroke:"#BE6B65", fill:"#FFFFFF"}

Members Summary

alignment :string

Alignment for Text. 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.

collide :boolean

Enable or disable collision detection. Works for "Text" only.
true - collision detection is enabled [default]
false - collision is disabled

fill :string

Sets the color inside the symbolizer. This attribute is valid for Circle, Rect and Polygon.

font :string

CSS font for texts. default font for texts: “normal 12px Arial”. It is only valid for Text.

height :number

Height of symbolizer in pixel. It is only required by Rect and Image.

offsetX :number

Offset value on X axis. It is valid for Circle, Rect, Text and Image.

offsetY :number

Offset value on Y axis. It is valid for Circle, Rect, Text and Image.

opacity :number

Opacity of the symbolizer. It is valid for all symbolizer types.

priority :number

In case of label collision, Text with a higher priority (lower value) will be drawn before lower priorities (higher value).
"priority" applies to Text only.

radius :number

Radius of symbolizer in pixel. It is only required by Circle.

repeat :number

Minimum distance in pixel between repeated text labels on line geometries.
Applies per tile only. Default is 256 pixel.

rotation :number

Rotate the symbolizer to the angle in degree. This attribute is validate for Rect and Image.

src :string

Specifies the URL of an image. It can be either absolute or relative path. It is only required by Image.

stroke :string

Sets the color of the line drawn around the symbolizer. This attribute is valid for Circle, Rect, Line and Polygon.

strokeDasharray :Array.<number>

The strokeDasharray attribute controls the pattern of dashes and gaps used to stroke paths.
It's an array of <length>s that specify the lengths of alternating dashes and gaps. If an odd number of values is provided,
then the list of values is repeated to yield an even number of values. Thus, 5,3,2 is equivalent to 5,3,2,5,3,2.
This attribute is valid for symbolizers with stroke.

strokeLinecap :string

This controls the shape of the ends of lines. there are three possible values for strokeLinecap:
-"butt" closes the line off with a straight edge that's normal (at 90 degrees) to the direction of the stroke and crosses its end.
-"square" has essentially the same appearance, but stretches the stroke slightly beyond the actual path. The distance that the stroke goes beyond the path is half the strokeWidth.
-"round" produces a rounded effect on the end of the stroke. The radius of this curve is also controlled by the strokeWidth.
This attribute is valid for symbolizers with stroke.

strokeLinejoin :string

The joint where the two segments in a line meet is controlled by the strokeLinejoin attribute, There are three possible values for this attribute:
-"miter" extends the line slightly beyond its normal width to create a square corner where only one angle is used.
-"round" creates a rounded line segment.
-"bevel" creates a new angle to aid in the transition between the two segments.
This attribute is valid for symbolizers with stroke.

strokeWidth :number

Sets the width of the line drawn around the symbolizer. This attribute is valid for symbolizers with stroke.

text :string|function

Text is either a string or a function that generates a string. It is only required by Text.

textRef :string

"textRef" points to features, its value is the reference path which points to the feature attribute that is displayed on object. If both "text" and "textRef" are set, "text" prevails.
e.g. for Address object style, if "textRef" is set to "properties.address", the address value in properties of the address object will be displayed.
It is only required by Text.

type :String

Indecates type of the symbolizer.
Its value shoule be one of the following: "Circle", "Rect", "Text", "Image", "Line" or "Polygon".

width :number

Width of symbolizer in pixel. It is only required by Rect and Image.

zIndex :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

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}

Members Details

alignment :string [Optional]

Alignment for Text. 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.
Type:
string

collide :boolean [Optional]

Enable or disable collision detection. Works for "Text" only.
true - collision detection is enabled [default]
false - collision is disabled
Type:
boolean

fill :string [Optional]

Sets the color inside the symbolizer. This attribute is valid for Circle, Rect and Polygon.
Type:
string

font :string [Optional]

CSS font for texts. default font for texts: “normal 12px Arial”. It is only valid for Text.
Type:
string

height :number [Optional]

Height of symbolizer in pixel. It is only required by Rect and Image.
Type:
number

offsetX :number [Optional]

Offset value on X axis. It is valid for Circle, Rect, Text and Image.
Type:
number

offsetY :number [Optional]

Offset value on Y axis. It is valid for Circle, Rect, Text and Image.
Type:
number

opacity :number [Optional]

Opacity of the symbolizer. It is valid for all symbolizer types.
Type:
number

priority :number [Optional]

In case of label collision, Text with a higher priority (lower value) will be drawn before lower priorities (higher value).
"priority" applies to Text only.
Type:
number

radius :number [Optional]

Radius of symbolizer in pixel. It is only required by Circle.
Type:
number

repeat :number [Optional]

Minimum distance in pixel between repeated text labels on line geometries.
Applies per tile only. Default is 256 pixel.
Type:
number

rotation :number [Optional]

Rotate the symbolizer to the angle in degree. This attribute is validate for Rect and Image.
Type:
number

src :string [Optional]

Specifies the URL of an image. It can be either absolute or relative path. It is only required by Image.
Type:
string

stroke :string [Optional]

Sets the color of the line drawn around the symbolizer. This attribute is valid for Circle, Rect, Line and Polygon.
Type:
string

strokeDasharray :Array.<number> [Optional]

The strokeDasharray attribute controls the pattern of dashes and gaps used to stroke paths.
It's an array of <length>s that specify the lengths of alternating dashes and gaps. If an odd number of values is provided,
then the list of values is repeated to yield an even number of values. Thus, 5,3,2 is equivalent to 5,3,2,5,3,2.
This attribute is valid for symbolizers with stroke.
Type:
Array.<number>

strokeLinecap :string [Optional]

This controls the shape of the ends of lines. there are three possible values for strokeLinecap:
-"butt" closes the line off with a straight edge that's normal (at 90 degrees) to the direction of the stroke and crosses its end.
-"square" has essentially the same appearance, but stretches the stroke slightly beyond the actual path. The distance that the stroke goes beyond the path is half the strokeWidth.
-"round" produces a rounded effect on the end of the stroke. The radius of this curve is also controlled by the strokeWidth.
This attribute is valid for symbolizers with stroke.
Type:
string

strokeLinejoin :string [Optional]

The joint where the two segments in a line meet is controlled by the strokeLinejoin attribute, There are three possible values for this attribute:
-"miter" extends the line slightly beyond its normal width to create a square corner where only one angle is used.
-"round" creates a rounded line segment.
-"bevel" creates a new angle to aid in the transition between the two segments.
This attribute is valid for symbolizers with stroke.
Type:
string

strokeWidth :number [Optional]

Sets the width of the line drawn around the symbolizer. This attribute is valid for symbolizers with stroke.
Type:
number

text :string|function [Optional]

Text is either a string or a function that generates a string. It is only required by Text.
Type:
string | function
Example:
{text: function(feature){
    // Display uppercased street name
    return feature.properties.name.toUpperCase();
}}

textRef :string [Optional]

"textRef" points to features, its value is the reference path which points to the feature attribute that is displayed on object. If both "text" and "textRef" are set, "text" prevails.
e.g. for Address object style, if "textRef" is set to "properties.address", the address value in properties of the address object will be displayed.
It is only required by Text.
Type:
string

type :String

Indecates type of the symbolizer.
Its value shoule be one of the following: "Circle", "Rect", "Text", "Image", "Line" or "Polygon".
Type:
String

width :number [Optional]

Width of symbolizer in pixel. It is only required by Rect and Image.
Type:
number

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

zLayer :number [Optional]

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}
Type:
number