ArcGIS Online

Using 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 show the current capacity of reservoirs.

To create the dial 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 will be rotated to show the current level of the reservoir. See Creating 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 to go 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 rotation, change the style of the layer, check the box to Rotate symbols, and choose New Expression.

In the Arcade Editor, begin creating your expression. You can choose from globals (field attributes), functions, and constants. 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 Test 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

To replicate the example above, the custom symbols used are listed below:

For more information see the following blog posts and help topics:


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

About the author

Corporate tech evangelist and senior principal product manager at Esri, focusing on ways to broaden access to geographic information and helping users succeed with the ArcGIS online system. On a good day I'm making a map, on a great day I'm on one. Follow @bernszukalski or email


Next Article

Manage Your Branch Versions with ArcGIS Experience Builder

Read this article