Styles and layers
Quick answer
This tutorial walks through a style JSON built from version, sources, layers, glyphs and sprite, then explains the split between paint and layout properties, layer stacking with beforeId, and runtime edits via setPaintProperty, setLayoutProperty, removeLayer and setStyle. It covers source-layer names on vector tiles, filter expressions, and the diff option in v4. You will be able to assemble and modify a working style.
Key points
- Add layers in order and pass an existing layer id as the second addLayer argument to insert beneath it.
- Put visibility in layout, not paint, when hiding a layer with setLayoutProperty.
- Re-add custom sources and layers inside style.load after calling setStyle.
Example
{
"version": 8,
"sources": {
"base": {
"type": "vector",
"url": "https://example.com/tiles.json"
}
},
"layers": [
{ "id": "bg", "type": "background", "paint": { "background-color": "#eef3f7" } },
{
"id": "land",
"type": "fill",
"source": "base",
"source-layer": "countries",
"paint": { "fill-color": "#f7f4ec" }
}
],
"glyphs": "https://example.com/font/{fontstack}/{range}.pbf"
}map.addLayer({
id: 'route-line',
type: 'line',
source: 'route',
layout: {
'line-cap': 'round',
'line-join': 'round'
},
paint: {
'line-color': '#1f5fd0',
'line-width': ['interpolate', ['linear'], ['zoom'], 3, 1.5, 8, 5],
'line-dasharray': [2, 2]
}
});Notes
- A wrong source-layer name yields an empty layer with no console error.
- Layer ids copied from a Mapbox style do not exist in other styles, so edits fail.
English edition written for Atlaslog. Code is taken from the original Chinese page and runs unchanged.
Atlaslog (2026). Styles and layers. https://www.jingweizhi.com/en/maplibre/tutorials/style-layers.html (accessed 2026-11-03).