layout and paint properties
Layout properties and paint properties are two sub-properties of a layer that define how spatial data is rendered in Mapbox GL maps. Layout and paint properties are often used together in a single layer.
Layout properties
Layout properties define how the Mapbox GL renderer draws and applies data for a layer. They are applied early in the rendering process. Examples of layout properties include visibility, line-cap, and symbol-placement.
Layout properties appear in a layer's "layout" object, as shown in this Mapbox GL JS example:
map.addLayer({
id: 'gl-draw-line',
type: 'line',
source: 'draw-line',
layout: {
'line-cap': 'round',
'line-join': 'round',
'line-opacity': 0.75
}
});
Paint properties
Paint properties define how data for that layer is styled. Mapbox GL applies them later in the rendering process. Examples of paint properties include fill-color, background-pattern, and line-opacity.
Paint properties appear in a layer's "paint" object, as shown in this Mapbox GL JS example:
map.addLayer({
id: 'trees-point',
type: 'circle',
source: 'trees',
paint: {
'circle-radius': 3,
'circle-color': '#223b53',
'circle-stroke-color': 'white',
'circle-stroke-width': 1,
'circle-opacity': 0.5
}
});
Related resources:
- Layers documentation in the Mapbox Style Specification
- Example using layout properties: Change the case of labels
- Example using paint properties: Style circles with a data-driven property