Docs
`/`

# API elements

No matching results

# Sections and content

No matching results

- `Enter` to go to the highlighted result.
- `↑` and `↓` to change highlight.
- `Tab` to switch between result lists.
- `Esc` to hide the results.

# Labels layer API

This reference describes the labels layer API.

The labels layer draws short fragments of text at the specified 2d coordinates. You can define the color and opacity of each label. Additionally, you can draw boxes around specific labels:

You can create an example labels layer using the following code:

    const labels = DotAtlas.createLayer({
      points: [],
      type: "label",
      labelFontSize: 16,
      labelColor: "black"
    });

See the following documentation for all the point and layer properties you can use.

##
Point properties

###
labelColor

The color of the label. If the color is not provided for a point, the layer-wide `labelColor` is used.

###
labelOpacity

The opacity of the label. If opacity is not provided for a point, the layer-wide `labelOpacity` is used.

###
labelOpacity

Controls the display of the labels at various zoom levels.

dotAtlas draws only those labels that do not overlap any other labels. This means that at a certain zoom level only a limited number of labels will show on the screen. As the zoom level increases, more labels located in the zoomed area will show.

To control which labels show first, set the `labelPriority`of the point. If you provide label priorities, dotAtlas displays labels in the decreasing order of priority.

###
labelBoxColor

Color of the box to draw around the label. If not provided, the layer-wide `labelBoxColor` is assumed.

###
labelBoxOpacity

Opacity of the box to draw around the label. If not provided, the layer-wide `labelBoxOpacity` will be used.

##
Layer properties

###
labelColor

Layer-wide label color, `rgba(0, 0, 0, 1.0)` by default.

Labels for which the point-specific `labelColor` was not provided will be drawn in the color defined by this property.

###
labelOpacity

Layer-wide label opacity, `1.0` by default.

Labels for which the point-specific `labelOpacity` was not provided will be drawn with the opacity defined by this property.

###
labelBoxColor

Layer-wide label box color, `hsla(40, 75%, 80%, 0.5)` by default.

Labels for which the point-specific `labelBoxColor` was not provided will use the box color defined in this property.

###
labelBoxOpacity

Layer-wide label box opacity, `0.0` by default.

Labels for which the point-specific `labelBoxOpacity` was not provided will be drawn with the box opacity defined by this property. As a result, if you set this property to a non-zero value, all labels for which label box opacity was not overridden will be drawn inside boxes.

###
labelShadowColor

Color of the drop shadow to draw under all labels on this layer, transparent by default.

Drop shadows may be useful to increase the contrast between labels and other map elements, especially when the whole visualization is drawn in dark colors. Make sure to also set a non-zero

###
labelShadowOpacity

Opacity of label drop shadows on this layer, `0.0` by default.

###
labelFontSize

The font size to use to draw all labels on this layer, `16` by default. Only numeric value in pixels are accepted, CSS length specifications, such as `1em` are not supported.

###
labelFontFamily

The font family to use to draw all labels on this layer, `sans-serif` by default. This property accepts CSS-compliant font family specification.

###
labelFontWeight

The font weight to use to draw all labels on this layer, `normal` by default. This property accepts CSS-compliant font weight definitions, such as `bold` or `300`.

###
labelFontStyle

The font style to use to draw all labels on this layer, `normal` by default. This property accepts CSS-compliant font style definitions, such as `italic`.

###
labelFontVariant

The font variant to use to draw all labels on this layer, `normal` by default. This property accepts CSS-compliant font variant definitions, such as `small-caps`.

previous article
Markers layer API
next article
Outline layer API