Animations with ArcGIS JS API

The following provides an example of the AerisWeather Mapping Platform's radar animations with the ArcGIS JS library.

 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>ArcGIS JS API Animation Example</title>
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"/>

    <link rel="stylesheet" href="https://js.arcgis.com/4.17/esri/themes/light/main.css">
    <script src="https://js.arcgis.com/4.17/"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }
    </style>
</head>
<body>

<div id="map"></div>

<script>

    const frameCount = 10; // total intervals
    const startMinutes = -300; // start time offset relative to now, where negative means past
    const endMinutes = 0;

    const AERIS_ID = '[CLIENT_ID]';
    const AERIS_KEY = '[CLIENT_SECRET]';
    const NUM_COLORS = '256'; // set to empty string for true color png

    const pauseOnLoadTime = 500; // pause before loading frames
    const waitTime = 2000; // pause before animating frames to allow loading
    const stepTime = 750; // pause between frames

    const layers = [
        // add more layers!
        'radar-global',
    ];


    require([
        "esri/layers/WebTileLayer",
        "esri/Map",
        "esri/views/MapView"
    ], function (WebTileLayer, Map, MapView) {


        function getTileServer(stepNumber, layers, opacity = 0) {
            const interval = (endMinutes - startMinutes) / frameCount;
            const timeOffset = startMinutes + interval * stepNumber;
            const layerStr = layers.join(",");
            const url = `https://maps{subDomain}.aerisapi.com/${AERIS_ID}_${AERIS_KEY}/${layerStr}/{level}/{col}/{row}/${timeOffset}min.png${NUM_COLORS}`;

            return new WebTileLayer({
                urlTemplate: url,
                subDomains: ["1", "2", "3", "4"],
                copyright:
                    'Weather Layers by <a href="http://aerisweather.com/">AerisWeather.com</a>, ',
                opacity: opacity
            });
        }

        let map = new Map({
            basemap: 'streets',
            ground: "world-elevation"
        });

        let view = new MapView({
            container: "map",
            map: map,
            zoom: 4,
            center: [-95.7, 37.1] // longitude, latitude
        });

        view.when(function () {
            setTimeout(() => {

                // load the
                const frames = [];
                for (let i = 0; i < frameCount; i += 1) {
                    const opacity = (i === 0) ? 1 : 0;
                    const tileLayer = getTileServer(i, layers, opacity);
                    frames.push(tileLayer);
                    map.add(tileLayer);
                }

                let currentOffset = 0;
                let previousOffset = currentOffset;

                setTimeout(() => {
                    setInterval(() => {
                        previousOffset = currentOffset;
                        currentOffset += 1;
                        if (currentOffset === frames.length - 1) {
                            currentOffset = 0;
                        }
                        frames[previousOffset].opacity = 0;
                        frames[currentOffset].opacity = 1;

                    }, stepTime)
                }, waitTime)
            }, pauseOnLoadTime);
        });


    });


</script>
</body>
</html>

Last modified: October 30, 2020