Animation

You can easily include an instance of Maps using the MapView component within the JavaScript SDK. 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 AMP's ftemperatures-hrrr layer 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
        }
    });
});

Last modified: August 02, 2021