{"id":1424422,"date":"2022-03-23T10:00:22","date_gmt":"2022-03-23T17:00:22","guid":{"rendered":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&#038;p=1424422"},"modified":"2022-03-23T11:12:30","modified_gmt":"2022-03-23T18:12:30","slug":"create-an-animated-flow-visualization-with-the-arcgis-api-for-javascript","status":"publish","type":"blog","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/create-an-animated-flow-visualization-with-the-arcgis-api-for-javascript","title":{"rendered":"Create an animated flow visualization with the ArcGIS API for JavaScript"},"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":[22941],"tags":[764532,656931,38911,127982,764082],"industry":[],"product":[36831],"class_list":["post-1424422","blog","type-blog","status-publish","format-standard","hentry","category-mapping","tag-4-23","tag-animated-maps","tag-flow","tag-jsapi","tag-whats-new-march-2022","product-js-api-arcgis"],"acf":{"short_description":"Learn all about the new FlowRenderer and how to use it in the ArcGIS API for JavaScript.","flexible_content":[{"acf_fc_layout":"content","content":"<p><em>Edited March 23, 2022 to include updates in the 4.23 release of the ArcGIS API for JavaScript.<\/em><\/p>\n<p><a href=\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/announcements\/whats-new-in-arcgis-api-for-javascript-4-23\/\">Version 4.23 of the ArcGIS API for JavaScript<\/a> brings the official release of a new renderer, the <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-renderers-FlowRenderer.html\">FlowRenderer<\/a>, that allows you to visualize your <code>UV<\/code> or <code>MagDir<\/code> raster data with animated streamlines. This renderer allows you to create visually stunning maps with only a few lines of code.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1528012,"id":1528012,"title":"change-flow2","filename":"change-flow2.gif","filesize":6555110,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/12\/change-flow2.gif","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/create-an-animated-flow-visualization-with-the-arcgis-api-for-javascript\/change-flow2","alt":"","author":"10062","description":"","caption":"Transitioning between the VectorFieldRenderer and the FlowRenderer to display wind speeds during Hurricane Ida.","name":"change-flow2","status":"inherit","uploaded_to":1424422,"date":"2022-03-23 16:54:00","modified":"2022-03-23 16:55:31","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":500,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/12\/change-flow2-213x200.gif","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/12\/change-flow2.gif","medium-width":464,"medium-height":232,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/12\/change-flow2.gif","medium_large-width":768,"medium_large-height":384,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/12\/change-flow2.gif","large-width":1000,"large-height":500,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/12\/change-flow2.gif","1536x1536-width":1000,"1536x1536-height":500,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/12\/change-flow2.gif","2048x2048-width":1000,"2048x2048-height":500,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/12\/change-flow2-826x413.gif","card_image-width":826,"card_image-height":413,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/12\/change-flow2.gif","wide_image-width":1000,"wide_image-height":500}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<p>The FlowRenderer can be used to visualize flow direction and magnitude for meteorology and oceanography raster data. The direction of the raster defines the direction of movement, and the magnitude defines the visible length of the streamline.<\/p>\n<p>If you already have an <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-layers-ImageryLayer.html\">ImageryLayer<\/a>\u00a0or\u00a0<a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-layers-ImageryTileLayer.html\">ImageryTileLayer<\/a>\u00a0with\u00a0<code>UV<\/code>\u00a0or\u00a0<code>MagDir<\/code> data published, you can start using this renderer instantly, and can skip ahead to the section on <a href=\"#afr-in-your-maps\">using the FlowRenderer in your maps<\/a>.<\/p>\n<p>First, I\u2019ll first walk you through how to <a href=\"https:\/\/doc.arcgis.com\/en\/arcgis-online\/manage-data\/publish-imagery-layers.htm\" target=\"_blank\" rel=\"noopener\" aria-describedby=\"new-window\">publish your raster data to ArcGIS Online<\/a>, then show you how to render it in your maps with the AnimatedFlowRenderer.<\/p>\n<p><em>You can also publish your raster data using ArcGIS Enterprise. Check out their documentation on <a href=\"https:\/\/enterprise.arcgis.com\/en\/server\/latest\/publish-services\/windows\/publishing-image-services.htm\">Publishing image services<\/a> for more information.<\/em><\/p>\n"},{"acf_fc_layout":"content","content":"<h2>Publishing your raster data in ArcGIS Online<\/h2>\n<p>To publish your raster data as a hosted layer, log in to <a href=\"https:\/\/www.arcgis.com\/index.html\">ArcGIS Online<\/a> and click on the <code>Content<\/code> tab. At the top of that page, select the <code>New item<\/code> button in the top left.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1430942,"id":1430942,"title":"Screen Shot 2021-12-09 at 12.22.06 PM","filename":"Screen-Shot-2021-12-09-at-12.22.06-PM-e1639083447845.png","filesize":30964,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/12\/Screen-Shot-2021-12-09-at-12.22.06-PM-e1639083447845.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/create-an-animated-flow-visualization-with-the-arcgis-api-for-javascript\/screen-shot-2021-12-09-at-12-22-06-pm","alt":"new item button","author":"10062","description":"","caption":"","name":"screen-shot-2021-12-09-at-12-22-06-pm","status":"inherit","uploaded_to":1424422,"date":"2021-12-09 20:39:48","modified":"2021-12-09 20:39:58","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":400,"height":157,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/12\/Screen-Shot-2021-12-09-at-12.22.06-PM-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/12\/Screen-Shot-2021-12-09-at-12.22.06-PM-e1639083447845.png","medium-width":400,"medium-height":157,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/12\/Screen-Shot-2021-12-09-at-12.22.06-PM-e1639083447845.png","medium_large-width":400,"medium_large-height":157,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/12\/Screen-Shot-2021-12-09-at-12.22.06-PM-e1639083447845.png","large-width":400,"large-height":157,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/12\/Screen-Shot-2021-12-09-at-12.22.06-PM-e1639083447845.png","1536x1536-width":400,"1536x1536-height":157,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/12\/Screen-Shot-2021-12-09-at-12.22.06-PM-e1639083447845.png","2048x2048-width":400,"2048x2048-height":157,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/12\/Screen-Shot-2021-12-09-at-12.22.06-PM-e1639083447845.png","card_image-width":400,"card_image-height":157,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/12\/Screen-Shot-2021-12-09-at-12.22.06-PM-e1639083447845.png","wide_image-width":400,"wide_image-height":157}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<p>Clicking that button will open a modal that allows you to select what type of item you want to add. In this case, you&#8217;ll select <code>Imagery layer<\/code>.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1431012,"id":1431012,"title":"Screen Shot 2021-12-09 at 12.31.09 PM","filename":"Screen-Shot-2021-12-09-at-12.31.09-PM-1.png","filesize":207444,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/12\/Screen-Shot-2021-12-09-at-12.31.09-PM-1.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/create-an-animated-flow-visualization-with-the-arcgis-api-for-javascript\/screen-shot-2021-12-09-at-12-31-09-pm-2","alt":"select imagery layer","author":"10062","description":"","caption":"","name":"screen-shot-2021-12-09-at-12-31-09-pm-2","status":"inherit","uploaded_to":1424422,"date":"2021-12-09 20:41:49","modified":"2021-12-09 20:42:16","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":2139,"height":1343,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/12\/Screen-Shot-2021-12-09-at-12.31.09-PM-1-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/12\/Screen-Shot-2021-12-09-at-12.31.09-PM-1.png","medium-width":416,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/12\/Screen-Shot-2021-12-09-at-12.31.09-PM-1.png","medium_large-width":768,"medium_large-height":482,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/12\/Screen-Shot-2021-12-09-at-12.31.09-PM-1.png","large-width":1720,"large-height":1080,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/12\/Screen-Shot-2021-12-09-at-12.31.09-PM-1-1536x964.png","1536x1536-width":1536,"1536x1536-height":964,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/12\/Screen-Shot-2021-12-09-at-12.31.09-PM-1-2048x1286.png","2048x2048-width":2048,"2048x2048-height":1286,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/12\/Screen-Shot-2021-12-09-at-12.31.09-PM-1-741x465.png","card_image-width":741,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/12\/Screen-Shot-2021-12-09-at-12.31.09-PM-1-1720x1080.png","wide_image-width":1720,"wide_image-height":1080}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<p>The next dialogue will ask you what type of layer you want to create. In this case, select <code>Tiled Imagery Layer<\/code> since it can easily be hosted in ArcGIS Online, and works with our FlowRenderer. <em>The FlowRenderer is supported on both ImageryLayer and ImageryTileLayer, but an ImageryLayer created in ArcGIS Online cannot be shared publicly. You can also host either an ImageryLayer or ImageryTileLayer in ArcGIS Enterprise.<\/em><\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1431042,"id":1431042,"title":"Screen Shot 2021-12-09 at 12.31.24 PM","filename":"Screen-Shot-2021-12-09-at-12.31.24-PM.png","filesize":229869,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/12\/Screen-Shot-2021-12-09-at-12.31.24-PM.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/create-an-animated-flow-visualization-with-the-arcgis-api-for-javascript\/screen-shot-2021-12-09-at-12-31-24-pm","alt":"select tiled imagery layer","author":"10062","description":"","caption":"","name":"screen-shot-2021-12-09-at-12-31-24-pm","status":"inherit","uploaded_to":1424422,"date":"2021-12-09 20:44:08","modified":"2021-12-09 20:44:19","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":2314,"height":1370,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/12\/Screen-Shot-2021-12-09-at-12.31.24-PM-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/12\/Screen-Shot-2021-12-09-at-12.31.24-PM.png","medium-width":441,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/12\/Screen-Shot-2021-12-09-at-12.31.24-PM.png","medium_large-width":768,"medium_large-height":455,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/12\/Screen-Shot-2021-12-09-at-12.31.24-PM.png","large-width":1824,"large-height":1080,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/12\/Screen-Shot-2021-12-09-at-12.31.24-PM-1536x909.png","1536x1536-width":1536,"1536x1536-height":909,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/12\/Screen-Shot-2021-12-09-at-12.31.24-PM-2048x1213.png","2048x2048-width":2048,"2048x2048-height":1213,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/12\/Screen-Shot-2021-12-09-at-12.31.24-PM-785x465.png","card_image-width":785,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/12\/Screen-Shot-2021-12-09-at-12.31.24-PM-1824x1080.png","wide_image-width":1824,"wide_image-height":1080}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<p>Next, you need to decide how you want to configure your layer. The <a href=\"https:\/\/doc.arcgis.com\/en\/arcgis-online\/manage-data\/publish-imagery-layers.htm#:~:text=Choose%20a%20layer%20configuration.\">documentation on publishing hosted imagery layers<\/a> contains more detailed information on each configuration option. I am going to configure my layer as <code>One Mosaicked Image<\/code>.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1431112,"id":1431112,"title":"Screen Shot 2021-12-09 at 12.33.03 PM","filename":"Screen-Shot-2021-12-09-at-12.33.03-PM.png","filesize":237039,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/12\/Screen-Shot-2021-12-09-at-12.33.03-PM.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/create-an-animated-flow-visualization-with-the-arcgis-api-for-javascript\/screen-shot-2021-12-09-at-12-33-03-pm","alt":"select one mosaicked image","author":"10062","description":"","caption":"","name":"screen-shot-2021-12-09-at-12-33-03-pm","status":"inherit","uploaded_to":1424422,"date":"2021-12-09 20:56:11","modified":"2021-12-09 20:56:24","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":2380,"height":1410,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/12\/Screen-Shot-2021-12-09-at-12.33.03-PM-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/12\/Screen-Shot-2021-12-09-at-12.33.03-PM.png","medium-width":441,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/12\/Screen-Shot-2021-12-09-at-12.33.03-PM.png","medium_large-width":768,"medium_large-height":455,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/12\/Screen-Shot-2021-12-09-at-12.33.03-PM.png","large-width":1823,"large-height":1080,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/12\/Screen-Shot-2021-12-09-at-12.33.03-PM-1536x910.png","1536x1536-width":1536,"1536x1536-height":910,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/12\/Screen-Shot-2021-12-09-at-12.33.03-PM-2048x1213.png","2048x2048-width":2048,"2048x2048-height":1213,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/12\/Screen-Shot-2021-12-09-at-12.33.03-PM-785x465.png","card_image-width":785,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/12\/Screen-Shot-2021-12-09-at-12.33.03-PM-1823x1080.png","wide_image-width":1823,"wide_image-height":1080}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<p>Now I can just drag and drop my <code>CRF<\/code> with <code>MagDir<\/code> information to create the layer. This is created from a netCDF file, which has been processed and prepared for publishing. To learn more about how to prepare your data for publishing, check out this blog, <a href=\"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis\/imagery\/visualize-raster-using-a-vector-field-in-arcgis\/\">Visualize Raster Using a Vector Field in ArcGIS<\/a>. For the raster type to describe my dataset, I&#8217;ll just keep <code>Raster dataset<\/code> selected, and I don&#8217;t need to configure any additional properties.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1431982,"id":1431982,"title":"Screen Shot 2021-12-09 at 12.33.34 PM","filename":"Screen-Shot-2021-12-09-at-12.33.34-PM.png","filesize":167816,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/12\/Screen-Shot-2021-12-09-at-12.33.34-PM.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/create-an-animated-flow-visualization-with-the-arcgis-api-for-javascript\/screen-shot-2021-12-09-at-12-33-34-pm","alt":"upload imagery files","author":"10062","description":"","caption":"","name":"screen-shot-2021-12-09-at-12-33-34-pm","status":"inherit","uploaded_to":1424422,"date":"2021-12-09 23:24:30","modified":"2021-12-09 23:24: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":2302,"height":1448,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/12\/Screen-Shot-2021-12-09-at-12.33.34-PM-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/12\/Screen-Shot-2021-12-09-at-12.33.34-PM.png","medium-width":415,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/12\/Screen-Shot-2021-12-09-at-12.33.34-PM.png","medium_large-width":768,"medium_large-height":483,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/12\/Screen-Shot-2021-12-09-at-12.33.34-PM.png","large-width":1717,"large-height":1080,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/12\/Screen-Shot-2021-12-09-at-12.33.34-PM-1536x966.png","1536x1536-width":1536,"1536x1536-height":966,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/12\/Screen-Shot-2021-12-09-at-12.33.34-PM-2048x1288.png","2048x2048-width":2048,"2048x2048-height":1288,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/12\/Screen-Shot-2021-12-09-at-12.33.34-PM-739x465.png","card_image-width":739,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/12\/Screen-Shot-2021-12-09-at-12.33.34-PM-1717x1080.png","wide_image-width":1717,"wide_image-height":1080}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<p>And finally, I&#8217;ll define a title for my layer, and click &#8220;Create&#8221;. After a short amount of processing time, that layer will be hosted and ready to use in your apps!<\/p>\n"},{"acf_fc_layout":"content","content":"<p><a name=\"afr-in-your-maps\"><\/a><\/p>\n<h2>Using the FlowRenderer in your maps<\/h2>\n<p>Once you have published your data to a service, you\u2019ll need to use an ImageryLayer or ImageryTileLayer (depending on how you published it) to create a layer from the service for use in your map. I\u2019m going to use an ImageryTileLayer, since I published an ImageryTileLayer in the previous section.<\/p>\n<pre><code style=\"padding: 0.5em;color: #333;background: #f8f8f8\">\r\n<span style=\"color: #0086b3\">require<\/span>([<span style=\"color: #d14\">\"esri\/layers\/ImageryTileLayer\"<\/span>], <span style=\"color: #333;font-weight: bold\">function<\/span>(ImageryTileLayer) { \r\n   <span style=\"color: #333;font-weight: bold\">let<\/span> layer = <span style=\"color: #333;font-weight: bold\">new<\/span> ImageryTileLayer({ \r\n      url: <span style=\"color: #d14\">\"url to your service\"<\/span> \r\n   });\r\n});\r\n\r\n<\/code><\/pre>\n<p>When you initialize the layer, you can also define how the layer is rendered \u2013 that\u2019s where the FlowRenderer comes in to play. To apply the FlowRenderer to your layer, simply import the <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-renderers-FlowRenderer.html\">FlowRenderer<\/a> and set the renderer property on the layer to <code>new FlowRenderer()<\/code>. This will create a new FlowRenderer with all the default property values applied.<\/p>\n<pre><code style=\"padding: 0.5em;color: #333;background: #f8f8f8\">\r\n<span style=\"color: #0086b3\">require<\/span>([<span style=\"color: #d14\">\"esri\/layers\/ImageryTileLayer\"<\/span>, <span style=\"color: #d14\">\"esri\/renderers\/FlowRenderer\"<\/span>],\r\n  <span style=\"color: #333;font-weight: bold\">function<\/span>(ImageryTileLayer, FlowRenderer) { \r\n     <span style=\"color: #333;font-weight: bold\">let<\/span> layer = <span style=\"color: #333;font-weight: bold\">new<\/span> ImageryTileLayer({\r\n        url: <span style=\"color: #d14\">\"url to your service\"<\/span>, \r\n        renderer: <span style=\"color: #333;font-weight: bold\">new<\/span> FlowRenderer() \r\n     }); \r\n  });\r\n\r\n<\/code><\/pre>\n<p>You can now add this layer to your map using\u00a0<code>map.add(layer)<\/code>\u00a0and\u00a0<em>voila!\u00a0<\/em>You\u2019ve just created a stunning flow visualization with just a few lines of code.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1434522,"id":1434522,"title":"","filename":"default.gif","filesize":8657252,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/12\/default.gif","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/create-an-animated-flow-visualization-with-the-arcgis-api-for-javascript\/default-3","alt":"animated flow with defaults","author":"10062","description":"","caption":"AnimatedFlowRenderer visualizing wind direction with default values applied. ","name":"default-3","status":"inherit","uploaded_to":1424422,"date":"2021-12-10 19:12:06","modified":"2021-12-10 19:12:55","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":826,"height":465,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/12\/default-213x200.gif","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/12\/default.gif","medium-width":464,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/12\/default.gif","medium_large-width":768,"medium_large-height":432,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/12\/default.gif","large-width":826,"large-height":465,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/12\/default.gif","1536x1536-width":826,"1536x1536-height":465,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/12\/default.gif","2048x2048-width":826,"2048x2048-height":465,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/12\/default.gif","card_image-width":826,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/12\/default.gif","wide_image-width":826,"wide_image-height":465}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<h3>Updating the properties of the FlowRenderer<\/h3>\n<p>You might want to adjust the default settings for the flow renderer \u2013 that\u2019s why we provide 8 different properties that you can use to customize your visualization: <code>color<\/code>, <code>density<\/code>, <code>flowRepresentation<\/code>, <code>flowSpeed<\/code>, <code>maxPathLength<\/code>, <code>trailLength<\/code>, <code>trailWidth<\/code>, and <code>visualVariables<\/code>.<\/p>\n<ul>\n<li><strong><code>color<\/code>:<\/strong> The color of the streamlines. Default is <code>[255, 255, 255, 1]<\/code> (white).<\/li>\n<li><strong><code>density<\/code>:<\/strong> The density of the streamlines. Accepted values are between <code>0<\/code> and <code>1<\/code>, with <code>1<\/code> being the most dense, and <code>0<\/code> meaning no lines will render. Default is <code>0.8<\/code>.<\/li>\n<\/ul>\n"},{"acf_fc_layout":"image","image":{"ID":1434592,"id":1434592,"title":"Screen Shot 2021-12-10 at 11.15.42 AM","filename":"Screen-Shot-2021-12-10-at-11.15.42-AM.png","filesize":454878,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/12\/Screen-Shot-2021-12-10-at-11.15.42-AM.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/create-an-animated-flow-visualization-with-the-arcgis-api-for-javascript\/screen-shot-2021-12-10-at-11-15-42-am","alt":"","author":"10062","description":"","caption":"","name":"screen-shot-2021-12-10-at-11-15-42-am","status":"inherit","uploaded_to":1424422,"date":"2021-12-10 19:17:06","modified":"2021-12-10 19:17:06","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":1276,"height":476,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/12\/Screen-Shot-2021-12-10-at-11.15.42-AM-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/12\/Screen-Shot-2021-12-10-at-11.15.42-AM.png","medium-width":464,"medium-height":173,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/12\/Screen-Shot-2021-12-10-at-11.15.42-AM.png","medium_large-width":768,"medium_large-height":286,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/12\/Screen-Shot-2021-12-10-at-11.15.42-AM.png","large-width":1276,"large-height":476,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/12\/Screen-Shot-2021-12-10-at-11.15.42-AM.png","1536x1536-width":1276,"1536x1536-height":476,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/12\/Screen-Shot-2021-12-10-at-11.15.42-AM.png","2048x2048-width":1276,"2048x2048-height":476,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/12\/Screen-Shot-2021-12-10-at-11.15.42-AM-826x308.png","card_image-width":826,"card_image-height":308,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/12\/Screen-Shot-2021-12-10-at-11.15.42-AM.png","wide_image-width":1276,"wide_image-height":476}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-renderers-AnimatedFlowRenderer.html#density"},{"acf_fc_layout":"content","content":"<ul>\n<li><strong><code>flowRepresentation<\/code>:\u00a0<\/strong>Defines the flow direction of the data. This can be modified to display meteorological (the direction it is flowing from) or climatological data (the direction it is flowing to). Supported values are <code>\"flow-from\"<\/code> or <code>\"flow-to\"<\/code>.<\/li>\n<li><strong><code>flowSpeed<\/code>:<\/strong> The speed of the animated streamlines, relative to the simulation time. Default is <code>10<\/code>.<\/li>\n<li><strong><code>maxPathLength<\/code>:<\/strong> The maximum length the animated streamlines will travel. Only a portion of the streamline will be visible at a time depending on the magnitude or UV coming from the raster layer and the defined\u00a0<a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-renderers-FlowRenderer.html#trailLength\">trailLength<\/a>. During the course of the animation, the visible streamline will travel to reach the line length defined here, then will restart. Default is <code>200pts<\/code>.<\/li>\n<li><strong><code>trailLength<\/code>:<\/strong> The approximate visible length of the streamline in points. The streamlines will appear shorter when the trailLength is a smaller number, since they will start to fade before they reach the full\u00a0<a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-renderers-FlowRenderer.html#maxPathLength\">maxPathLength<\/a>. Default is <code>100<\/code>.<\/li>\n<\/ul>\n"},{"acf_fc_layout":"image","image":{"ID":1528282,"id":1528282,"title":"trailLength","filename":"trailLength.gif","filesize":4649429,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/12\/trailLength.gif","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/create-an-animated-flow-visualization-with-the-arcgis-api-for-javascript\/traillength","alt":"","author":"10062","description":"","caption":"","name":"traillength","status":"inherit","uploaded_to":1424422,"date":"2022-03-23 17:39:06","modified":"2022-03-23 17:39:06","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":1920,"height":529,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/12\/trailLength-213x200.gif","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/12\/trailLength.gif","medium-width":464,"medium-height":128,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/12\/trailLength.gif","medium_large-width":768,"medium_large-height":212,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/12\/trailLength.gif","large-width":1920,"large-height":529,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/12\/trailLength-1536x423.gif","1536x1536-width":1536,"1536x1536-height":423,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/12\/trailLength.gif","2048x2048-width":1920,"2048x2048-height":529,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/12\/trailLength-826x228.gif","card_image-width":826,"card_image-height":228,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/12\/trailLength.gif","wide_image-width":1920,"wide_image-height":529}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-renderers-FlowRenderer.html#trailLength"},{"acf_fc_layout":"content","content":"<ul>\n<li><strong><code>trailWidth<\/code>:<\/strong> The width of the streamline trail in points. Default is <code>1.5<\/code>.<\/li>\n<li><strong><code>visualVariables<\/code>:\u00a0<\/strong>The FlowRenderer supports the following visual variables: <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-renderers-visualVariables-ColorVariable.html\">ColorVisualVariable<\/a>,\u00a0<a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-renderers-visualVariables-OpacityVariable.html\">OpacityVisualVariable<\/a>, and\u00a0<a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-renderers-visualVariables-SizeVariable.html\">SizeVisualVariable<\/a>. Each of these visual variables can only be used with the <code>Magnitude<\/code> field.<\/li>\n<\/ul>\n<p>Using all of these different properties, you can customize the FlowRenderer to create some unique visualizations. Check out <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/sample-code\/layers-imagery-afrenderer\/\">this sample<\/a> where you can change the property values on the fly.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1434902,"id":1434902,"title":"update-props-800","filename":"update-props-800.gif","filesize":8692688,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/12\/update-props-800.gif","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/create-an-animated-flow-visualization-with-the-arcgis-api-for-javascript\/update-props-800","alt":"","author":"10062","description":"","caption":"Updating the properties of the AnimatedFlowRenderer to create unique visualizations.","name":"update-props-800","status":"inherit","uploaded_to":1424422,"date":"2021-12-10 19:50:18","modified":"2021-12-10 19:50:48","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":800,"height":400,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/12\/update-props-800-213x200.gif","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/12\/update-props-800.gif","medium-width":464,"medium-height":232,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/12\/update-props-800.gif","medium_large-width":768,"medium_large-height":384,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/12\/update-props-800.gif","large-width":800,"large-height":400,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/12\/update-props-800.gif","1536x1536-width":800,"1536x1536-height":400,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/12\/update-props-800.gif","2048x2048-width":800,"2048x2048-height":400,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/12\/update-props-800.gif","card_image-width":800,"card_image-height":400,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/12\/update-props-800.gif","wide_image-width":800,"wide_image-height":400}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/developers.arcgis.com\/javascript\/latest\/sample-code\/layers-imagery-afrenderer\/"},{"acf_fc_layout":"content","content":"<p>You can also take advantage of other features in the API with this new renderer &#8211; like layer effects and blending! Layer blending is a great way to create a multivariate visualization with the FlowRenderer, as shown in <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/sample-code\/layers-imagery-afrenderer-blending\/\">this new sample<\/a> that blends ocean currents and sea surface temperature.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1434922,"id":1434922,"title":"animated-flow-blending","filename":"animated-flow-blending-1.gif","filesize":9851015,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/12\/animated-flow-blending-1.gif","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/create-an-animated-flow-visualization-with-the-arcgis-api-for-javascript\/animated-flow-blending-2","alt":"","author":"10062","description":"","caption":"","name":"animated-flow-blending-2","status":"inherit","uploaded_to":1424422,"date":"2021-12-10 19:56:06","modified":"2021-12-10 19:56:06","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":1920,"height":1080,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/12\/animated-flow-blending-1-213x200.gif","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/12\/animated-flow-blending-1.gif","medium-width":464,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/12\/animated-flow-blending-1.gif","medium_large-width":768,"medium_large-height":432,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/12\/animated-flow-blending-1.gif","large-width":1920,"large-height":1080,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/12\/animated-flow-blending-1-1536x864.gif","1536x1536-width":1536,"1536x1536-height":864,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/12\/animated-flow-blending-1.gif","2048x2048-width":1920,"2048x2048-height":1080,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/12\/animated-flow-blending-1-826x465.gif","card_image-width":826,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/12\/animated-flow-blending-1.gif","wide_image-width":1920,"wide_image-height":1080}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/developers.arcgis.com\/javascript\/latest\/sample-code\/layers-imagery-afrenderer-blending\/"},{"acf_fc_layout":"content","content":"<h2>No code version? We got you.<\/h2>\n<p>If you&#8217;re interested in doing this kind of visualization, but don&#8217;t want to write the code for it yourself, you can use the new <code>Flow<\/code> style in the <a href=\"https:\/\/www.arcgis.com\/apps\/mapviewer\/index.html\">Map Viewer<\/a>. Check out <a href=\"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/flow-renderer\/\">this blog post<\/a> to learn more.<\/p>\n"}],"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":"<img data-del=\"avatar\" src='https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/03\/2B6A1033-465x465.jpg' class='avatar pp-user-avatar avatar-96 photo ' height='96' width='96'\/>"}],"related_articles":[{"ID":1502612,"post_author":"6331","post_date":"2022-03-22 21:50:22","post_date_gmt":"2022-03-23 04:50:22","post_content":"","post_title":"Map Viewer introduces animated Flow renderer","post_excerpt":"","post_status":"publish","comment_status":"open","ping_status":"closed","post_password":"","post_name":"flow-renderer","to_ping":"","pinged":"","post_modified":"2022-03-22 21:55:40","post_modified_gmt":"2022-03-23 04:55:40","post_content_filtered":"","post_parent":0,"guid":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&#038;p=1502612","menu_order":0,"post_type":"blog","post_mime_type":"","comment_count":"0","filter":"raw"},{"ID":1519642,"post_author":"4271","post_date":"2022-03-23 10:10:51","post_date_gmt":"2022-03-23 17:10:51","post_content":"","post_title":"What's new in ArcGIS API for JavaScript (4.23)","post_excerpt":"","post_status":"publish","comment_status":"open","ping_status":"closed","post_password":"","post_name":"whats-new-in-arcgis-api-for-javascript-4-23","to_ping":"","pinged":"","post_modified":"2022-11-21 01:48:30","post_modified_gmt":"2022-11-21 09:48:30","post_content_filtered":"","post_parent":0,"guid":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&#038;p=1519642","menu_order":0,"post_type":"blog","post_mime_type":"","comment_count":"0","filter":"raw"},{"ID":1456782,"post_author":"10352","post_date":"2022-01-12 22:16:20","post_date_gmt":"2022-01-13 06:16:20","post_content":"","post_title":"Visualize raster using a vector field in ArcGIS","post_excerpt":"","post_status":"publish","comment_status":"open","ping_status":"closed","post_password":"","post_name":"visualize-raster-using-a-vector-field-in-arcgis","to_ping":"","pinged":"","post_modified":"2022-06-16 23:21:33","post_modified_gmt":"2022-06-17 06:21:33","post_content_filtered":"","post_parent":0,"guid":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&#038;p=1456782","menu_order":0,"post_type":"blog","post_mime_type":"","comment_count":"0","filter":"raw"},{"ID":1422752,"post_author":"4271","post_date":"2021-12-09 10:20:08","post_date_gmt":"2021-12-09 18:20:08","post_content":"","post_title":"What's new in the ArcGIS API for JavaScript (version 4.22)","post_excerpt":"","post_status":"publish","comment_status":"open","ping_status":"closed","post_password":"","post_name":"whats-new-in-the-arcgis-api-for-javascript-version-4-22","to_ping":"","pinged":"","post_modified":"2024-04-12 03:58:08","post_modified_gmt":"2024-04-12 10:58:08","post_content_filtered":"","post_parent":0,"guid":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&#038;p=1422752","menu_order":0,"post_type":"blog","post_mime_type":"","comment_count":"0","filter":"raw"}],"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/12\/animated-flow-blending-small.gif","wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/12\/Screen-Shot-2021-12-09-at-3.42.53-PM.png"},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v25.9 (Yoast SEO v25.9) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Create an animated flow visualization with the ArcGIS API for JavaScript<\/title>\n<meta name=\"description\" content=\"Learn all about the new FlowRenderer and how to use it in the ArcGIS API for JavaScript.\" \/>\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\/mapping\/create-an-animated-flow-visualization-with-the-arcgis-api-for-javascript\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Create an animated flow visualization with the ArcGIS API for JavaScript\" \/>\n<meta property=\"og:description\" content=\"Learn all about the new FlowRenderer and how to use it in the ArcGIS API for JavaScript.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/create-an-animated-flow-visualization-with-the-arcgis-api-for-javascript\" \/>\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=\"2022-03-23T18:12:30+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\/mapping\/create-an-animated-flow-visualization-with-the-arcgis-api-for-javascript#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/create-an-animated-flow-visualization-with-the-arcgis-api-for-javascript\"},\"author\":{\"name\":\"Anne Fitz\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/bee793ed8139187e84c18559765490fa\"},\"headline\":\"Create an animated flow visualization with the ArcGIS API for JavaScript\",\"datePublished\":\"2022-03-23T17:00:22+00:00\",\"dateModified\":\"2022-03-23T18:12:30+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/create-an-animated-flow-visualization-with-the-arcgis-api-for-javascript\"},\"wordCount\":11,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#organization\"},\"keywords\":[\"4.23\",\"animated maps\",\"flow\",\"jsapi\",\"whats new march 2022\"],\"articleSection\":[\"Mapping\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/create-an-animated-flow-visualization-with-the-arcgis-api-for-javascript#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/create-an-animated-flow-visualization-with-the-arcgis-api-for-javascript\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/create-an-animated-flow-visualization-with-the-arcgis-api-for-javascript\",\"name\":\"Create an animated flow visualization with the ArcGIS API for JavaScript\",\"isPartOf\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#website\"},\"datePublished\":\"2022-03-23T17:00:22+00:00\",\"dateModified\":\"2022-03-23T18:12:30+00:00\",\"description\":\"Learn all about the new FlowRenderer and how to use it in the ArcGIS API for JavaScript.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/create-an-animated-flow-visualization-with-the-arcgis-api-for-javascript#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/create-an-animated-flow-visualization-with-the-arcgis-api-for-javascript\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/create-an-animated-flow-visualization-with-the-arcgis-api-for-javascript#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.esri.com\/arcgis-blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Create an animated flow visualization with the ArcGIS API for JavaScript\"}]},{\"@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":"Create an animated flow visualization with the ArcGIS API for JavaScript","description":"Learn all about the new FlowRenderer and how to use it in the ArcGIS API for JavaScript.","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\/mapping\/create-an-animated-flow-visualization-with-the-arcgis-api-for-javascript","og_locale":"en_US","og_type":"article","og_title":"Create an animated flow visualization with the ArcGIS API for JavaScript","og_description":"Learn all about the new FlowRenderer and how to use it in the ArcGIS API for JavaScript.","og_url":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/create-an-animated-flow-visualization-with-the-arcgis-api-for-javascript","og_site_name":"ArcGIS Blog","article_publisher":"https:\/\/www.facebook.com\/esrigis\/","article_modified_time":"2022-03-23T18:12:30+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\/mapping\/create-an-animated-flow-visualization-with-the-arcgis-api-for-javascript#article","isPartOf":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/create-an-animated-flow-visualization-with-the-arcgis-api-for-javascript"},"author":{"name":"Anne Fitz","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/bee793ed8139187e84c18559765490fa"},"headline":"Create an animated flow visualization with the ArcGIS API for JavaScript","datePublished":"2022-03-23T17:00:22+00:00","dateModified":"2022-03-23T18:12:30+00:00","mainEntityOfPage":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/create-an-animated-flow-visualization-with-the-arcgis-api-for-javascript"},"wordCount":11,"commentCount":0,"publisher":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#organization"},"keywords":["4.23","animated maps","flow","jsapi","whats new march 2022"],"articleSection":["Mapping"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/create-an-animated-flow-visualization-with-the-arcgis-api-for-javascript#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/create-an-animated-flow-visualization-with-the-arcgis-api-for-javascript","url":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/create-an-animated-flow-visualization-with-the-arcgis-api-for-javascript","name":"Create an animated flow visualization with the ArcGIS API for JavaScript","isPartOf":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#website"},"datePublished":"2022-03-23T17:00:22+00:00","dateModified":"2022-03-23T18:12:30+00:00","description":"Learn all about the new FlowRenderer and how to use it in the ArcGIS API for JavaScript.","breadcrumb":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/create-an-animated-flow-visualization-with-the-arcgis-api-for-javascript#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/create-an-animated-flow-visualization-with-the-arcgis-api-for-javascript"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/create-an-animated-flow-visualization-with-the-arcgis-api-for-javascript#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.esri.com\/arcgis-blog\/"},{"@type":"ListItem","position":2,"name":"Create an animated flow visualization with the ArcGIS API for JavaScript"}]},{"@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":"March 23, 2022","author_name":"Anne Fitz","author_page":"https:\/\/www.esri.com\/arcgis-blog\/author\/afitz","custom_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/12\/Screen-Shot-2021-12-09-at-3.42.53-PM.png","primary_product":"ArcGIS Maps SDK for JavaScript","tag_data":[{"term_id":764532,"name":"4.23","slug":"4-23","term_group":0,"term_taxonomy_id":764532,"taxonomy":"post_tag","description":"","parent":0,"count":3,"filter":"raw"},{"term_id":656931,"name":"animated maps","slug":"animated-maps","term_group":0,"term_taxonomy_id":656931,"taxonomy":"post_tag","description":"","parent":0,"count":3,"filter":"raw"},{"term_id":38911,"name":"flow","slug":"flow","term_group":0,"term_taxonomy_id":38911,"taxonomy":"post_tag","description":"","parent":0,"count":6,"filter":"raw"},{"term_id":127982,"name":"jsapi","slug":"jsapi","term_group":0,"term_taxonomy_id":127982,"taxonomy":"post_tag","description":"","parent":0,"count":7,"filter":"raw"},{"term_id":764082,"name":"whats new march 2022","slug":"whats-new-march-2022","term_group":0,"term_taxonomy_id":764082,"taxonomy":"post_tag","description":"","parent":0,"count":27,"filter":"raw"}],"category_data":[{"term_id":22941,"name":"Mapping","slug":"mapping","term_group":0,"term_taxonomy_id":22941,"taxonomy":"category","description":"","parent":0,"count":2690,"filter":"raw"}],"product_data":[{"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":363,"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\/1424422","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=1424422"}],"version-history":[{"count":0,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/blog\/1424422\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/media?parent=1424422"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/categories?post=1424422"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/tags?post=1424422"},{"taxonomy":"industry","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/industry?post=1424422"},{"taxonomy":"product","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/product?post=1424422"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}