Expressions and data-driven styling
Quick answer
This tutorial explains MapLibre style expressions: JSON arrays whose first element is the operator. It separates data-driven input such as ['get', 'level'] from camera-driven input such as ['interpolate', ['linear'], ['zoom'], ...], then shows match and case for classified colors, step for threshold styling, coalesce for missing attributes, and feature-state for hover highlighting. You will be able to replace fixed paint values with property-aware rules.
Key points
- Use ['match', ['get', 'class'], ...] for enumerated categories and always supply the fallback value last.
- Wrap interpolate around ['zoom'] for camera-driven sizes and step for discrete zoom thresholds.
- Set hover state with map.setFeatureState and read it through ['feature-state', 'hover'].
Example
map.addLayer({
id: 'landuse-fill',
type: 'fill',
source: 'base',
'source-layer': 'landuse',
paint: {
'fill-color': ['match', ['get', 'class'],
'forest', '#2f6b45',
'farmland','#c9c07a',
'urban', '#c8c2ba',
'#e8eef4' // 兜底
],
'fill-opacity': ['case',
['==', ['get', 'class'], 'urban'], 0.55,
0.35
]
}
});map.addLayer({
id: 'sites-circle',
type: 'circle',
source: 'sites',
paint: {
'circle-radius': ['interpolate', ['linear'], ['zoom'],
8, 3,
12, 6,
16, 14
],
'circle-color': ['step', ['get', 'level'],
'#9ecae1', // level 小于 2
2, '#4292c6',
4, '#08519c'
],
'circle-stroke-width': 1,
'circle-stroke-color': '#ffffff'
}
});Notes
- Mixing data-driven and camera-driven input in one numeric slot is rejected, falling back to the default value.
- e.features[0].id is undefined unless the source uses generateId: true or promoteId.
English edition written for Atlaslog. Code is taken from the original Chinese page and runs unchanged.
Atlaslog (2026). Expressions and data-driven styling. https://www.jingweizhi.com/en/maplibre/tutorials/expressions.html (accessed 2026-11-03).