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.
Layer property can be specified as:
Constant allows you to define a property as a single value (for example number:
0.5, or color:
You can read more about types of values in MapLibre Style Specification > Types.
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 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:
Open a style.
Click the Layers tab.
Click the layer you want to change (for example, Water - Fill).
Find Opacity and Color properties in the Layer Editor.
In the example, Opacity is defined as a constant, and Color as an expression.
Unlink Color and Opacity properties by clicking Unlink. If you need more help regarding unlinking, read the Link/unlink layer property guide.
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.
If you want to set constant value, you can clear the expression. To clear the expression click Clear. If you are not yet comfortable with expressions, read Data driven styling (soon).
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.
If you want to learn more about the types of layers, read the Types of layers (soon) guide.
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:
- Open a style.
- Click the Layers tab.
- Click the layer you want to change (for example, Borders - Country layer). Remember that it should be a "Line" type of layer.
- Find Width and Dasharray properties in the Layer Editor. In the example, Width is defined as steps, and Dasharray is not defined.
- Unlink the Width property by clicking Unlink. If you need more help regarding unlinking, read the Link/unlink layer property guide.
- 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.
- If you want to set constant value, you can clear the steps. To clear the steps click Clear. If you are not yet comfortable with steps, read Data driven styling (soon).
- Unlink the Dasharray property by clicking Unlink.
- Add values to the Dasharray by clicking Add value.
- Enter values in Dasharray boxes and observe how the line dash pattern changes on the map.
- 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.
Since you have learned how to modify the layer properties, here are recommendations for the next steps:
How do you like our docs?