ArcGIS API for JavaScript

Create an animated flow visualization with the ArcGIS API for JavaScript

Version 4.22 of the ArcGIS API for JavaScript brings the beta release of a new renderer, the AnimatedFlowRenderer, that allows you to visualize your UV or MagDir raster data with animated streamlines. This renderer allows you to create visually stunning maps with only a few lines of code.

animated flow renderer visualizing wind speed & direction
Visualizing wind speed and direction with the AnimatedFlowRenderer

The AnimatedFlowRenderer 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.

If you already have an ImageryLayer or ImageryTileLayer with UV or MagDir data published, you can start using this renderer instantly, and can skip ahead to the section on using the AnimatedFlowRenderer in your maps.

First, I’ll first walk you through how to publish your raster data to ArcGIS Online, then show you how to render it in your maps with the AnimatedFlowRenderer.

You can also publish your raster data using ArcGIS Enterprise. Check out their documentation on Publishing image services for more information.

Publishing your raster data in ArcGIS Online

To publish your raster data as a hosted layer, log in to ArcGIS Online and click on the Content tab. At the top of that page, select the New item button in the top left.

new item button

Clicking that button will open a modal that allows you to select what type of item you want to add. In this case, you’ll select Imagery layer.

select imagery layer

The next dialogue will ask you what type of layer you want to create. In this case, select Tiled Imagery Layer since it can easily be hosted in ArcGIS Online, and works with our AnimatedFlowRenderer. The AnimatedFlowRenderer 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.

select tiled imagery layer

Next, you need to decide how you want to configure your layer. The documentation on publishing hosted imagery layers contains more detailed information on each configuration option. I am going to configure my layer as One Mosaicked Image.

select one mosaicked image

Now I can just drag and drop my CRF with MagDir 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, Visualize Raster Using a Vector Field in ArcGIS. For the raster type to describe my dataset, I’ll just keep Raster dataset selected, and I don’t need to configure any additional properties.

upload imagery files

And finally, I’ll define a title for my layer, and click “Create”. After a short amount of processing time, that layer will be hosted and ready to use in your apps!

Using the AnimatedFlowRenderer in your maps

Once you have published your data to a service, you’ll 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’m going to use an ImageryTileLayer, since I published an ImageryTileLayer in the previous section.

require(["esri/layers/ImageryTileLayer"], function(ImageryTileLayer) { 
   let layer = new ImageryTileLayer({ 
      url: "url to your service" 

When you initialize the layer, you can also define how the layer is rendered – that’s where the AnimatedFlowRenderer comes in to play. To apply the AnimatedFlowRenderer to your layer, simply import the AnimatedFlowRenderer and set the renderer property on the layer to new AnimatedFlowRenderer(). This will create a new AnimatedFlowRenderer with all the default property values applied.

require(["esri/layers/ImageryTileLayer", "esri/renderers/AnimatedFlowRenderer"],
  function(ImageryTileLayer, AnimatedFlowRenderer) { 
     let layer = new ImageryTileLayer({
        url: "url to your service", 
        renderer: new AnimatedFlowRenderer() 

You can now add this layer to your map using map.add(layer) and voila! You’ve just created a stunning flow visualization with just a few lines of code.

animated flow with defaults
AnimatedFlowRenderer visualizing wind direction with default values applied.

Updating the properties of the AnimatedFlowRenderer

You might want to adjust the default settings for the animated flow renderer – that’s why we provide 6 different properties that you can use to customize your visualization: density, fadeDuration, lineColor, lineLength, lineSpeed, and lineWidth.

Using all of these different properties, you can customize the AnimatedFlowRenderer to create some unique visualizations. Check out this sample where you can change the property values on the fly.

Updating the properties of the AnimatedFlowRenderer to create unique visualizations.

You can also take advantage of other features in the API with this new renderer – like layer effects and blending! Layer blending is a great way to create a multivariate visualization with the AnimatedFlowRenderer, as shown in this new sample that blends ocean currents and sea surface temperature.

We want to hear from you!

We would love to hear your feedback on this new renderer! The AnimatedFlowRenderer is still in beta and we plan on making updates and enhancements in the upcoming releases. If you have any ideas for enhancements or feedback on the existing implementation, please join the conversation on Esri community, we would love to hear from you! 😊

About the author

Anne is a Product Engineer on the ArcGIS API for JavaScript team in Redlands, CA.

Inline Feedbacks
View all comments

Next Article

What's new in ArcGIS StoryMaps (January 2022)

Read this article