smcgeeesriuk-esridist

Animating Feature Layers using WebGL

Blog Post created by smcgeeesriuk-esridist Employee on Jun 29, 2018

Some of you may have seen this animated map that we showcased during the closing plenary at our Annual Conference last month.

 

This data from the Met Office shows 66 thousand lightning strikes from the four most active days last year.

 

 

The animation uses something called the WebGL Renderer, available since version 4.5 of the ArcGIS API for JavaScript. (Also, it is available in 3.24+). One fantastic thing about this renderer, is that it works with existing feature layers! Meaning, data that you have already published will work in this application. Another huuuge advantage of WebGL is that you can have A LOT more features on a map. Read on to learn more…

 

I thought that you’d like to try this animation with your own data I decided to make pulse, the open application that allows you to animate any feature layers (points, lines and polygons).

 

Use the application here

 

 

How to use it

1. Paste in any public feature layer. Or, if it's private. Make sure the token is attached.

Note: Make sure you change "/FeatureServer" to "/FeatureServer/0" (swap 0 with the number of the layer).

 

2. Then select a catagory to animate against. This is a numerical field that the feature layer has.

Note: Some fields will not animate. For example, if they're a text field.

 

3. Before you press play, set how many seconds you want. 

 

It's that simple!

 

Samples

1. Average UK house prices 2018 (low to high)

 

2. Hurricanes (lines) based on wind speed

 

 

Try it for yourself, Access the application here!

The code is open, and available here

 

If you do make any animations with the app above, please share them on twitter to:

@esriukgeodev

We’d love to see what you create!

 

The only current way to change the symbols with this app is to download it locally. This application is only animating the opacity of a layer, from start to end of a numerical field defined. But there's a lot more animation types possible. See below for more information on WebGL and animation.

 

 

Technical stuff

How does it work?

What is WebGL (from WebGL - Wikipedia)

WebGL (Web Graphics Library) is a JavaScript API for rendering interactive 2D and 3D graphics within any compatible web browser without the use of plug-ins.[2] WebGL is integrated completely into all the web standards of the browser, allowing GPU-accelerated usage of physics and image processing and effects as part of the web page canvas. WebGL elements can be mixed with other HTML elements and composited with other parts of the page or page background.  

Basically, WebGL uses your graphics card/GPU to deliver better performance. This does require that your browser and your device support WebGL. Most modern devices do, but you can check yours here.

 

 

What visual variables can be animated

It's worth noting that this application only animates by the visual variable "opacity".

There s a few different render types available to display the layers. But for visual variables it uses the https://developers.arcgis.com/javascript/latest/api-reference/esri-renderers-SimpleRenderer.html#visualVariables. The SimpleRenderer visualises all symbols in a given layer with one symbol. But that one symbol can have different values against it. For example, scale, rotation, opacity… This makes it perfect for animating.

 

Example of fields that can be animated with simpleRenderer.

Some other symbol specific fields are possible to animate. Feel free to experiment with this.

 

More than 1 field at once

Lastly, we can animate more than 1 field at once! For example size and opacity.

 

For example:

Hurricane data 

Time (opacity of point symbol)

Wind speed (size of point symbol)

Direction (rotation)

 

I hope this has inspired you to try lots of different datasets to test with! Also I hope it’s given you an idea of how powerful WebGL is at visualising data.

 

You no longer have to worry about the limits of the browser with WebGL… You can focus your efforts visualising your data to tell your story.

 

If you do make any animations, please share them on twitter to

@esriukgeodev

We’d love to see what you create.

Outcomes