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.
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!
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:
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.
How does it work?
What is WebGL (from WebGL - Wikipedia)
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".
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.
Time (opacity of point symbol)
Wind speed (size of point symbol)
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
We’d love to see what you create.