{"id":82321,"date":"2026-03-18T18:01:46","date_gmt":"2026-03-19T01:01:46","guid":{"rendered":"http:\/\/www.esri.com\/arcgis-blog\/products\/product\/uncategorized\/using-arcade-to-rotate-symbols-in-web-maps\/"},"modified":"2026-03-18T18:14:17","modified_gmt":"2026-03-19T01:14:17","slug":"arcade-rotate-symbols","status":"publish","type":"blog","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/arcade-rotate-symbols","title":{"rendered":"Use Arcade to rotate symbols in web maps"},"author":7641,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","format":"standard","meta":{"_acf_changed":false,"_searchwp_excluded":""},"categories":[777102,22941],"tags":[32551,32521,35241,325542],"industry":[],"product":[36571,36551],"class_list":["post-82321","blog","type-blog","status-publish","format-standard","hentry","category-arcade","category-mapping","tag-arcade","tag-arcade-expressions","tag-rotation","tag-symbols","product-arcgis-enterprise","product-arcgis-online"],"acf":{"short_description":"Arcade\u00a0can be used to control rendering and symbology, including the visualization and rotation of symbols, as well as labeling and pop-ups.","flexible_content":[{"acf_fc_layout":"content","content":"

This blog article was originally published on January 28, 2018, and has been updated. The last previous update was January 6, 2025.<\/em><\/p>\n"},{"acf_fc_layout":"content","content":"

Arcade<\/a>\u00a0is 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.<\/p>\n"},{"acf_fc_layout":"content","content":"

 <\/p>\n

Use Arcade for symbol rotation<\/h2>\n

In the example web map<\/a> below, paired and rotated symbols were used to create a gauge showing the current capacity of reservoirs. You can sign in to your account to save the map, or follow along without signing in.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":2960767,"id":2960767,"title":"symrot-27","filename":"symrot-27.png","filesize":64035,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/01\/symrot-27.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/rotating-point-symbols\/symrot-27","alt":"Symbol rotation using Arcade","author":"7641","description":"","caption":"Open map","name":"symrot-27","status":"inherit","uploaded_to":81481,"date":"2026-03-18 23:49:52","modified":"2026-03-18 23:54:43","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":600,"height":457,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/01\/symrot-27-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/01\/symrot-27.png","medium-width":343,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/01\/symrot-27.png","medium_large-width":600,"medium_large-height":457,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/01\/symrot-27.png","large-width":600,"large-height":457,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/01\/symrot-27.png","1536x1536-width":600,"1536x1536-height":457,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/01\/symrot-27.png","2048x2048-width":600,"2048x2048-height":457,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/01\/symrot-27.png","card_image-width":600,"card_image-height":457,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/01\/symrot-27.png","wide_image-width":600,"wide_image-height":457}},"image_position":"left-center","orientation":"horizontal","hyperlink":"https:\/\/www.arcgis.com\/apps\/mapviewer\/index.html?webmap=38d0cab60a944ae4a9b8d55483f92814"},{"acf_fc_layout":"content","content":"

To create the gauge, the Reservoir Locations<\/strong> layer was duplicated, renamed to Needle<\/strong> and Dial<\/strong>, and both layers were added to a group named Reservoir Gauges<\/strong>.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":2960772,"id":2960772,"title":"resgauge-1","filename":"resgauge-1.png","filesize":11651,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/01\/resgauge-1.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/arcade-rotate-symbols\/resgauge-1","alt":"Reservoir gauge","author":"7641","description":"","caption":"","name":"resgauge-1","status":"inherit","uploaded_to":82321,"date":"2026-03-19 00:54:35","modified":"2026-03-19 00:54:53","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":725,"height":197,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/01\/resgauge-1-213x197.png","thumbnail-width":213,"thumbnail-height":197,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/01\/resgauge-1.png","medium-width":464,"medium-height":126,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/01\/resgauge-1.png","medium_large-width":725,"medium_large-height":197,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/01\/resgauge-1.png","large-width":725,"large-height":197,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/01\/resgauge-1.png","1536x1536-width":725,"1536x1536-height":197,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/01\/resgauge-1.png","2048x2048-width":725,"2048x2048-height":197,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/01\/resgauge-1.png","card_image-width":725,"card_image-height":197,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/01\/resgauge-1.png","wide_image-width":725,"wide_image-height":197}},"image_position":"left-center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"

