Rotate point symbols in web maps

This post was originally published on January 6, 2014, and has been updated. The last previous update was March 20, 2023.

Many things we place on a map have something in common besides having a location; they also have rotation.  For example, wind has direction. So does the the way a webcam points. Moving objects, such as a plane or car, have direction. And even the dials on a gauge point in a specific direction.

Symbols can be rotated based on a numeric value, useful for showing the direction the symbol should point to provide context for the feature. The data must have a field containing values that will be used for rotation, typically a compass direction with clockwise values of zero at north, 90 east, 180 south, and so on.

But compass azimuths aren’t required for rotating symbols, and you can use any value that makes sense for your needs, including values calculated using Arcade expressions. You can set the rotation angles to be measured in geographic rotation (clockwise from the 12 o’clock position) or arithmetic rotation (measured counterclockwise from the 3 o’clock position).

Use symbol rotation

Open the California Fire Webcams example map to follow along. You can sign in to save the map to your account, or you can modify the map without saving.

The map contains two layers, one without rotation and the other with symbol rotation applied showing the direction the camera is pointing expressed as clockwise (geographic) compass azimuths.

Step 1 — Open the California Fire Webcams map. From the Contents (dark) toolbar, open the layers pane and make sure the Fire Webcams layer is selected and visible.

Step 2 — Click a webcam location on the map to view the unconfigured pop-up. Note that the View Degrees field contains the rotation to be applied to the symbol to show the direction the webcam is pointing.

Step 3 — In the Settings (light) toolbar, click Styles to open the Styles pane. The locations are symbolized using a single symbol. In the Pick a style section, click Style options.

Step 3 — Make the following changes in the Rotation by attribute pane.

a – Toggle Rotate symbols based on attribute values on.

b – From the field drop-down, choose View Degrees. As noted in Step 2, this is the field containing the rotation to be applied.

c – Ensure that Geographic rotation is toggled on. The View Degrees rotation values are expressed in compass direction.

The map now displays the webcam locations with the arrow rotated based on the attribute value.

Other examples

Rotation can be applied to any feature layer in your map. Below is an example showing captured locations for inbound and outbound planes traveling through San Diego. The feature layer uses custom symbols to show inbound and outbound traffic with rotation applied from flight heading data.

Current Weather and Wind Station Data is an ArcGIS Living Atlas live feed from NOAA. The arrows are rotated using an attribute to show the direction the wind is blowing.

This next example uses a technique of stacking symbols to create a gauge using custom dial and needle symbols, and using symbol rotation to rotate the dial.

For more information see Create gauges using stacked symbols and rotation.

This next example uses Arcade to rotate a dial to show reservoir capacity. Arcade is an expression language built-in to ArcGIS Online.

For more information see Use Arcade to rotate symbols in web maps and the Arcade documentation.

More information

For more information, see the following:

• Use style options (Help)
• Rotate by attribute (Help)