@controls reference
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).
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.
Static controls
background-color
Defines background color of control
color
color
Defines color of control's text
color
font-family
Defines font family of control's text
family-name generic-family
font-size
Defines size of control's text
number
font-style
Defines style of control's text
normal italic
font-weight
Defines weight of control's text
number
height
Defines height of control
number
margin
Defines space between the control and other controls on the map
number
metrics
Defines which metrics will be included in the dashboard
element-count connection-count density reciprocity diameter average-degree average-path-length
opacity
Defines opacity of the control
0..1
padding
Defines space between the control's border and its contents
number
src
Defines the source of the image
url
text-align
Defines alignment of text within the control
center left right
value
Any plain text string. Markdown and some HTML allowed.
string
width
Defines width of control
number
Interactive controls
as
Defines how the control is presented
labels buttons dots dropdown
background-color
Defines background color of control
color
by
Defines the field to filter, showcase, or cluster by
''Field Name'
color
Defines color of control's text (labels, placeholders, and summaries only)
color
default
Defines which options should be selected by default
none show-all select all ''field value 1', 'field value 2',...
except
Allows you to remove field values from the available choices
''field value 1', 'field value 2',...
font-family
Defines font family of control's text (labels, placeholders, and summaries only)
family-name generic-family
font-size
Defines size of control's text (labels, placeholders, and summaries only)
number
font-style
Defines style of control's text (labels, placeholders, and summaries only)
normal italic
font-weight
Defines weight of control's text (labels, placeholders, and summaries only)
number
height
Defines height of control
number
label
Adds a label above the control
'My Label'
margin
Defines space between the control and other controls on the map
number
mode
Controls how the selection is showcased. normal is the default and showcases the selection plus any connections between the showcased elements. loose showcases the selection plus neighboring elements. strict only showcases the selection itself.
normal loose strict
multiple
Controls whether more than one option can be selected at a time
true false match-all
only
Allows you to explicitly define which field values should be included as available choices
''field value 1', 'field value 2',...
opacity
Defines opacity of the control
0..1
options
Allows you to explicitly define which options should be included as available choices
''partial-view-1', 'partial-view-2',...
out
Defines the level of connections you'd like to see (out 1: first-degree only, out 2: first- and second-degree, etc.)
number
padding
Defines space between the control's border and its contents
number
placeholder
The text to display when nothing is selected
(for as: dropdown only)
string
range
Defines the years that should be included
year..year
summary
Summarizes the options that have been selected
(for as: dropdown only)
string
target
Defines which items will be affected by the control
selector
width
Defines width of control
number
Last updated