Layer properties

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

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 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 makes a property dynamic. For example, the Color property specified as an expression can change value based on zoom level or a feature property.

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.

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.

   

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

5. Unlink Color and Opacity properties by clicking Unlink. 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.

   

7. If you want to set constant value, you can clear the expression. To clear the expression click Clear.

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

   

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.

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

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. In the example, Width is defined as steps, and Dasharray is not defined.
5. Unlink the Width property by clicking Unlink. 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.
7. If you want to set constant value, you can clear the steps. To clear the steps click Clear.
8. Unlink the Dasharray property by clicking Unlink.
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.
11. You can remove unwanted values by clicking Clear.

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:

• MapLibre Style Specification