Developer

Layer properties

This guide explains more advanced layer modifications than Foundations - Map Colors enables. The Guide assumes that you read about:

In this guide, you will learn about layer property types and how to modify layer properties.

You will change:

  • layer color and opacity
  • layer line width and dash pattern

Once you learn how to modify those, changing other properties becomes equally simple.

Property types

Layer property can be specified as:

  • constant
  • expression
  • stops

Constant

Constant value example
Figure 1. In the presented example Opacity is specified as constant.

Constant allows you to define a property as a single value (for example number: 0.5, or color: #001122).

You can read more about types of values in MapLibre Style Specification > Types.

Expression

Expression example
Figure 2. In the presented example Color is specified as an expression. You can recognize it by the square brackets.

Expression makes a property dynamic. For example, the Color property specified as an expression can change value based on zoom level or a feature property.

You can learn more about expressions in Data driven styling (soon) and Zoom levels (soon) guides.

Stops

Stops example
Figure 3. In the presented example, Width is specified as stops.

Stops are another way to define the expression. With stops, you can define the property based on zoom level, as a zoom level and a property's value pairs.

You can learn more about expressions and zoom levels in Data driven styling (soon) and Zoom levels (soon) guides.

Color and opacity

Follow these steps to change the color and opacity of the layer:

  1. Open a style.

  2. Click the Layers tab.

  3. Click the layer you want to change (for example, Water - Fill).

  4. Find Opacity and Color properties in the Layer Editor.

    Color and opacity properties

    In the example, Opacity is defined as a constant, and Color as an expression.

  5. Unlink Color and Opacity properties by clicking Linked iconUnlink. If you need more help regarding unlinking, read the Link/unlink layer property guide.

  6. Change the Color property value. You can do it by:

    • using the color picker, which will appear after clicking on the color square
    • entering the color value

    Notice that if the Color is defined as an expression, multiple color values represent this property.

    Read more about accepted color types in MapLibre Style Specification > Types > Color.
    Color changed

  7. If you want to set constant value, you can clear the expression. To clear the expression click Bin iconClear. If you are not yet comfortable with expressions, read Data driven styling (soon).

  8. Change the Opacity property. Enter the value between 0 (fully transparent) and 1 (fully opaque).

    Opacity changed

You can always reset a property to the theme value by linking it again. Please note that all changes will be lost.

Line width and dash pattern

If the layer type is Line, you can modify the line width and dash pattern.

If you want to learn more about the types of layers, read the Types of layers (soon) guide.

Dasharray

Layer line dash pattern is controlled by the Dasharray property. You can define patterns like long dashes, short dashes, or dash-dot lines by setting values in the Dasharray.

You can define the Dasharray with multiple values. A single value represents the length of a particular section of the line, multiplied by the line Width. Every odd value represents a line segment, and every even value represents a break. In other words:

  • First, third, and every second value after that is responsible for line segment (dash length).
  • Second, fourth, and every second value after that is responsible for break.

Consider following example: 5 - 3 - 1 - 3. This line will consist of:

  • line segment of length 5 x line Width, followed by
  • break of length 3 x line Width, followed by
  • line segment of length 1 x line Width, followed by
  • break of length 3 x line Width, and repeat
Dasharray example

Changing line width and dash pattern

Follow these steps to change the line width and dash pattern of the layer:

  1. Open a style.
  2. Click the Layers tab.
  3. Click the layer you want to change (for example, Borders - Country layer). Remember that it should be a "Line" type of layer.
  4. Find Width and Dasharray properties in the Layer Editor. Width and dasharray properties In the example, Width is defined as steps, and Dasharray is not defined.
  5. Unlink the Width property by clicking Linked iconUnlink. If you need more help regarding unlinking, read the Link/unlink layer property guide.
  6. Enter a numeric value in the Width box and observe how line width changes on the map. If the Width is defined as steps, remember that the first box represents the zoom level and the second the Width. Changed line width property
  7. If you want to set constant value, you can clear the steps. To clear the steps click Bin iconClear. If you are not yet comfortable with steps, read Data driven styling (soon).
  8. Unlink the Dasharray property by clicking Linked iconUnlink.
  9. Add values to the Dasharray by clicking Add value.
  10. Enter values in Dasharray boxes and observe how the line dash pattern changes on the map. Dasharray changed
  11. You can remove unwanted values by clicking Bin iconClear.

The shortest segment might not look like it has a length the same as the width. This is caused by caps, which add additional length to the segment. You can try to change the Cap property of the layer and see how it influences the line dash pattern.

Next steps

Since you have learned how to modify the layer properties, here are recommendations for the next steps:

How do you like our docs?

Take our survey!