{"id":2036182,"date":"2023-08-07T14:15:57","date_gmt":"2023-08-07T21:15:57","guid":{"rendered":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&p=2036182"},"modified":"2024-04-12T01:16:32","modified_gmt":"2024-04-12T08:16:32","slug":"visualizing-air-quality-with-animated-symbols","status":"publish","type":"blog","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/visualizing-air-quality-with-animated-symbols","title":{"rendered":"Visualizing Air Quality with Animated Symbols"},"author":10062,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"","format":"standard","meta":{"_acf_changed":false,"_searchwp_excluded":""},"categories":[738191,22941],"tags":[588281,30171,32551,769562,757731],"industry":[],"product":[761642,36831],"class_list":["post-2036182","blog","type-blog","status-publish","format-standard","hentry","category-developers","category-mapping","tag-air-quality","tag-animation","tag-arcade","tag-arcgis-maps-sdk-for-javascript","tag-cimsymbol","product-platform","product-js-api-arcgis"],"acf":{"authors":[{"ID":10062,"user_firstname":"Anne","user_lastname":"Fitz","nickname":"Anne Fitz","user_nicename":"afitz","display_name":"Anne Fitz","user_email":"afitz@esri.com","user_url":"","user_registered":"2019-10-15 00:07:57","user_description":"Anne Fitz is a Senior Product Engineer at Esri, working on the ArcGIS Maps SDK for JavaScript and ArcGIS Arcade. Her expertise primarily focuses on dynamic vector symbology (CIM symbols), data visualization, animation, ArcGIS Arcade integration, and widgets. Anne\u2019s primary goal is to help developers succeed in building geospatial applications, providing them with the tools and knowledge they need to bring their ideas to life. She has been with Esri for over five years.","user_avatar":""}],"short_description":"Learn how to use animated CIM symbols within the ArcGIS Maps SDK for JavaScript to draw attention to features with poor air quality.","flexible_content":[{"acf_fc_layout":"content","content":"

Air quality is an essential aspect of our daily lives and significantly impacts our health and overall well-being. As we approach wildfire season in California and witness rising carbon emissions<\/a> across the globe, being aware of the air quality in our surroundings becomes even more important.<\/p>\n

There’s no shortage of maps visualizing air quality, but in this blog I’ll discuss how you can use animated symbols to\u00a0draw attention to areas with unhealthy or hazardous air quality. To do this, I\u2019ll take advantage of the animation capabilities in CIM symbols<\/a> in the ArcGIS Maps SDK for JavaScript<\/a>.<\/p>\n

View the app<\/a> | Source code<\/a><\/p>\n"},{"acf_fc_layout":"image","image":{"ID":2038252,"id":2038252,"title":"aqi","filename":"aqi.gif","filesize":234953,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/07\/aqi.gif","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/visualizing-air-quality-with-animated-symbols\/aqi","alt":"","author":"10062","description":"","caption":"Air Quality Index in the Los Angeles area on July 31st around 10am.","name":"aqi","status":"inherit","uploaded_to":2036182,"date":"2023-07-31 16:54:36","modified":"2023-07-31 16:55:07","menu_order":0,"mime_type":"image\/gif","type":"image","subtype":"gif","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":1000,"height":601,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/07\/aqi-213x200.gif","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/07\/aqi.gif","medium-width":434,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/07\/aqi.gif","medium_large-width":768,"medium_large-height":462,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/07\/aqi.gif","large-width":1000,"large-height":601,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/07\/aqi.gif","1536x1536-width":1000,"1536x1536-height":601,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/07\/aqi.gif","2048x2048-width":1000,"2048x2048-height":601,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/07\/aqi-774x465.gif","card_image-width":774,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/07\/aqi.gif","wide_image-width":1000,"wide_image-height":601}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/annelfitz.github.io\/UC-presentations\/UC-2023\/data-visualization\/cim\/AQI.html"},{"acf_fc_layout":"content","content":"

What’s a CIM symbol?<\/h2>\n

CIM symbols<\/a> are complex, multi-layer vector symbols that can be used to visualize point, line, and polygon features. They can be comprised of one or more symbol layers<\/a> with a variety of properties, giving you extensive control over how your symbol is visualized. With CIM symbols, you can create unique, custom symbols that fit your needs.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":2036242,"id":2036242,"title":"CIM","filename":"CIM.png","filesize":253371,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/07\/CIM.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/visualizing-air-quality-with-animated-symbols\/cim","alt":"","author":"10062","description":"","caption":"","name":"cim","status":"inherit","uploaded_to":2036182,"date":"2023-07-27 20:12:48","modified":"2023-07-27 20:12:48","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":1430,"height":727,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/07\/CIM-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/07\/CIM.png","medium-width":464,"medium-height":236,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/07\/CIM.png","medium_large-width":768,"medium_large-height":390,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/07\/CIM.png","large-width":1430,"large-height":727,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/07\/CIM.png","1536x1536-width":1430,"1536x1536-height":727,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/07\/CIM.png","2048x2048-width":1430,"2048x2048-height":727,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/07\/CIM-826x420.png","card_image-width":826,"card_image-height":420,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/07\/CIM.png","wide_image-width":1430,"wide_image-height":727}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"

Another aspect of working with CIM symbols is that you can use primitive overrides<\/a>, which allow you to dynamically update the property of a symbol layer (primitive) based on a feature attribute or Arcade<\/a> expression.<\/p>\n

CIM symbols are created based on a JSON object of a CIMSymbolReference<\/a> that follows the cim specification<\/a>, which is used to define symbology across ArcGIS products.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":2042752,"id":2042752,"title":"carbon","filename":"carbon.png","filesize":48850,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/08\/carbon.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/visualizing-air-quality-with-animated-symbols\/carbon-2","alt":"","author":"10062","description":"","caption":"","name":"carbon-2","status":"inherit","uploaded_to":2036182,"date":"2023-08-04 16:06:09","modified":"2023-08-04 16:06:09","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":760,"height":399,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/08\/carbon-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/08\/carbon.png","medium-width":464,"medium-height":244,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/08\/carbon.png","medium_large-width":760,"medium_large-height":399,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/08\/carbon.png","large-width":760,"large-height":399,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/08\/carbon.png","1536x1536-width":760,"1536x1536-height":399,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/08\/carbon.png","2048x2048-width":760,"2048x2048-height":399,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/08\/carbon.png","card_image-width":760,"card_image-height":399,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/08\/carbon.png","wide_image-width":760,"wide_image-height":399}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-symbols-CIMSymbol.html"},{"acf_fc_layout":"content","content":"

For more information on CIM symbols, you can check out this blog<\/a> or this presentation<\/a> from the Developer Summit.<\/p>\n

CIM symbols + animation<\/h3>\n

You can add animation to your CIM symbols with animated GIFs or PNGs in a CIMPictureMarker<\/a> symbol layer. At version 4.24<\/a>, we added support for a variety of animation properties<\/a> that give you more control over how your GIF will animate, such as the duration, startTime, repeatType, and more.<\/p>\n

You can also use primitive overrides with any of these properties, tying them to a feature attribute or Arcade expression. For instance, I want features with high air quality to animate faster than those with lower air quality. To do this, I\u2019ll set a primitive override on the duration property, returning a shorter duration when the air quality is high, and a longer duration when air quality is low.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":2038182,"id":2038182,"title":"bad-AQI","filename":"bad-AQI.gif","filesize":321393,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/07\/bad-AQI.gif","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/visualizing-air-quality-with-animated-symbols\/bad-aqi","alt":"","author":"10062","description":"","caption":"Air Quality Index in Riverside county during the Bonny Fire at 8am on Monday, July 31st. Notice how features with the highest AQI (in maroon) animate faster than those with a lower AQI (in red and purple).","name":"bad-aqi","status":"inherit","uploaded_to":2036182,"date":"2023-07-31 16:03:53","modified":"2023-08-07 21:15:26","menu_order":0,"mime_type":"image\/gif","type":"image","subtype":"gif","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":1000,"height":400,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/07\/bad-AQI-213x200.gif","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/07\/bad-AQI.gif","medium-width":464,"medium-height":186,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/07\/bad-AQI.gif","medium_large-width":768,"medium_large-height":307,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/07\/bad-AQI.gif","large-width":1000,"large-height":400,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/07\/bad-AQI.gif","1536x1536-width":1000,"1536x1536-height":400,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/07\/bad-AQI.gif","2048x2048-width":1000,"2048x2048-height":400,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/07\/bad-AQI-826x330.gif","card_image-width":826,"card_image-height":330,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/07\/bad-AQI.gif","wide_image-width":1000,"wide_image-height":400}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/annelfitz.github.io\/UC-presentations\/UC-2023\/data-visualization\/cim\/AQI.html"},{"acf_fc_layout":"content","content":"

Now that you have a bit of background information, let\u2019s get into how the app was built.<\/p>\n

How the app was built<\/h2>\n

Getting the data<\/h3>\n

The first step when creating a mapping application is always finding the right data, and the first place I like to look for data is the Living Atlas<\/a>. The Living Atlas contains a variety of layers, maps, and applications about air quality<\/a>.\u00a0In this app, I’ll use the OpenAQ Recent Conditions in Air Quality<\/a> layer, which is a live feed containing air quality information from OpenAQ<\/a>.<\/p>\n"},{"acf_fc_layout":"content","content":"

Creating the CIM symbol<\/h3>\n

Once we have the data, the next step is to symbolize it in the map – I’ll do this using a CIM symbol<\/a>. As I mentioned earlier, CIM symbols are created from a JSON object based on the CIMSymbolReference<\/a>. This JSON can get quite large and can be cumbersome to write from scratch, so that’s where the CIM Symbol Builder<\/a> can help. It is a tool that provides a simple UI for creating CIM symbols, allowing you to add symbol layers, adjust their properties, visualize the symbol in a map, and then copy out the JSON to use when you’re done. For more info on the CIM symbol builder, check out this blog post<\/a>.<\/p>\n

Using the CIM Symbol Builder<\/a>, I first added a circle CIMVectorMarker<\/a> symbol layer (found under the shapes tab), and then I added a CIMPictureMarker<\/a> symbol layer (found under the Custom tab). I replaced the URL to the image to a GIF from Wikimedia commons of a blinking white circle<\/a>, as shown in the illustration below.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":2037862,"id":2037862,"title":"cim-builder","filename":"cim-builder-2.gif","filesize":2103663,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/07\/cim-builder-2.gif","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/visualizing-air-quality-with-animated-symbols\/cim-builder-4","alt":"","author":"10062","description":"","caption":"The CIM Symbol Builder can help to quickly create CIM symbols by providing a UI to add symbol layers and update their properties.","name":"cim-builder-4","status":"inherit","uploaded_to":2036182,"date":"2023-07-28 22:37:16","modified":"2023-08-03 18:31:35","menu_order":0,"mime_type":"image\/gif","type":"image","subtype":"gif","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":1201,"height":800,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/07\/cim-builder-2-213x200.gif","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/07\/cim-builder-2.gif","medium-width":392,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/07\/cim-builder-2.gif","medium_large-width":768,"medium_large-height":512,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/07\/cim-builder-2.gif","large-width":1201,"large-height":800,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/07\/cim-builder-2.gif","1536x1536-width":1201,"1536x1536-height":800,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/07\/cim-builder-2.gif","2048x2048-width":1201,"2048x2048-height":800,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/07\/cim-builder-2-698x465.gif","card_image-width":698,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/07\/cim-builder-2.gif","wide_image-width":1201,"wide_image-height":800}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/esri.github.io\/cim-symbol-builder-js\/"},{"acf_fc_layout":"content","content":"

After playing around with the colors and sizes of each symbol layer, I clicked the “Get Symbol JSON” button to copy out the symbol JSON and use it in my app.<\/p>\n

I placed the symbol JSON in a function called createCIMSymbol()<\/code>. I updated the CIM JSON by adding the animatedSymbolProperties<\/code> to my CIMPictureMarker symbol layer. This allowed me to set the animation to “Loop” and reduce the length of the animation.<\/p>\n"},{"acf_fc_layout":"content","content":"

\r\n{\r\n  type<\/span>: \"CIMPictureMarker\"<\/span>,\r\n  enable<\/span>: true<\/span>,\r\n  size<\/span>: 25<\/span>,\r\n  scaleX<\/span>: 1<\/span>,\r\n  tintColor<\/span>: [255<\/span>, 255<\/span>, 255<\/span>, 255<\/span>],\r\n  url<\/span>: \"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/f\/fb\/Cercle_white_blink.gif\"<\/span>,\r\n  animatedSymbolProperties<\/span>: {\r\n    playAnimation<\/span>: true<\/span>,\r\n    duration<\/span>: 0.75<\/span>,\r\n    repeatType<\/span>: \"Loop\"<\/span>\r\n  }<\/span>\r\n}\r\n<\/code><\/pre>\n"},{"acf_fc_layout":"content","content":"
Since we’ll use the createCIMSymbol<\/code> function to create multiple CIM symbols of different colors, we’ll pass in color r<\/code>, b<\/code>, g<\/code> as a function argument, and update all instances of color in the symbol to use those values.<\/p>\n
function<\/span> createCIMSymbol<\/span>(r, g, b)<\/span> {\r\n  return<\/span> new<\/span> CIMSymbol<\/span>({\r\n    data<\/span>: {\r\n      type<\/span>: \"CIMSymbolReference\"<\/span>,\r\n      \/\/ primitiveOverrides: [],<\/span>\r\n      symbol<\/span>: {\r\n        type<\/span>: \"CIMPointSymbol\"<\/span>,\r\n        symbolLayers<\/span>: [{\r\n          type<\/span>: \"CIMPictureMarker\"<\/span>,\r\n          enable<\/span>: true<\/span>,\r\n          size<\/span>: 25<\/span>,\r\n          scaleX<\/span>: 1<\/span>,\r\n          tintColor<\/span>: [r, g, b,<\/span> 255<\/span>],\r\n          url<\/span>: \"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/f\/fb\/Cercle_white_blink.gif\"<\/span>,\r\n          animatedSymbolProperties<\/span>: {\r\n            playAnimation<\/span>: true<\/span>,\r\n            duration<\/span>: 0.75<\/span>,\r\n            repeatType<\/span>: \"Loop\"<\/span>\r\n          }\r\n        },\r\n        {\r\n          type<\/span>: \"CIMVectorMarker\"<\/span>,\r\n          enable<\/span>: true<\/span>,\r\n          anchorPoint<\/span>: {x<\/span>: 0<\/span>, y<\/span>: 0<\/span>},\r\n          anchorPointUnits<\/span>: \"Relative\"<\/span>,\r\n          size<\/span>: 22<\/span>,\r\n          frame<\/span>: {xmin<\/span>: 0<\/span>, ymin<\/span>: 0<\/span>, xmax<\/span>: 17<\/span>, ymax<\/span>: 17<\/span>},\r\n          markerGraphics<\/span>: [{\r\n            type<\/span>: \"CIMMarkerGraphic\"<\/span>,\r\n            geometry<\/span>: {...},\r\n            symbol<\/span>: {\r\n              type<\/span>: \"CIMPolygonSymbol\"<\/span>,\r\n              symbolLayers<\/span>: [{\r\n                type<\/span>: \"CIMSolidFill\"<\/span>,\r\n                enable<\/span>: true<\/span>,\r\n                color<\/span>: [r, g, b,<\/span> 125<\/span>]\r\n              }]\r\n            }\r\n          }],\r\n          scaleSymbolsProportionally<\/span>: true<\/span>,\r\n          respectFrame<\/span>: true<\/span>\r\n        }]\r\n      }\r\n    }\r\n  });\r\n}\r\n<\/code><\/pre>\n
For each of these categories, we\u2019ll use the same symbol but with a unique color, based on the AQI level of concern.<\/p>\n
layer.renderer = {\r\n  type<\/span>: \"class-breaks\"<\/span>,\r\n  field<\/span>: \"OZONEPM_AQI_SORT\"<\/span>,\r\n  legendOptions<\/span>: {\r\n    title<\/span>: \"Ozone & PM AQI\"<\/span>\r\n  },\r\n  classBreakInfos<\/span>: [\r\n    {\r\n      minValue<\/span>: 301<\/span>,\r\n      maxValue<\/span>: 5000<\/span>,\r\n      symbol<\/span>: createCIMSymbol<\/span>(126<\/span>, 0<\/span>, 35<\/span>),\r\n      label<\/span>: \"Hazardous\"<\/span>\r\n    },\r\n    {\r\n      minValue<\/span>: 201<\/span>,\r\n      maxValue<\/span>: 300<\/span>,\r\n      symbol<\/span>: createCIMSymbol<\/span>(143<\/span>, 63<\/span>, 151<\/span>),\r\n      label<\/span>: \"Very Unhealthy\"<\/span>\r\n    },\r\n    \/\/ continue with the rest of the AQI categories<\/span>\r\n    {...}\r\n  ]\r\n};\r\n<\/code><\/pre>\n
 <\/p>\n"},{"acf_fc_layout":"content","content":"
Making it data driven<\/h3>\n
Now that we\u2019ve created our symbol, it\u2019s time to add some data behind it. Lots of flashing circles doesn\u2019t make for a great map, so let\u2019s start by only playing the symbol\u2019s animation when the air quality of a feature is \u201cUnhealthy\u201d, \u201cVery Unhealthy\u201d, or \u201cHazardous\u201d.<\/p>\n
We\u2019ll add a primitive override<\/a> on our symbol for the playAnimation<\/code> property. We want this property to be true if the air quality is \u201cUnhealthy\u201d or worse, otherwise, we want this property to be false. To create a primitive override for our symbol, we first need to give it a primitiveName<\/code> \u2013 we\u2019ll call this \u201canimationOverride\u201d<\/code> \u2013 and determine the property that we want to override \u2013 PlayAnimation<\/code>. Then we need to apply this same primitiveName<\/code> within the object of the property we want to override.<\/p>\n"},{"acf_fc_layout":"content","content":"
function<\/span> createCIMSymbol<\/span>(r, g, b) {\r\n  return<\/span> new<\/span> CIMSymbol<\/span>({\r\n    data<\/span>: {\r\n      type<\/span>: \"CIMSymbolReference\"<\/span>,\r\n      primitiveOverrides<\/span>: [{\r\n        type<\/span>: \"CIMPrimitiveOverride\"<\/span>,\r\n        primitiveName<\/span>: \"animationOverride\"<\/span>,\r\n        propertyName<\/span>: \"PlayAnimation\"<\/span>,\r\n        ...\r\n      }],<\/span>\r\n      symbol<\/span>: {\r\n        type<\/span>: \"CIMPointSymbol\"<\/span>,\r\n        symbolLayers<\/span>: [\r\n          {\r\n            type<\/span>: \"CIMPictureMarker\"<\/span>,\r\n            enable<\/span>: true<\/span>,\r\n            size<\/span>: 25<\/span>,\r\n            scaleX<\/span>: 1<\/span>,\r\n            tintColor<\/span>: [r, g, b, 255<\/span>],\r\n            url<\/span>: \"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/f\/fb\/Cercle_white_blink.gif\"<\/span>,\r\n            animatedSymbolProperties<\/span>: {\r\n              primitiveName<\/span>: \"animationOverride\"<\/span>,<\/span>\r\n              playAnimation<\/span>: true<\/span>,\r\n              duration<\/span>: 0.75<\/span>,\r\n              repeatType<\/span>: \"Loop\"<\/span>\r\n            }\r\n          },\r\n          { ... }\r\n        ]\r\n      }\r\n    }\r\n  });\r\n}\r\n<\/code><\/pre>\n
primitiveOverrides<\/span>: [{\r\n  type<\/span>: \"CIMPrimitiveOverride\"<\/span>,\r\n  primitiveName<\/span>: \"animationOverride\"<\/span>,\r\n  propertyName<\/span>: \"PlayAnimation\"<\/span>,\r\n  valueExpressionInfo<\/span>: {\r\n    type<\/span>: \"CIMExpressionInfo\"<\/span>,\r\n    expression<\/span>: `$feature.OZONEPM_AQI_SORT >= 151`<\/span>\r\n  }<\/span>\r\n}]\r\n<\/code><\/pre>\n
Now we should only see animations where the air quality is Unhealthy, Very Unhealthy, or Hazardous.<\/p>\n
Let\u2019s add a little more meaning to the animation by updating the duration of each animation based on the hazard level. The more hazardous the air quality, the faster we want the animation to oscillate. We can do this by adding another<\/em>\u00a0primitive override on the\u00a0Duration<\/code>\u00a0property. We can use the same primitive name because the property we want to override is still within that\u00a0animatedSymbolProperties<\/code>\u00a0object on our CIMPictureMarker symbol layer.<\/p>\n
primitiveOverrides<\/span>: [{\r\n    type<\/span>: \"CIMPrimitiveOverride\"<\/span>,\r\n    primitiveName<\/span>: \"animationOverride\"<\/span>,\r\n    propertyName<\/span>: \"PlayAnimation\"<\/span>,\r\n    valueExpressionInfo<\/span>: {\r\n      type<\/span>: \"CIMExpressionInfo\"<\/span>,\r\n      expression<\/span>: `IIF($feature.OZONEPM_AQI_SORT >= 151, true, false)`<\/span>\r\n    }\r\n  },{\r\n    type<\/span>: \"CIMPrimitiveOverride\"<\/span>,\r\n    primitiveName<\/span>: \"animationOverride\"<\/span>,\r\n    propertyName<\/span>: \"Duration\"<\/span>,\r\n    valueExpressionInfo<\/span>: {\r\n      type<\/span>: \"CIMExpressionInfo\"<\/span>,\r\n      expression<\/span>: `When(\r\n        $feature.OZONEPM_AQI_SORT >= 151 && $feature.OZONEPM_AQI_SORT < 200, 1,\r\n        $feature.OZONEPM_AQI_SORT >= 201 && $feature.OZONEPM_AQI_SORT < 300, 0.5,\r\n        0.35\r\n      )`<\/span>\r\n    }\r\n}<\/span>]\r\n<\/code><\/pre>\n
Conclusion<\/h2>\n
In conclusion, animated CIM symbols can help users quickly see where the air quality is Unhealthy or Hazardous. Using animations in your maps can help bring your data to life and provide additional context for users at a quick glance.<\/p>\n
On the ArcGIS Maps SDK for JavaScript team, we are working on adding additional symbol animation capabilities, but would love to hear from you! What type of animations do you want to see supported? Let us know about any use cases you might have \u2014 feel free to email me<\/a>\u00a0or post in the comments below!<\/p>\n"},{"acf_fc_layout":"sidebar","content":"
Additional thoughts<\/strong><\/p>\n
This article discussed using CIM symbols with Arcade to animate symbols to bring attention to a specific phenomenon. While effective for most users, it may not be appropriate for all. Some users may experience discomfort from distracting or overstimulating effects. A user\u2019s preference for reduced motion may be detected using the prefers-reduced-motion<\/a> CSS property.<\/p>\n
\/\/ check for reduced motion<\/span>\r\nconst<\/span> isReduced = window<\/span>.matchMedia<\/span>(`(prefers-reduced-motion: reduce)`<\/span>) === true<\/span> || window<\/span>.matchMedia<\/span>(`(prefers-reduced-motion: reduce)`<\/span>).matches === true<\/span>;\r\n<\/code><\/pre>\n
You can then use this in your Arcade expression in the primitive override for PlayAnimation<\/code> to only play the animation if the user does not prefer reduced motion.<\/p>\n
\r\nprimitiveOverrides<\/span>: [{\r\n  type<\/span>: \"CIMPrimitiveOverride\"<\/span>,\r\n  primitiveName<\/span>: \"animationOverride\"<\/span>,\r\n  propertyName<\/span>: \"PlayAnimation\"<\/span>,\r\n  valueExpressionInfo<\/span>: {\r\n    type<\/span>: \"CIMExpressionInfo\"<\/span>,\r\n    \/\/ only play the animation if AQI is greater than 151 and user does not have reduced motion<\/span>\r\n    expression<\/span>: `$feature.OZONEPM_AQI_SORT >= 151 && !${isReduced}<\/span><\/span>`<\/span>\r\n  }\r\n}]\r\n<\/code><\/pre>\n","image_reference":false,"layout":"standard","image_reference_figure":"","snippet":"","spotlight_name":"","section_title":"","position":"Center","spotlight_image":false}],"related_articles":[{"ID":913801,"post_author":"10062","post_date":"2020-07-24 11:16:29","post_date_gmt":"2020-07-24 18:16:29","post_content":"","post_title":"Create points, lines, and polygons using CIMSymbols","post_excerpt":"","post_status":"publish","comment_status":"open","ping_status":"closed","post_password":"","post_name":"create-points-lines-and-polygons-using-cimsymbols","to_ping":"","pinged":"","post_modified":"2020-07-31 09:39:01","post_modified_gmt":"2020-07-31 16:39:01","post_content_filtered":"","post_parent":0,"guid":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&p=913801","menu_order":0,"post_type":"blog","post_mime_type":"","comment_count":"4","filter":"raw"},{"ID":1058481,"post_author":"8402","post_date":"2021-09-22 14:35:40","post_date_gmt":"2021-09-22 21:35:40","post_content":"","post_title":"CIM Symbol Builder","post_excerpt":"","post_status":"publish","comment_status":"open","ping_status":"closed","post_password":"","post_name":"cim-symbol-builder","to_ping":"","pinged":"","post_modified":"2024-04-12 03:59:00","post_modified_gmt":"2024-04-12 10:59:00","post_content_filtered":"","post_parent":0,"guid":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&p=1058481","menu_order":0,"post_type":"blog","post_mime_type":"","comment_count":"1","filter":"raw"},{"ID":1009822,"post_author":"7841","post_date":"2020-09-18 11:15:55","post_date_gmt":"2020-09-18 18:15:55","post_content":"","post_title":"Access the Latest Air Quality and Human Impact Information with Air Quality Aware","post_excerpt":"","post_status":"publish","comment_status":"open","ping_status":"closed","post_password":"","post_name":"air-quality-aware","to_ping":"","pinged":"","post_modified":"2020-09-25 13:37:15","post_modified_gmt":"2020-09-25 20:37:15","post_content_filtered":"","post_parent":0,"guid":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&p=1009822","menu_order":0,"post_type":"blog","post_mime_type":"","comment_count":"1","filter":"raw"},{"ID":999722,"post_author":"7641","post_date":"2022-03-29 22:25:34","post_date_gmt":"2022-03-30 05:25:34","post_content":"","post_title":"Map in a minute: Map smoke and air quality using ArcGIS Online and ArcGIS Living Atlas","post_excerpt":"","post_status":"publish","comment_status":"closed","ping_status":"closed","post_password":"","post_name":"map-in-a-minute-smoke","to_ping":"","pinged":"","post_modified":"2022-03-29 22:27:17","post_modified_gmt":"2022-03-30 05:27:17","post_content_filtered":"","post_parent":0,"guid":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&p=999722","menu_order":0,"post_type":"blog","post_mime_type":"","comment_count":"0","filter":"raw"},{"ID":1319622,"post_author":"10062","post_date":"2021-08-31 17:00:23","post_date_gmt":"2021-09-01 00:00:23","post_content":"","post_title":"Animating your data with the ArcGIS API for JavaScript","post_excerpt":"","post_status":"publish","comment_status":"open","ping_status":"closed","post_password":"","post_name":"animating-your-data-with-the-arcgis-api-for-javascript","to_ping":"","pinged":"","post_modified":"2024-04-12 03:57:29","post_modified_gmt":"2024-04-12 10:57:29","post_content_filtered":"","post_parent":0,"guid":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&p=1319622","menu_order":0,"post_type":"blog","post_mime_type":"","comment_count":"0","filter":"raw"}],"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/08\/aqi826-2.gif","wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/07\/animated-symbols.gif"},"yoast_head":"\nVisualizing Air Quality with Animated Symbols<\/title>\n<meta name=\"description\" content=\"Learn how to use animated CIM symbols within the ArcGIS Maps SDK for JavaScript to draw attention to features with poor air quality.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/visualizing-air-quality-with-animated-symbols\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Visualizing Air Quality with Animated Symbols\" \/>\n<meta property=\"og:description\" content=\"Learn how to use animated CIM symbols within the ArcGIS Maps SDK for JavaScript to draw attention to features with poor air quality.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/visualizing-air-quality-with-animated-symbols\" \/>\n<meta property=\"og:site_name\" content=\"ArcGIS Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/esrigis\/\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-12T08:16:32+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@ESRI\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":[\"Article\",\"BlogPosting\"],\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/visualizing-air-quality-with-animated-symbols#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/visualizing-air-quality-with-animated-symbols\"},\"author\":{\"name\":\"Anne Fitz\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/bee793ed8139187e84c18559765490fa\"},\"headline\":\"Visualizing Air Quality with Animated Symbols\",\"datePublished\":\"2023-08-07T21:15:57+00:00\",\"dateModified\":\"2024-04-12T08:16:32+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/visualizing-air-quality-with-animated-symbols\"},\"wordCount\":6,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#organization\"},\"keywords\":[\"air quality\",\"animation\",\"arcade\",\"ArcGIS Maps SDK for JavaScript\",\"CIMSymbol\"],\"articleSection\":[\"Developers\",\"Mapping\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/visualizing-air-quality-with-animated-symbols#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/visualizing-air-quality-with-animated-symbols\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/visualizing-air-quality-with-animated-symbols\",\"name\":\"Visualizing Air Quality with Animated Symbols\",\"isPartOf\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#website\"},\"datePublished\":\"2023-08-07T21:15:57+00:00\",\"dateModified\":\"2024-04-12T08:16:32+00:00\",\"description\":\"Learn how to use animated CIM symbols within the ArcGIS Maps SDK for JavaScript to draw attention to features with poor air quality.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/visualizing-air-quality-with-animated-symbols#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/visualizing-air-quality-with-animated-symbols\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/visualizing-air-quality-with-animated-symbols#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.esri.com\/arcgis-blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Visualizing Air Quality with Animated Symbols\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#website\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/\",\"name\":\"ArcGIS Blog\",\"description\":\"Get insider info from Esri product teams\",\"publisher\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.esri.com\/arcgis-blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#organization\",\"name\":\"Esri\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Esri.png\",\"contentUrl\":\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Esri.png\",\"width\":400,\"height\":400,\"caption\":\"Esri\"},\"image\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/esrigis\/\",\"https:\/\/x.com\/ESRI\",\"https:\/\/www.linkedin.com\/company\/5311\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/bee793ed8139187e84c18559765490fa\",\"name\":\"Anne Fitz\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/03\/2B6A1033-465x465.jpg\",\"contentUrl\":\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/03\/2B6A1033-465x465.jpg\",\"caption\":\"Anne Fitz\"},\"description\":\"Anne Fitz is a Senior Product Engineer at Esri, working on the ArcGIS Maps SDK for JavaScript and ArcGIS Arcade. Her expertise primarily focuses on dynamic vector symbology (CIM symbols), data visualization, animation, ArcGIS Arcade integration, and widgets. Anne\u2019s primary goal is to help developers succeed in building geospatial applications, providing them with the tools and knowledge they need to bring their ideas to life. She has been with Esri for over five years.\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/anne-fitz\"],\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/author\/afitz\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Visualizing Air Quality with Animated Symbols","description":"Learn how to use animated CIM symbols within the ArcGIS Maps SDK for JavaScript to draw attention to features with poor air quality.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/visualizing-air-quality-with-animated-symbols","og_locale":"en_US","og_type":"article","og_title":"Visualizing Air Quality with Animated Symbols","og_description":"Learn how to use animated CIM symbols within the ArcGIS Maps SDK for JavaScript to draw attention to features with poor air quality.","og_url":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/visualizing-air-quality-with-animated-symbols","og_site_name":"ArcGIS Blog","article_publisher":"https:\/\/www.facebook.com\/esrigis\/","article_modified_time":"2024-04-12T08:16:32+00:00","twitter_card":"summary_large_image","twitter_site":"@ESRI","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":["Article","BlogPosting"],"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/visualizing-air-quality-with-animated-symbols#article","isPartOf":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/visualizing-air-quality-with-animated-symbols"},"author":{"name":"Anne Fitz","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/bee793ed8139187e84c18559765490fa"},"headline":"Visualizing Air Quality with Animated Symbols","datePublished":"2023-08-07T21:15:57+00:00","dateModified":"2024-04-12T08:16:32+00:00","mainEntityOfPage":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/visualizing-air-quality-with-animated-symbols"},"wordCount":6,"commentCount":0,"publisher":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#organization"},"keywords":["air quality","animation","arcade","ArcGIS Maps SDK for JavaScript","CIMSymbol"],"articleSection":["Developers","Mapping"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/visualizing-air-quality-with-animated-symbols#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/visualizing-air-quality-with-animated-symbols","url":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/visualizing-air-quality-with-animated-symbols","name":"Visualizing Air Quality with Animated Symbols","isPartOf":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#website"},"datePublished":"2023-08-07T21:15:57+00:00","dateModified":"2024-04-12T08:16:32+00:00","description":"Learn how to use animated CIM symbols within the ArcGIS Maps SDK for JavaScript to draw attention to features with poor air quality.","breadcrumb":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/visualizing-air-quality-with-animated-symbols#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/visualizing-air-quality-with-animated-symbols"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/visualizing-air-quality-with-animated-symbols#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.esri.com\/arcgis-blog\/"},{"@type":"ListItem","position":2,"name":"Visualizing Air Quality with Animated Symbols"}]},{"@type":"WebSite","@id":"https:\/\/www.esri.com\/arcgis-blog\/#website","url":"https:\/\/www.esri.com\/arcgis-blog\/","name":"ArcGIS Blog","description":"Get insider info from Esri product teams","publisher":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.esri.com\/arcgis-blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.esri.com\/arcgis-blog\/#organization","name":"Esri","url":"https:\/\/www.esri.com\/arcgis-blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Esri.png","contentUrl":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Esri.png","width":400,"height":400,"caption":"Esri"},"image":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/esrigis\/","https:\/\/x.com\/ESRI","https:\/\/www.linkedin.com\/company\/5311\/"]},{"@type":"Person","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/bee793ed8139187e84c18559765490fa","name":"Anne Fitz","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/image\/","url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/03\/2B6A1033-465x465.jpg","contentUrl":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/03\/2B6A1033-465x465.jpg","caption":"Anne Fitz"},"description":"Anne Fitz is a Senior Product Engineer at Esri, working on the ArcGIS Maps SDK for JavaScript and ArcGIS Arcade. Her expertise primarily focuses on dynamic vector symbology (CIM symbols), data visualization, animation, ArcGIS Arcade integration, and widgets. Anne\u2019s primary goal is to help developers succeed in building geospatial applications, providing them with the tools and knowledge they need to bring their ideas to life. She has been with Esri for over five years.","sameAs":["https:\/\/www.linkedin.com\/in\/anne-fitz"],"url":"https:\/\/www.esri.com\/arcgis-blog\/author\/afitz"}]}},"text_date":"August 7, 2023","author_name":"Anne Fitz","author_page":"https:\/\/www.esri.com\/arcgis-blog\/author\/afitz","custom_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/07\/animated-symbols.gif","primary_product":"ArcGIS Maps SDK for JavaScript","tag_data":[{"term_id":588281,"name":"air quality","slug":"air-quality","term_group":0,"term_taxonomy_id":588281,"taxonomy":"post_tag","description":"","parent":0,"count":9,"filter":"raw"},{"term_id":30171,"name":"animation","slug":"animation","term_group":0,"term_taxonomy_id":30171,"taxonomy":"post_tag","description":"","parent":0,"count":23,"filter":"raw"},{"term_id":32551,"name":"arcade","slug":"arcade","term_group":0,"term_taxonomy_id":32551,"taxonomy":"post_tag","description":"","parent":0,"count":113,"filter":"raw"},{"term_id":769562,"name":"ArcGIS Maps SDK for JavaScript","slug":"arcgis-maps-sdk-for-javascript","term_group":0,"term_taxonomy_id":769562,"taxonomy":"post_tag","description":"","parent":0,"count":27,"filter":"raw"},{"term_id":757731,"name":"CIMSymbol","slug":"cimsymbol","term_group":0,"term_taxonomy_id":757731,"taxonomy":"post_tag","description":"","parent":0,"count":3,"filter":"raw"}],"category_data":[{"term_id":738191,"name":"Developers","slug":"developers","term_group":0,"term_taxonomy_id":738191,"taxonomy":"category","description":"","parent":0,"count":420,"filter":"raw"},{"term_id":22941,"name":"Mapping","slug":"mapping","term_group":0,"term_taxonomy_id":22941,"taxonomy":"category","description":"","parent":0,"count":2683,"filter":"raw"}],"product_data":[{"term_id":761642,"name":"ArcGIS Location Platform","slug":"platform","term_group":0,"term_taxonomy_id":761642,"taxonomy":"product","description":"","parent":36601,"count":213,"filter":"raw"},{"term_id":36831,"name":"ArcGIS Maps SDK for JavaScript","slug":"js-api-arcgis","term_group":0,"term_taxonomy_id":36831,"taxonomy":"product","description":"","parent":36601,"count":361,"filter":"raw"}],"primary_product_link":"https:\/\/www.esri.com\/arcgis-blog\/?s=#&products=js-api-arcgis","_links":{"self":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/blog\/2036182","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/blog"}],"about":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/types\/blog"}],"author":[{"embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/users\/10062"}],"replies":[{"embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/comments?post=2036182"}],"version-history":[{"count":0,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/blog\/2036182\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/media?parent=2036182"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/categories?post=2036182"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/tags?post=2036182"},{"taxonomy":"industry","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/industry?post=2036182"},{"taxonomy":"product","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/product?post=2036182"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
View the app<\/a> to see this animation in action and click the Find worst AQI<\/code> button in the top right to quickly view the feature with the highest AQI in the map. You can find the source code for the app here<\/a>.<\/p>\n
Using Arcade\u2019s When<\/a> function, we can calculate when the AQI is considered \u201cUnhealthy\u201d, \u201cVery Unhealthy\u201d, and \u201cHazardous\u201d, and update the duration of the animation to 1, 0.5, and 0.35 seconds, respectively. This will cause the animation to blink much faster at \u201cHazardous\u201d levels than \u201cUnhealthy\u201d levels.<\/p>\n
Next, we\u2019ll create an Arcade<\/a> expression from the Arcade visualization profile<\/a> that will determine the value of playAnimation for each feature. We’ll use an Arcade comparison operator to determine if the AQI of a feature is greater than or equal to 151, then it’s unhealthy and we want the symbol to animate (so the expression will return true<\/code>). Otherwise, the expression will\u00a0 return false<\/code>.<\/p>\n"},{"acf_fc_layout":"content","content":"
We\u2019ll use this symbol with a ClassBreaksRenderer<\/a> on our layer to separate the air quality into 6 categories based on the Level of Concern from the EPA<\/a> \u2013 Good, Moderate, Unhealthy for Sensitive Groups, Unhealthy, Very Unhealthy, and Hazardous.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":2038282,"id":2038282,"title":"Screenshot 2023-07-31 at 10.03.53 AM","filename":"Screenshot-2023-07-31-at-10.03.53-AM.png","filesize":97753,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/07\/Screenshot-2023-07-31-at-10.03.53-AM.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/visualizing-air-quality-with-animated-symbols\/screenshot-2023-07-31-at-10-03-53-am","alt":"","author":"10062","description":"","caption":"AQI colors, levels of concern and index values from the EPA.","name":"screenshot-2023-07-31-at-10-03-53-am","status":"inherit","uploaded_to":2036182,"date":"2023-07-31 17:10:20","modified":"2023-07-31 17:10:55","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":1075,"height":398,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/07\/Screenshot-2023-07-31-at-10.03.53-AM-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/07\/Screenshot-2023-07-31-at-10.03.53-AM.png","medium-width":464,"medium-height":172,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/07\/Screenshot-2023-07-31-at-10.03.53-AM.png","medium_large-width":768,"medium_large-height":284,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/07\/Screenshot-2023-07-31-at-10.03.53-AM.png","large-width":1075,"large-height":398,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/07\/Screenshot-2023-07-31-at-10.03.53-AM.png","1536x1536-width":1075,"1536x1536-height":398,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/07\/Screenshot-2023-07-31-at-10.03.53-AM.png","2048x2048-width":1075,"2048x2048-height":398,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/07\/Screenshot-2023-07-31-at-10.03.53-AM-826x306.png","card_image-width":826,"card_image-height":306,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/07\/Screenshot-2023-07-31-at-10.03.53-AM.png","wide_image-width":1075,"wide_image-height":398}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/www.airnow.gov\/aqi\/aqi-basics\/"},{"acf_fc_layout":"content","content":"