Animations with Google Maps

The following provides an example of Maps layer animations integrated with the Google Maps library. For an example using our JS SDK, please visit the AerisWeather JS SDK docs.
<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'/>
    <title>Google Maps 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>
</head>
<body>

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

<script>
let map;

const frameCount = 10; // total intervals
const startMinutes = -60; // 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 TILE_SIZE = 256;

// layer to include on the map
// uncomment more layers or add more!
const layers = [
    // 'alerts',
    // 'satellite',
    'radar',
    'stormcells'
];

function getTileServer(stepNumber, layers, opacity = 0) {
    const interval = (endMinutes - startMinutes) / frameCount;
    const timeOffset = startMinutes + interval * stepNumber;
    const layerStr = layers.join(',');

    return {
        getTileUrl: (coord, zoom) => {
            const server = Math.abs(coord.x + coord.y) % 4 + 1;
            return `https://maps${server}.aerisapi.com/${AERIS_ID}_${AERIS_KEY}/${layerStr}/${zoom}/${coord.x}/${coord.y}/${timeOffset}min.png${NUM_COLORS}`;
        },
        tileSize: new google.maps.Size(TILE_SIZE, TILE_SIZE),
        opacity:  opacity
    }
}

window.addEventListener('load', () => {
    // initialize map
    map = new google.maps.Map(document.getElementById('map'), {
        center: {
            lat: 43.0, 
            lng: -93.0
        },
        zoom: 5
    });

    // set up the animation frames and layers
    const frames = [];
    for (let i = 0; i < frameCount; i += 1) {
        const opacity = (i === 0) ? 1 : 0;
        frames.push(new google.maps.ImageMapType(getTileServer(i, layers, opacity)));
        map.overlayMapTypes.push(frames[ i ]);
    }

    // wait time determines how long to wait and allow frames to load before
    // beginning animation playback
    const waitTime = 5000;

    // step time determines the time in milliseconds each frame holds before advancing
    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>

<script src="https://maps.googleapis.com/maps/api/js?key=GOOGLE_API_KEY" async defer></script>

</body>
</html>
Last modified: March 28, 2022