Each layer representing the gauge uses two overlapping and centered symbols; one symbol is the dial background and the other symbol is the needle that is rotated to show the current level of the reservoir.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":438132,"id":438132,"title":"arc-2","filename":"arc-2.png","filesize":12845,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/01\/arc-2.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/arcade-rotate-symbols\/arc-2","alt":"","author":"7641","description":"","caption":"","name":"arc-2","status":"inherit","uploaded_to":82321,"date":"2019-02-14 04:38:17","modified":"2019-02-14 04:38:17","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":516,"height":184,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/01\/arc-2-150x150.png","thumbnail-width":150,"thumbnail-height":150,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/01\/arc-2-300x107.png","medium-width":300,"medium-height":107,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/01\/arc-2.png","medium_large-width":516,"medium_large-height":184,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/01\/arc-2.png","large-width":516,"large-height":184,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/01\/arc-2.png","1536x1536-width":516,"1536x1536-height":184,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/01\/arc-2.png","2048x2048-width":516,"2048x2048-height":184,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/01\/arc-2.png","card_image-width":516,"card_image-height":184,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/01\/arc-2.png","wide_image-width":516,"wide_image-height":184}},"image_position":"left-center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"

To learn how to create the gauges, see Create gauges using stacked symbols and rotation<\/a>. The gauge symbol components can be found and saved in the More information section at the end of this blog article.<\/p>\n"},{"acf_fc_layout":"content","content":"

 <\/p>\n

The Arcade expression<\/h2>\n

An Arcade expression\u00a0is used to calculate the needle symbol rotation that shows the reservoir level as a percentage of its total capacity. The crux of the expression\u00a0is to determine the rotation in compass degrees\u00a0needed to rotate the needle\u00a0to represent the appropriate percentage full value on the dial.<\/p>\n

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 going 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.<\/p>\n"},{"acf_fc_layout":"content","content":"

 <\/p>\n

Add the Arcade expression<\/h2>\n

To add the Arcade expression for symbol rotation, select the needle layer and in the Rotation by attribute<\/strong> section do the following:<\/p>\n

a<\/strong>\u00a0\u2013 Toggle\u00a0Rotate symbols based on attribute values<\/strong>\u00a0on.<\/p>\n

b<\/strong> \u2013 Click the Use expression<\/strong> button.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1881992,"id":1881992,"title":"arcrot-1","filename":"arcrot-1.png","filesize":33668,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/02\/arcrot-1.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/arcade-rotate-symbols\/arcrot-1","alt":"Rotation by attribute","author":"7641","description":"","caption":"","name":"arcrot-1","status":"inherit","uploaded_to":82321,"date":"2023-03-21 20:57:17","modified":"2023-03-21 20:57:33","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":346,"height":692,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/02\/arcrot-1-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/02\/arcrot-1.png","medium-width":131,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/02\/arcrot-1.png","medium_large-width":346,"medium_large-height":692,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/02\/arcrot-1.png","large-width":346,"large-height":692,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/02\/arcrot-1.png","1536x1536-width":346,"1536x1536-height":692,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/02\/arcrot-1.png","2048x2048-width":346,"2048x2048-height":692,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/02\/arcrot-1-233x465.png","card_image-width":233,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/02\/arcrot-1.png","wide_image-width":346,"wide_image-height":692}},"image_position":"left-center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"

This opens the Arcade Editor where you can begin creating your expression. Choose from profile variables and functions to create your expression, with code completion guiding the way. You can also use the Arcade assistant (beta)<\/a> which uses artificial intelligence (AI) to generate expressions from natural language prompts.<\/p>\n

