Loading...
Searching...
No Matches
Style parameters

align (ICON, FLAT_ICON, CIRCLE)

Optional string or array of strings, one of left, center, right. Default is center, unless anchor is set (see below).

align: left

anchor (ICON, FLAT_ICON, CIRCLE)

Optional string, one of center, left, right, top, bottom, top-left, top-right, bottom-left, or bottom-right. Default is ‘['bottom’, 'top', 'right', 'left']`.

Places the label or point on the specified side or corner of the feature. When an array us used, each anchor position is tried in the order listed until a placement which does not collide is found.

anchor: [bottom, right, left, top]

If offset is also set, it is applied in addition to the anchor.

anchor: bottom # places the text so that the top of the text is directly below the feature
offset: [0, 2px] # moves the text an additional 2px down

If anchor is set but align is not, then align will be set to an appropriate default value:

if anchor is... align defaults to...
center
top
bottom
center
left
top-left
bottom-left
right
right
top-right
bottom-right
left
anchor: bottom-left # the label will use `align: right` by default

angle (ICON, FLAT_ICON, CIRCLE)

Optional number or string auto. Numeric values of the angle are in degrees.

Rotates the point.

When auto is specified, angles are computed according to the underlying geometry.

buffer (ICON, FLAT_ICON, CIRCLE)

Optional integer or [integer, integer], in px. No default.

Specifies an optional buffer area that expands the collision bounding box of the feature, to avoid features from being rendered closer together than desired. A single value will be applied to all sides of the feature; a two-element array specifies separate horizontal and vertical buffering values.

buffer: [2px, 1px] # creates a two-pixel buffer on the left and right sides of the feature, and a one-pixel buffer on its top and bottom.

cap (POLYLINE)

Optional string, one of butt, square, or round following the SVG protocol. Default is butt`.

Sets the shape of the ends of features

cap: round

join (POLYLINE)

Optional string, one of bevel, round, or miter following the SVG protocol. Default is miter.

Sets the shape of joints in multi-segment lines.

join: round

collide (ICON, FLAT_ICON, CIRCLE)

Optional boolean. Defaults to true.

A point or text draw group marked with collide: false will not be checked for any collisions.

collide: false

color (ICON, FLAT_ICON, CIRCLE, POLYLINE, POLYGON)

Required RGB [number, number, number], RGBA [number, number, number, number], CSS color, or stops. Can also be a function which returns a color. RGB/RGBA value range is 0-1. No default.

Specifies the vertex color of the feature. This color will be passed to any active shaders and used in any light calculations as "color".

CSS colors include the following color formats, as specified in the W3C's Cascading Style Sheets specification:

  • named colors: red, blue, salmon, rebeccapurple
  • hex colors: "#fff", "#000", "#9CE6E5"
  • RGB colors: rgb(255, 190, 0)
  • RGBA colors**: rgb(255, 190, 0, .5)
  • HSL colors: hsl(180, 100%, 100%)
  • HSL colors: hsla(180, 100%, 100%, 50%)
color: [.7, .7, .7]
color: red
color: '#ff00ff'
color: function() { return [$zoom, .5, .5]; }
color: [1.0, .5, .5, .5] # 50% alpha

offset (POLYLINE)

Optional float, in px or m. No default. Default units is px.

Offsets each segment of the line from its original location, perpendicular to its original orientation.

Note that offsetting a curved line will change its shape, and may invert the curve if the offset distance is greater than the radius of the curve.

offset: [[15, 3.5px], [16, 6.5px]]

offset (ICON, FLAT_ICON, CIRCLE)

Optional [float x, float y] array or stops, in px. No default.

Moves the feature from its original location. The offset is in screen-space, e.g. a Y offset of 10px will move the point or label 10 pixels down on the screen.

# moves the point 10 pixels up in screen-space
offset: [0px, -10px]

outline (CIRCLE, POLYLINE)

Optional element. Defines the start of an outline style block.

Draws an outline around the feature. outline elements can take any lines style parameters.

outline:
width: 1px
color: blue