Shapes
Last updated
Last updated
Shapes are are a useful visual tool when you need to differentiate between different types of elements. Kumu has several tools you can use to customize elements' shapes—this guide will help you pick which tool is the right one for your use case:
If you just need to assign shapes to a handful of elements, we recommend using the direct decoration toolbar. Hover over any element, then click the Size/Shape icon , and pick a shape from the dropdown.
To assign a shape to a specific selection of elements, use the element decoration builder.
Open the Basic Editor
Click Decorate elements
Check the Add shape box, and pick a shape
If you'd like to add your shape decoration to the legend, fill in the Legend box
The quickest way to assign shapes to all elements automatically based on their profile data is the Shape By tool. Open the Basic Editor, and use the Shape By tool to pick a field from your elements' profiles. Note that Shape By only works with fields that can hold one value, like Element Type.
When you use Shape By, legend entries will be created for you automatically.
In the Advanced Editor, you can use the shape property to assign shapes. Here's the basic syntax:
You can replace element with any element selector, and circle with any valid shape:
circle
triangle
square
rectangle
pill
diamond
pentagon
hexagon
octagon
Two things to note:
When choosing the rectangle or pill shape, you also need to indicate their width and height:
To change the size of any shape other than the square, rectangle, or pill, use the size property, instead of width & height:
Instead of setting a shape directly, you can also use the categorize() function to assign shapes based on a field:
The categorize() function has its own list of default shapes, but you can list your own shapes to customize which ones are used, and in what order:
Or, list a shape and a specific field value to control precisely how those shapes get assigned:
Finally, if you'd like your categorized shapes to be automatically added to the legend, use the element-shape rule inside a @settings block:
By default, the geo template limits you to squares and straight lines, but if you want it to support all shapes, add @settings { renderer: canvas; } to your Advanced Editor.
