Add a new style layer

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 add a new style layer to a map in MapTiler Customize.

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

Adding a new style layer

Go to the Layers panel (Alt+L) and click the “plus” button next to search. Select the Layer option.

add-layer.png

1. First, select a source layer from data sources.

add-layer-1.png

Data sources include MapTiler data such as MapTiler Planet, Contours, Terrain RGB etc. or your own datasets. (More details about data sources can be found here.)

In this example, we chose a house number source layer from MapTiler Planet.

choose-source-layer.png

2. Specify the layer’s data content.

Here you should choose the geometry of the layer, and if needed, you can filter out only specific values. Some layers can have multiple options of geometries. For example, the transportation layer can be both a LineString or Polygon.

We choose Point for a house number (as this is the only option), and we won’t be filtering any data.

layer-content.png

3. Include the layer into your map.

In this step, you select a parent block, visualization type, and layer name. Visualization options depend on the geometry of the data layer. 

For our house number layer, we used Symbol visualization.

include-layer.png

By clicking on Add layer, your new style layer will be added to your map with default settings and colors.

added-layer.png

You can easily adapt these. Layer styling is explained in this article. You can also change the order of the layer in the Verticality tab.

style-layer.png

Geometry vs visualization

Geometry and visualization menus appear when adding a new style layer or working with already added layers. Geometry is related to data representation, whereas visualization specifies the styling options.

Let’s illustrate this on a Bridge layer. Bridge geometry can be either a Polygon or LineString. If you select Polygon, you will get areas of bridges that you can style. 

geometry-polygon.png

Bridge visualization can be a Polygon, Line, Extrusion or Symbol. However, don’t mix the Line visualization with LineString geometry. If you select Line visualization, you will still get bridge areas, only with a colored outline.

visualization-line.png

If you select LineString geometry, you get bridge lines.

geometry-linestring.png

You can visualize the LineString geometry as a Line, Symbol, or Heatmap.

visualization-line-2.png

The options available for visualization always depend on the geometry type. See the table below.

Geometry Visualization
Point Point, Symbol, Heatmap
LineString Line, Symbol, Heatmap
Polygon Polygon, Line, Extrusion, Symbol
Mixed Polygon, Line, Extrusion, Symbol, Heatmap
Terrain/hillshade layers Hillshade
Raster/satellite layers Raster

More information about the visualization options can be found in MapLibre GL JS style spec. Geometry types encoded in MBTiles are based on the MVT spec.

Conclusion

In MapTiler Customize, adding a new style layer consists of 3 simple steps after clicking on the “plus” button in the Layers panel (Alt+L):

  1. select a source layer from data sources,
  2. specify the layer’s data content,
  3. include the layer in your map.

After adding, you can select a geometry and visualization type. Geometry comes from the nature of the original data processed to MBTiles. Visualization types depend on the geometry and allow different options for styling.

Next steps

Continue to Layer filters to learn how layer filters in MapTiler Customize work.

Data sources
Layer styling
Layer filters
Layer type | MapLibre GL JS style spec
Geometry types | MVT spec