layout and paint properties | Help

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