ArcGIS Blog

Mapping

ArcGIS Online

Rotate point symbols in web maps

By Bern Szukalski

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. You can set the rotation angles to be measured clockwise or counter-clockwise, depending on how values are stored.

Note that when rotating clockwise that angles are measured clockwise from the 12 o’clock position, and when rotating counterclockwise the angles are measured counterclockwise from the 3 o’clock position as shown below.

 

Symbol rotation exercise

Open the California Fire Webcams sample 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 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.

Select layer

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 cam is pointing.

Rotation value

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.

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.

Rotate symbols based on attribute values

The map now displays the webcam locations with the arrow rotated to show the direction each cam points.

Rotated symbols

 

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.

Open map

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.

Open map

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.

View map

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

 

More information

For more information, see Change style.

This post was originally published on January 6, 2014, and has been updated.

Share this article