ArcWatch: GIS News, Views, and Insights

October 2016

Learn to Rotate Point Symbols in Web Maps

By Bern Szukalski
Esri Technology Evangelist

Symbols on web maps can be rotated based on a numeric value, which is useful for showing, for example, directional items such as where a camera is pointing, a car is moving, or the wind is blowing. The data must have a field containing values that will be used for rotation—typically a compass direction with clockwise values of 0 for north, 90 for east, 180 for 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 counterclockwise, depending on how values are stored.

To learn how to create rotating symbols, download the sample CSV file and follow along. The CSV file contains web camera locations (dummy locations, not actual ones) as well as the direction in which the cameras are pointing, expressed as clockwise compass azimuths.

Step 1—Inspect the data.

Open the file using Microsoft Excel, Notepad, or some other text editor to view the contents. Note that the file contains the latitude-longitude location, as well as the direction, which will be used to rotate the symbol.

Step 2—Add the CSV file data to your map.

In ArcGIS Online, either drag the CSV file data to your map or choose Add, then choose Add Layer from File).

Step 3—Change the style of the location.

When you add the CSV file in step 2 above, Change Style automatically opens. Choose Show location only, and under Location (Single Symbol) click OPTIONS.

Step 4—Click Symbols to change symbols.

Step 5—Choose an arrow.

Choose an arrow symbol from the Arrows category. Since the rotation values are stored as compass directions with 0 pointing north (up), choose an arrow that points up.

Change the symbol size as desired, then click OK.

Step 6—Rotate the symbol.

Check the Rotate symbols (degrees) box, and from the drop-down choose Direction as the field containing values used for rotation. The values are already stored in the expected compass azimuth format described above, so Clockwise (the default) is the correct rotation option.

Save your style changes when finished.

Step 7—View the map.

The map now displays the camera locations, with arrows rotated to show the direction in which each camera is pointing.

A Few Additional 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 from San Francisco to Los Angeles via San Diego. The layer source is a shapefile, and custom symbols were created to represent the inbound and outbound traffic.

The example below uses a feature service with continually updated wind speed and direction. The symbols are rotated based on direction and sized by speed.

For more information, see Change style.