Animation Options

The animation options can be used for managing animations. This is done by adding an animation object to the Aeris Interactive Map. Below is the syntax of the object, definition of the parameters, and an example of how to use them.

Parameter Definition
animation.from Earliest available animation time. May be a time string. Eg: '2days'
animation.time Initial time of the animation, when the application is loaded.
animation.speed The speed at which the animation plays, in minutes of weather data displayed per second.
animation.futureSpeed The speed at which the animation plays while animating through forecasted tiles.
animation.useBigTimeLine If set to true, a large-format timeline will be used in place of the smaller timeline widget.
animation.boundsMenu Customize the options to provide in the animation bounds menu. An example can be found below.

Javascript layer customization

<div id="map-canvas" style="margin-left:auto; margin-right:auto; width:600px; height:500px"> </div>
<link media="screen" type="text/css" rel="stylesheet" href="//cdn.aerisjs.com/aeris-interactive/assets/css/default/style.css">
<link media="screen" type="text/css" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.2/leaflet.css">
<link media="screen" type="text/css" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/0.4.0/MarkerCluster.css">
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.2/leaflet.js"></script><script type="text/javascript" src="//cdn.aerisjs.com/aeris-interactive/aim.js"></script><script type="text/javascript">
    var aerisMapBuilder = new aeris.interactive.MapAppBuilder({
        apiId: 'clientID',
        apiSecret: 'clientSecret',
        el: '#map-canvas',
        modules: {
            animation: {
                speed: 100,
                futureSpeed: 200,
                from: new Date(Date.now() - 3600 * 4 * 1000),
                to: new Date(Date.now()),
                useBigTimeline: false,
                boundsMenu:{
                    min: [
                        {
                            value: 1000 * 60 * 60,
                            label: '1 hour ago'
                        },
                        {
                            value: 1000 * 60 * 60 * 2,
                            label: '2 hours ago'
                        },
                        {
                            value: 1000 * 60 * 60 * 3,
                            label: '3 hours ago'
                        }
                    ],
                    max: [
                        {
                            value: 1000 * 60 * 60,
                            label: 'next 1 hour'
                        },
                        {
                            value: 1000 * 60 * 60 * 2,
                            label: 'next 2 hours'
                        },
                        {
                            value: 1000 * 60 * 60 * 3,
                            label: 'next 3 hours'
                        }
                    ]
                },
            }
        }
    });
    aerisMapBuilder.start();
</script>

Test it out!

JS Bin on jsbin.com

Last modified: March 04, 2017