The basics of symbol rotation were covered in a previous post that focused on using rotated symbols to display compass direction, such as the direction a vehicle is traveling, a camera is pointing, or the wind is blowing. In addition to rotating symbols to show compass direction, you can also use symbol rotation to display values. In this post we’ll detail a technique that can be used to display values in gauges or dials on your map using layered symbols, rotating one of them.
An example – performance indicators
The map below uses paired, rotated symbols to show performance indicators for retail store locations. The performance value is shown on the dial, and ranges from zero to 100. Note that each dial is displaying a different value:
To create the dial symbols, the layer was duplicated and uses two overlapping symbols; one symbol is the background of the dial, and the other symbol is the needle on the dial which will be rotated to display the value.
In the web map these show up as duplicate layers. To hide the unwanted duplicate, toggle Hide in Legend. This removes the layer from the legend in web maps and apps.
Depending on your implementation, there may be some changes that need to be made to your gauges or to the data that enables the rotation of gauge elements. For example, in the above example to display a value of 50 on the gauge, the attribute value for needle rotation would be 90. To display a value of 100 on the gauge the rotation would be 180, and so forth. View an example web map.
Try it yourself
To make your own gauge and dial map, sign in to your organization, and follow these steps.
Step 1. Download the spreadsheet (CSV file) containing locations and rotation values.
Open the CSV item, and click the thumbnail to download.
Step 2. Open a new map, and drag and drop the spreadsheet onto your map. Cancel out of smart mapping.
Step 3. Copy the layer.
Step 4. Rename the layers. Name one of the layers Value, and the other Gauge. Later we will hide the Gauge layer, and the Value layer will point to the number (value) on the gauge. Ensure the Value layer is above the Gauge layer.
Step 5. Change the style for the Gauge layer.
Step 6. Choose Show location only, and click Options for the single sysmbol style.
Step 7. Add the custom gauge symbol.
7a. Click Symbols to change the symbol.
7b. Click Use an Image.
7c. Copy the URL for the gauge symbol and paste the URL into the input box.
7d. Adjust the size to about 100 px.
7c. Click Ok.
Step 8. Repeat steps 5 through 7 using the needle symbol that will be used to point to the value on the gauge. Your map symbols should look like this:
Step 9. Apply symbol rotation to the needle layer.
Check the box to Rotate symbols, and choose the field CW_Rotation which contains the rotation values. Set the rotation Clockwise from 12.
These values were calculated based on the default orientation of the needle (to the left) and the value to be displayed. For example, to move the needle to point to a value of 50 on the gauge, the needle should be rotated 90 degrees clockwise, to move the needle to point to a value of 75 on the gauge, the needle should be rotated 135 degrees clockwise, and so forth.
Save your style edits.
Step 10. Hide the legend for the Gauge layer.
We duplicated the original layer we added using the CSV file, and we only need one layer (Value) in our legend. So we can remove the Gauge layer from the legend by opening the layer options, and clicking Hide in Legend.
Save your map when finished. Your map should look similar to this example.
Click the symbol to view the value.
Summary and more information
With a little bit of creative thinking, you can do some very interesting and clever things with layering and rotating symbols. For more information see:
This post was originally published on January 8, 2014, and has been updated.