Raster Maps - Animations with ArcGIS JS API

The following provides an example of the Xweather Raster Maps radar animations with the ArcGIS Javascript SDK .

<!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="https://www.xweather.com/">Xweather.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>