View the Arcade\u00a0function reference\u00a0<\/a>for additional information on functions, constants, returning values, and evaluating expressions. As you enter your expression, you can use the Run<\/strong> button to validate the expression.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":2960773,"id":2960773,"title":"resgauge-2","filename":"resgauge-2.png","filesize":26131,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/01\/resgauge-2.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/arcade-rotate-symbols\/resgauge-2","alt":"Arcade editor","author":"7641","description":"","caption":"View larger image","name":"resgauge-2","status":"inherit","uploaded_to":82321,"date":"2026-03-19 01:01:02","modified":"2026-03-19 01:01:40","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":1059,"height":628,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/01\/resgauge-2-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/01\/resgauge-2.png","medium-width":440,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/01\/resgauge-2.png","medium_large-width":768,"medium_large-height":455,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/01\/resgauge-2.png","large-width":1059,"large-height":628,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/01\/resgauge-2.png","1536x1536-width":1059,"1536x1536-height":628,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/01\/resgauge-2.png","2048x2048-width":1059,"2048x2048-height":628,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/01\/resgauge-2-784x465.png","card_image-width":784,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/01\/resgauge-2.png","wide_image-width":1059,"wide_image-height":628}},"image_position":"left-center","orientation":"horizontal","hyperlink":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/01\/resgauge-2.png"},{"acf_fc_layout":"content","content":"

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\u00a0logic.\u00a0Below is\u00a0the completed expression used to rotate the symbols in this example.<\/p>\n"},{"acf_fc_layout":"content","content":"

\/\/ Calculate Needle Rotation<\/span>
\n \/\/ Returns the rotation angle to display percentage capacity on the gauge.<\/span><\/p>\n

var percent_capacity =<\/span> 0<\/span>;<\/span><\/span><\/strong>
\nvar integer_capacity =<\/span> 0<\/span>;<\/span><\/span><\/strong>
\nvar rotation =<\/span> 0<\/span>;<\/span><\/span><\/strong><\/p>\n

\/\/ Calculate percentage of total capacity currently in the reservoir<\/span>
\npercent_capacity = ($feature.CurrentStorage \/ $feature.TotalCapacity);<\/span><\/strong><\/p>\n

\/\/ Turn that into an integer for further calculations\u2026<\/span>
\ninteger_capacity = percent_capacity *<\/span> 100<\/span>;<\/span><\/span><\/strong><\/p>\n

\/\/ Determine the rotation of the needle based upon the orientation <\/span>
\n \/\/ of the needle with respect to the dial. The needle points to <\/span>
\n \/\/ 225 degrees and the %100 mark on the dial is at 135 degrees. The<\/span>
\n \/\/ total rotation from zero percent to %100 is 270 degrees. To <\/span>
\n \/\/ calculate degrees in dial equivalents, divide 270 by 100 to<\/span>
\n \/\/ get the multiplier for the rotation, and round.<\/span><\/p>\n

rotation = round<\/span> (integer_capacity * 2.70<\/span>, 0<\/span>);<\/span><\/strong><\/p>\n

\/\/ A reservoir can be over capacity, if so just show %100 full<\/span>
\nif (rotation <\/span>> 270<\/span>) {<\/span><\/strong>
\n\u00a0 return<\/span>\u00a0<\/span>270<\/span><\/span>;<\/span><\/strong>
\n }<\/span><\/strong>
\n else {<\/span><\/strong>
\n return <\/span><\/strong>rotation<\/span>;<\/span><\/strong>
\n }<\/span><\/strong><\/p>\n"},{"acf_fc_layout":"content","content":"

 <\/p>\n

More information<\/h2>\n

The custom symbols used to construct the gauge are shown below. If you are following along using the sample map, right click the images to save them, then use them as custom symbols in your web map.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1882082,"id":1882082,"title":"dial270","filename":"dial270.png","filesize":12921,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/02\/dial270.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/arcade-rotate-symbols\/dial270","alt":"dail270","author":"7641","description":"","caption":"Click to view image and save","name":"dial270","status":"inherit","uploaded_to":82321,"date":"2023-03-21 21:24:15","modified":"2023-03-21 21:25:17","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":200,"height":200,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/02\/dial270.png","thumbnail-width":200,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/02\/dial270.png","medium-width":200,"medium-height":200,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/02\/dial270.png","medium_large-width":200,"medium_large-height":200,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/02\/dial270.png","large-width":200,"large-height":200,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/02\/dial270.png","1536x1536-width":200,"1536x1536-height":200,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/02\/dial270.png","2048x2048-width":200,"2048x2048-height":200,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/02\/dial270.png","card_image-width":200,"card_image-height":200,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/02\/dial270.png","wide_image-width":200,"wide_image-height":200}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/02\/dial270.png"},{"acf_fc_layout":"image","image":{"ID":1882092,"id":1882092,"title":"needle270","filename":"needle270.png","filesize":9606,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/02\/needle270.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/arcade-rotate-symbols\/needle270","alt":"needle270","author":"7641","description":"","caption":"Click to view image and save","name":"needle270","status":"inherit","uploaded_to":82321,"date":"2023-03-21 21:25:31","modified":"2023-03-21 21:25:54","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":200,"height":200,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/02\/needle270.png","thumbnail-width":200,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/02\/needle270.png","medium-width":200,"medium-height":200,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/02\/needle270.png","medium_large-width":200,"medium_large-height":200,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/02\/needle270.png","large-width":200,"large-height":200,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/02\/needle270.png","1536x1536-width":200,"1536x1536-height":200,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/02\/needle270.png","2048x2048-width":200,"2048x2048-height":200,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/02\/needle270.png","card_image-width":200,"card_image-height":200,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/02\/needle270.png","wide_image-width":200,"wide_image-height":200}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/02\/needle270.png"},{"acf_fc_layout":"content","content":"

For more information, see the following:<\/p>\n