> For the complete documentation index, see [llms.txt](https://developers.felt.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://developers.felt.com/felt-style-language/style-definition-blocks/the-paint-block.md).

# The paint block

{% hint style="info" %}
The paint block defines how feature geometries and raster pixels are rendered.
{% endhint %}

Color properties (`color`, `strokeColor`) accept a literal color or a `@palette` shortcut, and `strokeColor` additionally accepts the smart keyword `"auto"` — see [Colors & palettes](/felt-style-language/colors-and-palettes.md). Point layers can be drawn as icons via `iconImage` — see [Icons](/felt-style-language/icons.md). For data-driven (`categorical`, `numeric`, `h3`) visualizations, paint properties may be arrays, one value per category/class.

Properties common to all visualization types.

|                          | Type     | Default | Description                                                                                                                                                                                                                                                                                                                                                                     |
| ------------------------ | -------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `isClickable`            | boolean  | true    | Optional. A flag to tell if features should be clickable                                                                                                                                                                                                                                                                                                                        |
| `isHoverable`            | boolean  | false   | Optional. A flag to tell if features should be hoverable                                                                                                                                                                                                                                                                                                                        |
| `isSandwiched`           | boolean  | false   | Optional. A flag to tell if features affected by this visualization need to be rendered below the basemap road and water layers. Only applies to polygon features, point and line features are already rendered on top of the basemap                                                                                                                                           |
| `maxZoom`                | number   | 24      | Optional. The maximum zoom level at which the visualization will be shown                                                                                                                                                                                                                                                                                                       |
| `minZoom`                | number   | 0       | Optional. The minimum zoom level at which the visualization will be shown                                                                                                                                                                                                                                                                                                       |
| `renderAsLines`          | boolean  | false   | Optional. Decides if a polygon dataset should be rendered as lines thus making them render above the basemap. Note that using this requires that the style uses line properties instead of polygon ones.                                                                                                                                                                        |
| `paintPropertyOverrides` | `object` |         | Optional. An escape hatch: raw [MapLibre](https://maplibre.org/maplibre-style-spec/) `paint` or `layout` properties applied to the generated layer. Keys that are not valid for the underlying MapLibre layer type are silently ignored. Also available on the `label` block. See [here](https://help.felt.com/layers/styling/vector-layers#maplibre-style-overrides) for more. |

## Simple visualizations

The following properties are available for the `simple` type of visualization

<table><thead><tr><th width="254"></th><th width="114">Type</th><th width="203">Applies to</th><th>Description</th></tr></thead><tbody><tr><td><code>color</code></td><td>string | <a href="/pages/EjwMClndeRGhtqdOEZUu">Interpolator</a></td><td>Points, lines and polygons</td><td>Optional. The color to be used</td></tr><tr><td><code>dashArray</code></td><td>number[]</td><td>Lines</td><td>Optional. The dash line definition — an array of dash/gap lengths with an even number of entries, e.g. <code>[2, 1]</code></td></tr><tr><td><code>highlightColor</code></td><td>string</td><td>Points, lines and polygons</td><td>Optional. The color to be used when a feature is selected</td></tr><tr><td><code>highlightStrokeColor</code></td><td>string</td><td>Points, lines and polygons</td><td>Optional. The stroke color to be used when a feature is selected</td></tr><tr><td><code>highlightStrokeWidth</code></td><td>number | <a href="/pages/EjwMClndeRGhtqdOEZUu">Interpolator</a></td><td>Points and polygons</td><td>Optional. The stroke width when a feature is selected</td></tr><tr><td><code>lineCap</code></td><td><code>"butt"</code> | <code>"round"</code> | <code>"square"</code>| <a href="/pages/EjwMClndeRGhtqdOEZUu">Interpolator</a></td><td>Lines</td><td>Optional. The shape used to draw the end points of lines</td></tr><tr><td><code>lineJoin</code></td><td><code>"bevel"</code> | <code>"round"</code>| <code>"miter"</code>| <a href="/pages/EjwMClndeRGhtqdOEZUu">Interpolator</a></td><td>Lines</td><td>Optional. The shape used to join two line segments when they meet</td></tr><tr><td><code>opacity</code></td><td>number | <a href="/pages/EjwMClndeRGhtqdOEZUu">Interpolator</a></td><td>Points, lines and polygons</td><td>Optional. The opacity to use from 0 to 1</td></tr><tr><td><code>size</code></td><td>number | <a href="/pages/EjwMClndeRGhtqdOEZUu">Interpolator</a></td><td>Points and lines</td><td>Optional. Point radius or line width in pixels</td></tr><tr><td><code>strokeColor</code></td><td>string | <a href="/pages/EjwMClndeRGhtqdOEZUu">Interpolator</a> | <code>auto</code></td><td>Points and polygons</td><td>Optional. Stroke color</td></tr><tr><td><code>strokeWidth</code></td><td>number | <a href="/pages/EjwMClndeRGhtqdOEZUu">Interpolator</a></td><td>Points and polygons</td><td>Optional. Stroke width in pixels</td></tr></tbody></table>

See [default values](#default-values) for the default values of these attributes on each geometry type.

## Categorical and numeric visualizations

`categorical` and `numeric` visualizations use the same `color`, `opacity`, `size`, `strokeColor`, `strokeWidth`, and line properties listed above (`highlightColor`/`highlightStrokeColor` are simple-only). The difference is that each property may be an **array**: a single value applies to every category/class, or one value per category/class. See the [categorical](/felt-style-language/types-of-visualizations/categorical-visualizations.md) and [numeric](/felt-style-language/types-of-visualizations/numeric-visualizations-color-and-size.md) pages for worked examples.

## Icon properties (points)

When a point layer should be drawn as icons instead of circles, set `iconImage` in the paint block. The icon takes on the layer's `color` and `size`. See [Icons](/felt-style-language/icons.md) for the full catalog and examples.

<table><thead><tr><th width="200"></th><th width="180">Type</th><th>Description</th></tr></thead><tbody><tr><td><code>iconImage</code></td><td>string | string[]</td><td>An icon slug, or an emoji as <code>"emoji::name:"</code>. Array form assigns an icon per category/class.</td></tr><tr><td><code>iconFrame</code></td><td><code>"none"</code> | <code>"frame-circle"</code> | <code>"frame-square"</code></td><td>A frame drawn behind built-in icons (not emojis).</td></tr><tr><td><code>iconRotation</code></td><td>number | string</td><td>Rotation in degrees, or a column name to rotate by.</td></tr><tr><td><code>iconHideOnZoom</code></td><td>number</td><td>Zoom level below which icons render as plain points.</td></tr></tbody></table>

## Paint arrays (casing & layered rendering)

The `paint` property can be an **array of paint objects** for layered rendering. The layers render last-to-first (the last entry is the bottom layer, the first is on top). This is most often used for road-style casing: a wide dark outline beneath a narrower colored fill.

```json
{
  "version": "2.3.1",
  "type": "simple",
  "paint": [
    {"color": "#3B82F6", "size": 4, "opacity": 1.0, "lineCap": "round", "lineJoin": "round"},
    {"color": "#1E3A5F", "size": 8, "opacity": 1.0, "lineCap": "round", "lineJoin": "round"}
  ],
  "legend": {}
}
```

Paint arrays work on all geometries but are most useful for line casing.

## Label block reference

Label rendering is configured separately, in the `label` block. See [The label block](/felt-style-language/style-definition-blocks/the-label-block.md) for the full property reference, defaults, and placement-by-geometry guidance.

## Default values

<table><thead><tr><th width="271">Name</th><th>Points</th><th>Polygons</th><th>Lines</th></tr></thead><tbody><tr><td><code>color</code></td><td>"#EE4D5A"</td><td>"#826DBA"</td><td>"#4CC8A3"</td></tr><tr><td><code>highlightColor</code></td><td>"#EA3891"</td><td>"#EA3891"</td><td>"#EA3891"</td></tr><tr><td><code>highlightStrokeColor</code></td><td>"#EA3891"</td><td>"#EA3891"</td><td>"#EA3891"</td></tr><tr><td><code>dashArray</code></td><td>-</td><td>-</td><td></td></tr><tr><td><code>lineCap</code></td><td>-</td><td>-</td><td>"round"</td></tr><tr><td><code>lineJoin</code></td><td>-</td><td>-</td><td>"round"</td></tr><tr><td><code>opacity</code></td><td>0.9</td><td>0.8</td><td>1</td></tr><tr><td><code>isSandwiched</code></td><td>-</td><td>false</td><td>-</td></tr><tr><td><code>size</code></td><td>4</td><td>-</td><td>2</td></tr><tr><td><code>strokeColor</code></td><td>"#F9F8Fb"</td><td>"#777777"</td><td>-</td></tr><tr><td><code>strokeWidth</code></td><td>1</td><td>1</td><td>-</td></tr></tbody></table>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://developers.felt.com/felt-style-language/style-definition-blocks/the-paint-block.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.