> For the complete documentation index, see [llms.txt](https://docs.mapbox.com/help/llms.txt)

# layout and paint properties

**Layout properties** and **paint properties** are two sub-properties of a [layer](https://docs.mapbox.com/help/glossary/layer/) that define how spatial data is rendered in Mapbox 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`](https://docs.mapbox.com/style-spec/reference/layers/#layout-fill-visibility), [`line-cap`](https://docs.mapbox.com/style-spec/reference/layers/#layout-line-line-cap), and [`symbol-placement`](https://docs.mapbox.com/style-spec/reference/layers/#layout-symbol-symbol-placement).

Layout properties appear in a layer's `"layout"` object, as shown in this Mapbox GL JS example:

```js
map.addLayer({
  id: 'gl-draw-line',
  type: 'line',
  source: 'draw-line',   // Name of the imported source such as a GeoJSON object, reference to a GeoJSON file, online source, etc.
  layout: {
    'line-cap': 'round',
    'line-join': 'round'
  }
});
```

## 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`](https://docs.mapbox.com/style-spec/reference/layers/#paint-fill-fill-color), [`background-pattern`](https://docs.mapbox.com/style-spec/reference/layers/#paint-background-background-pattern), and [`line-opacity`](https://docs.mapbox.com/style-spec/reference/layers/#paint-line-line-opacity).

Paint properties appear in a layer's `"paint"` object, as shown in this Mapbox GL JS example:

```js
map.addLayer({
  id: 'trees-point',
  type: 'circle',
  source: 'trees',   // Name of the imported source such as a GeoJSON object, reference to a GeoJSON file, online source, etc.
  paint: {
    'circle-radius': 3,
    'circle-color': '#223b53',
    'circle-stroke-color': 'white',
    'circle-stroke-width': 1,
    'circle-opacity': 0.5
  }
});
```

> **Note (warning): Layers and sources**
> 
> The code snippets above include a source parameter, which references the source data the `addLayer()` method is describing. All layers require a data source. To learn more, see the [Add data as a source](https://docs.mapbox.com/mapbox-gl-js/guides/add-your-data/style-layers/#add-your-data-as-a-source) section of the Style Layers guide.

---

**Related resources:**

-   [Layers documentation in the Mapbox Style Specification](https://docs.mapbox.com/style-spec/reference/layers/)
-   Example using layout properties: [Change the case of labels](https://docs.mapbox.com/mapbox-gl-js/example/change-case-of-labels/)
-   Example using paint properties: [Style circles with a data-driven property](https://docs.mapbox.com/mapbox-gl-js/example/data-driven-circle-colors/)