Animation

You can easily include an instance of Maps using the MapView component (opens in a new tab) within the JavaScript SDK (opens in a new tab). The Map View component allows you to animate across a time range, add title bars, and custom branding overlays. Simply download the Javascript + CSS file from our CDN or include them on your page:

<script defer src="https://cdn.aerisapi.com/sdk/js/latest/aerisweather.min.js"></script>
<link rel="stylesheet" href="https://cdn.aerisapi.com/sdk/js/latest/aerisweather.css">

Once the library files have been loaded, create a new instance of AerisWeather and pass your client_id and client_secret as arguments. Using the views() method on your AerisWeather instance, pass the DOM target and configuration options to the new views.MapView(target, opts) constructor.

For example, here's the configuration that animates the past two hours of satellite and radar layers centered on Minneapolis, MN:

aeris.views().then(views => {
    const map = new views.Map(document.getElementById('map'), {
        map: {
            center: 'minneapolis,mn',
            zoom: 6,
            size: {
                width: 600,
                height: 400
            },
            layers: {
                data: 'satellite,radar',
                overlays: 'admin-dk'
            }
        },
        overlays: {
            title: "Radar / Satellite",
            branding: {
                img: "https://www.aerisweather.com/img/logos/watermark-small.png"
            }
        },
    });
});

The following animation shows satellite-geocolor for the past 6 hours over Florida:

aeris.views().then(views => {
    const map = new views.Map(document.getElementById('map'), {
        map: {
            center: 'orlando,fl',
            zoom: 6,
            size: {
                width: 600,
                height: 600
            },
            layers: {
                data: 'satellite-geocolor',
                overlays: 'admin-dk'
            }
        },
        overlays: {
            title: 'Satellite Geocolor'
        },
        animation: {
            from: -6 * 3600,
            to: 0
        }
    });
});

The example below uses the ftemperatures-hrrr layer and modifier to demonstrate the next 12 hours of temperatures in Seattle:

 
aeris.views().then(views => {
    const map = new views.Map(document.getElementById('ftemps-example'), {
        map: {
            center: 'seattle,wa',
            zoom: 7,
            size: {
                width: 600,
                height: 400
            },
            layers: {
                base: 'flat',
                data: 'ftemperatures-hrrr',
                overlays: 'counties, admin'
            },
        },
        overlays: {
            title: "Forecast Temps",
            branding: {
                img: "https://www.aerisweather.com/img/logos/watermark-small.png"
            }
        },
        animation: {
            from: 0,
            to: 12 * 3600,
            alwaysShowFuture: true
        }
    });
});

Branding Legends