Raster Maps - Animations with Leaflet

The following provides an example of Maps layer animations integrated with the Leaflet library. For an example using our JS SDK, please visit the Xweather Javascript SDK docs.

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'/>
    <title>Leaflet Animation - Xweather Raster Maps</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no'/>
    <style>
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }
        #map {
            width: 100%;
            height: 100%;
        }
    </style>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
          integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
          crossorigin=""/>
    <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
            integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
            crossorigin=""></script>
</head>
<body>
 
<div id="map"></div>
 
<script>
    let map;
 
    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 layers = [
        // add more layers!
        'radar',
    ];
 
    function getTileServer(stepNumber, layers, opacity = 0) {
        const interval = (endMinutes - startMinutes) / frameCount;
        const timeOffset = startMinutes + interval * stepNumber;
        const layerStr = layers.join(",");
 
        const url = `https://maps{s}.aerisapi.com/${AERIS_ID}_${AERIS_KEY}/${layerStr}/{z}/{x}/{y}/${timeOffset}min.png${NUM_COLORS}`;
 
        return L.tileLayer(url, {
            subdomains : '1234',
            attribution: '&copy;Xweather',
            opacity: opacity
        });
    }
 
    window.addEventListener('load', () => {
 
        map = L.map('map').setView([44.96, -93.27], 5);
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; OpenStreetMap contributors'
        }).addTo(map);
 
        const frames = [];
        for (let i = 0; i < frameCount; i+= 1) {
            const opacity = (i === 0 ) ? 1 : 0;
            frames.push(getTileServer(i, layers, opacity).addTo(map));
        }
 
        const waitTime = 5000;
 
        const stepTime = 1000;
 
        let currentOffset = 0;
        let previousOffset = currentOffset;
 
        setTimeout(() => {
            setInterval(() => {
                previousOffset = currentOffset;
                currentOffset += 1;
                if (currentOffset === frames.length - 1) {
                    currentOffset = 0;
                }
                frames[previousOffset].setOpacity(0)
                frames[currentOffset].setOpacity(1)
 
            }, stepTime)
        }, waitTime)
 
 
    })
 
 
</script>
</body>
</html>