Streamlines and flow animation in the ArcGIS API for JavaScript

2459
11
08-31-2021 05:33 PM
Geodario
Esri Contributor
4 11 2,459

A recently published article on the ArcGIS Blog explores the implementation of a streamlines-based flow animation on top of the ArcGIS API for JavaScript (ArcGIS JS API), WebGL, and custom layers. We released the source code of the demo app on GitHub and we hope that our developers will enjoy this deep-dive in the world of custom visualizations. The source code is published under the permissive Apache 2.0 license and you can use any part of it in your projects. Let us know if you do!

animate-flow-1.gif

With that said, the article and the demo as they currently stand are an advanced topic, and the techniques that they implement may require significant investment to be adapted to your use case. This is why we have plans to bring this kind of visualization to a larger audience by shipping flow visualization and animation support as part of the ArcGIS JS API.

We opened this thread to collect your feedback, use cases, workflows, and scenarios.

What do you expect from a flow visualization solution?

11 Comments
MehdiPira1
Esri Contributor

This is awesome!

Thanks @Geodario .

Alexandre-Notos
New Contributor III

Very cool

MattGaffner
New Contributor II

Hi Dario,  that's great functionality.  I have winds and ocean currents data (current time and forecast) as ImageServices.  It sounds like those can be used from a quick read.  Is that the case?  Happy to supply access to those REST endpoints if you wanted to play with that data.

Geodario
Esri Contributor

Hello Matt,

Thank you!

Yes, the data source is an ImageService but currently we only support tiled imagery tile layers (https://github.com/Esri/animated-flow-ts/blob/main/src/flow/sources.ts#L45). It should be easy to create a new source that uses non-tiled image servers. Yes, definitely I would like to have a look at the data; we did encounter some issues with certain queries while developing this, so definitely the more layers we can test, the better it is.

Thanks!

YoojungYang
New Contributor II

@Geodario 

 

This is very cool and exactly what we are looking for. 

Then currently the original source the data that we want to use is from weather station points data and have no image server. 

Does the source have to be in imagery tile format to start this animation scripting? 

Or could you give any hint to start with point data?  

Geodario
Esri Contributor

@YoojungYang

Thank you!

Currently we only support ImageryTileLayer sources; work on ImageryLayer sources is underway.

I think you could be able to turn point data into a dense raster compatible with the simulation algorithm by using ArcGIS Pro or Python.

ArcGIS Pro and Python . This would be an offline procedure; you would probably create the raster files and serve them, either as ImageryTileLayers (in which case the current source would be able to load) or in some other custom format (in which case you need to create a new custom source by implementing the flow source interface).

REST endpoint . This would enable your web app to demand a conversion on-the-fly. You would create a custom source by implementing the flow source interface; this custom source would load the point data, use the REST endpoint to convert it to interpolate/densify it, and return it as a raster compatible with the simulation algorithm.

I'll find out more on this topic and get back to you.

On the other hand, being able to support point data natively, without the need for an offline or on-the-fly conversion, is an interesting possibility and would be the preferred choice for many of our users. We would definitely consider such an option. Thank you for bringing this up!

 

mh19
by
New Contributor II

Hi @Geodario,

thank you for a great sample code.

I was able to make your sample code work with ImageryLayer (wind direction and speed, esriImageServiceDataTypeVector-MagDir) by changing the code slightly.

Is there any way I could make the Flow layer to change with time? I added additional ImageryLayer to my map (cloud cover) and a time slider. This layer has time extent (multidimensional data, hourly time slices) and works as expected when I interact with the time slider. The image service I am using as a source for the Flow layer has the same time extent (also multidimensional data, same hourly time slices).

Thank you for any tips.

Monika

 

YoojungYang
New Contributor II

Hi, @Geodario 

 

Thank you for your kind response and I'm testing the code w/ vector point data. 

One more question is,  

When I check your arrows when the wind direction is 180 degree then the arrow is going towards south and the animation follows the direction. However in meteorology the wind direction is 180 degree, the wind is actually coming from south, which means the arrow head supposed to align north. 

In your code you add '-' to change the direction of v. is it what you intended to change the direction of wind?  

mh19
by
New Contributor II

Hi @YoojungYang,

that's the approach I took myself as well.

I moved away from this custom layer to the latest 4.22 which includes this type of animation as a renderer (AnimatedFlowRenderer). But this renderer doesn't give me the option to change the direction.

@Geodario  A suggestion for the JS API Dev team to add options similar to the vector field renderer, e.g. rotationType, flowRepresentation?

Thank you

 

Geodario
Esri Contributor

Hello everybody, I am truly sorry for the late reply!

4.23 adds flowRepresentation and also fixes a reprojection issue that was affecting the direction of the flow in both 4.22 and the open source sample at https://github.com/Esri/animated-flow-ts.

4.23 also add support for time and proper handling of the multi dimensional definition.

> In your code you add '-' to change the direction of v. is it what you intended to change the direction of wind?

Kudos to both of you for figuring this out! Tthat's exactly how we are using it now in the 4.23 FlowRenderer. However, that's not why I initially introduced speedScale. The speed scale was there because the speed is in knots/map units while the simulation is ran in pixels; so, conceptually, you need a conversion factor. In the open source code it was set to 0.1, because it seemed to be a good value for most services; in 4.22 it is set to 1. In 4.23 it is set to +1 or -1 depending on the flowRepresentation.

Geodario
Esri Contributor

Hello everybody,

We just posted a blog entry about modding the animated-flow-ts repository to create new visualizations.

We also cleaned up the repository itself, fixed a couple of bugs, and improved comments and readability. You should fetch the main branch from your fork to get the improved codebase and the new demo apps.

We hope that you will find this useful for your project!

Happy coding!