Use Arcade to rotate symbols in web maps

Arcade is an expression language that can be used across the ArcGIS Platform, supporting web, desktop and mobile. Whether writing simple code to control how features are rendered, or expressions to control text, Arcade provides a simple scripting syntax to deliver these capabilities. In the web map, Arcade can be used to control rendering and symbology, including the visualization and rotation of symbols, as well as labeling and pop-ups.

Using Arcade for symbol rotation

In the example shown below, paired and rotated symbols were used to create a gauge showing the current capacity of reservoirs.

To create the gauge symbols, the layer was duplicated and uses two overlapping and centered symbols; one symbol is the dial background and the other symbol is the needle that is rotated to show the current level of the reservoir. See Create dials and gauges using stacked symbols and rotation for more information.

The Arcade expression

An Arcade expression is used to calculate the needle symbol rotation that shows the reservoir level as a percentage of its total capacity. The crux of the expression is to determine the rotation in compass degrees needed to rotate the needle to represent the appropriate percentage full value on the dial.

The needle points to 225 degrees, which is %0 full on our scale. At 135 degrees the dial shows %100 full. So the rotation of the needle going from %0 to %100 is 270 degrees. Divide 270 by 100 to determine degrees to move the needle to show the corresponding percentage. See the comments in the expression below.

Add the Arcade expression

To add the Arcade expression for symbol rotation, change the style of the layer and in the Rotation by attribute section do the following:

a – Toggle Rotate symbols based on attribute values on.

b – Click the Use expression button.

This opens the Arcade Editor where you can begin creating your expression. Choose from profile variables and functions to create your expression, with code completion guiding the way.

View the Arcade function reference for additional information on functions, constants, returning values, and evaluating expressions. As you enter your expression, you can use the Run button to validate the expression.

As with any scripting or programming language, your programming style will be unique. You can make your Arcade expressions terse and compact, but often for readability it pays to add comments and expand your code logic. Below is the completed expression used to rotate the symbols in this example.

// Calculate Rotation
// Returns the rotation angle to display percentage capacity on the gauge.

var percent_capacity = 0;
var integer_capacity = 0;
var rotation = 0;

// Calculate percentage of total capacity currently in the reservoir
percent_capacity = ($feature.CurrentStorage / $feature.TotalCapacity);

// Turn that into an integer for further calculations…
integer_capacity = percent_capacity * 100;

// Determine the rotation of the needle based upon the orientation
// of the needle with respect to the dial. The needle points to
// 225 degrees and the %100 mark on the dial is at 135 degrees. The
// total rotation from zero percent to %100 is 270 degrees. To
// calculate degrees in dial equivalents, divide 270 by 100 to
// get the multiplier for the rotation, and round.

rotation = round (integer_capacity * 2.70, 0);

// A reservoir can be over capacity, if so just show %100 full
if (rotation > 270) {
  return 270;
}
else {
return rotation;
}

More information

The custom symbols used to construct the gauge are shown below.

For more information, see the following:

• ArcGIS Arcade
• Arcade Function Reference
• Create gauges using stacked symbols and rotation (Blog)

This blog article was originally published on January 28, 2018, and has been updated.