While it's possible to build controls using the Basic Editor, using the Advanced Editor is the only way to unlock the full flexibility of controls. This guide lists each property that can be used in the Advanced Editor, each possible value the properties can accept, and which @controls can recognize the properties and values.
There are two reference tables in this guide—the first lists properties for static controls (nothing happens when map readers click on these controls), and the second lists properties for interactive controls (map readers can interact with the map by clicking on these controls).
Hover over the information icon at the far right of the table rows to see additional details and valid values for each property (when there are multiple valid values, we've listed them as separate snippets of inline code). All values are unitless.
If you find a property or a value that's not documented here, let us know!
Jump to the reference for interactive controls.
| Property | Color-legend | Image | Label | Text | Title | SNA-dasboard | |
|---|---|---|---|---|---|---|---|
| background-color | |||||||
| color | |||||||
| font-family | |||||||
| font-size | |||||||
| font-style | |||||||
| font-weight | |||||||
| height | |||||||
| margin | |||||||
| metrics | |||||||
| opacity | |||||||
| padding | |||||||
| src | |||||||
| text-align | |||||||
| value | |||||||
| width |
| Property | Filter | Showcase | Cluster | Tagged-timeline | View toggle | |
|---|---|---|---|---|---|---|
| as | ||||||
| background-color | ||||||
| by | ||||||
| color | ||||||
| default | ||||||
| except | ||||||
| font-family | ||||||
| font-size | ||||||
| font-style | ||||||
| font-weight | ||||||
| height | ||||||
| margin | ||||||
| mode | ||||||
| multiple | ||||||
| only | ||||||
| opacity | ||||||
| options | ||||||
| padding | ||||||
| placeholder | ||||||
| range | ||||||
| summary | ||||||
| target | ||||||
| width |