Layer styling

Map design basics

This collection of articles forms a suggested workflow to understanding the fundamentals of map design basic.

  1. Layer styling
  2. Style by the zoom range
  3. Add a new style layer
  4. Layer filters

This article describes how to style map layers in MapTiler Customize. This way, you can adjust colors in any MapTiler map to your brand design. Users can even style multiple layers at once!

To use MapTiler Customize, you need to set up a MapTiler Cloudaccount. If you don’t have one yet, don’t hesitate tosign up for free!

How to style a layer

Go to the Layers panel (Alt+L) and click on a preferred layer. By clicking on paint properties such as Fill or Outline, you will get to a color picker. You can also adjust the color opacity.

layer-styling.png

Polygon styling

Layers visualized as polygons have two main paint properties - Fill and Outline. If a map has loaded sprite, you can also pick a pattern.

polygon-styling.png

MapTiler maps with sprites included by default:

Line styling

Layers visualized as lines don’t have the option to adjust the Fill color (because of the MapLibre GL JS style specification that doesn’t support line-fill property). You can adjust Outline color, opacity, and width or specify a blur under the Effects.

line-styling.png

A specific paint property for lines is a dash array under Advanced outline properties. The format is: number, number (lengths of the alternating dashes, gaps that form the dash pattern). Dashed lines are commonly used for borders, roads under construction, intermittent rivers, or paths.

dasharray.png

Symbol styling

Layers visualized as symbols have Fill and Outline paint properties. You can also add icons that will differentiate between Icon and Text paint properties.

symbol-styling.png

To adjust the position of labels, go to the Layout properties (scroll down in the Style tab).

layout-properties.png

Raster styling

Rasters have specific paint properties depending on the data. For example, in MapTiler Satellite map, you can adjust contrast, hue, saturation, or brightness. 

raster-styling.png

For hillshading or terrain, you can adjust the shadow, highlight, or accent color. 

hillshade.png

MapTiler maps with hillshade included by default:

Styling of multiple layers

MapTiler Customize allows the styling of multiple layers at once: hold Shift while selecting. To change the styling, click on the paint properties with multiple values, reset them to default, and then style. Layers need to be of the same visualization type!

multiple-layers.png

multiple-layers-reset.png

Conclusion

MapTiler Customize allows users to style map layers easily with a color picker or on the UI, style multiple layers, or use advanced paint properties.

Next steps

Continue to Style by the zoom range to learn how to style your maps based on the zoom level in MapTiler Customize.

Style by the zoom range
Add a new style layer
Using sprites
MapLibre Style Spec