Skip to main content

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:

Was this page helpful?