Glossary

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?