Using Expressions in Map Maker
In this article, we walk through some examples for personalizing your map and visualizing your data with expressions.
Clockwork Micro makes it easy to personalize your map with custom expressions. Different options are available depending upon whether your data is displayed as a point, polygon, or line. For all of the following examples, we’ll use the type-Point.
Expressions are written in Maplibre syntax. The first element of an expression is a string naming the expression operator. Elements that follow are the arguments to the expression.
In this article, we’ll address three common operators (Match, Case, Zoom).
MATCH
Selects the output whose label value matches the input value, or the fallback value if no match is found. The input can be any expression (e.g. ["get", "building_type"]).
Note: Each label must be unique and each color used only once.
Syntax:
["match", value, value, ..., fallback: value]: value
Example
[
"match",
["get", "Name"],
"Harry", "red",
"David", "blue",
"Marcia", "green",
"yellow",
]
In this example for a Circle Color expression, if the value in the field "Name" is "Harry," then the circle will be colored red. Otherwise blue for "David," green for "Marcia," and if it is none of these, the circle will be yellow. There must always be a default value at the end of the expression.
Let’s say you want to be more precise with the color. You can insert an “rgb” in your expression instead of the name of the color.
[
"match",
["get", "Name"],
"Harry",
["rgb", 0,153,153],
"David",
["rgb", 154,86,199],
[“rgb”, 255,255,51]
]
CASE
Works like an if, then, else. It selects the first output whose corresponding test condition is true, or the fallback value otherwise.
Syntax:
["case", value, value, ..., fallback: value]: value
Example
"case",
["<", ["to-number", ["get", "Population"]], 500000],
["rgb", 0,153,153],
["rgb", 154,86,199]
]
This example for a Circle Color expression evaluates the Population field and if the population is less than 500000, changes the circle color to Aqua, otherwise changes the circle color to Purple.
Note: It is necessary to use "to-number" because all properties retrieved with ["get", "fieldname"] are treated as strings by default. The data source must also not contain any extra characters: 500,000 would not return a result.
We can use a similar expression for Circle Opacity as follows:
[
"case",
["<", ["to-number", ["get", "Population"]], 500000],
0.5,
1
]
This example evaluates the population field and if it is less than 500000, the circle is 50% opaque. If the population is greater than 500000, the circle is 100% opaque.
Note that opacity is represented between 0 and 1, and decimals must be preceded by “0”
And lastly, here is an example for Circle Stroke Width
[
"case",
[">", ["to-number", ["get", "Median Household Income"]], 50000],
2,
0
]
This expression evaluates the Median Household Income field and if it is less than 50000, puts a 2 pixel outline around the circle. Otherwise the circle has no outline.
Note, it is necessary that your source data contain no extra characters such as "$" or "," Use a formula in excel to remove excess characters before pasting them into Airtable.
ZOOM
Zoom allows the appearance of the points on the map to change with the map’s zoom level. The Zoom operator can be used to control data density on your map.
Example using Circle Radius:
[
"interpolate", ["linear"], ["zoom"],
5, 2,
7, 10
]
This example uses the interpolate operator to define a linear relationship between zoom level and circle size using a set of input-output pairs. In this case, the expression indicates that the circle radius should be 2 pixels when the zoom level is 5 or below, and 10 pixels when the zoom is 7 or above. Between the two zoom levels, the circle radius will be linearly interpolated between 2 and 10 pixels.
You can view all of these example expressions on a demo map at https://examplemaps.clockworkmicro.com/expression-example.html
Feel free to reach out to us if you need help writing your expression! Help@clockworkmicro.com