Display an interactive map

Display a Basic InteractiveMap

Render a basic interactive map. The following example will display an interactive map centered on the United States with alerts and radar weather layers. The animation timeline range is also set to start six hours in the past and end at the current time.

Basic interactive map example

<!DOCTYPE html>
    <meta charset="UTF-8">
    <title>Xweather JavaScript SDK - Basic Interactive Map</title>
    <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">
    #map {
        height: 400px;
        margin: 30px auto;
        width: 800px;
<div id="map"></div>
    window.onload = () => {
        const aeris = new Xweather('CLIENT_ID', 'CLIENT_SECRET');
        aeris.views().then(views => {
            const map = new views.InteractiveMap(document.getElementById('map'), {
                center: {
                    lat: 39.0,
                    lon: -95.5
                zoom: 4,
                layers: 'alerts,radar',
                timeline: {
                    from: -6 * 3600,
                    to: 0