1. Help Center
  2. Documentation
  3. Documentation
  4. Examples

AerisWeather 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 AerisWeather JS SDK docs.

 


<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'/>
    <title>Leaflet Animation - AerisWeather 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;AerisWeather',
            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>

Last modified: August 02, 2021