JavaScript SDK - Display a Basic InteractiveMapApp

Render a basic interactive map application. The following example will display an interactive map application centered on the United States with radar, satellite and alerts and layer options. The radar layer is displayed initially by default.

Basic interactive map application example


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Xweather JavaScript SDK - Basic Interactive Map App</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">
 
    <style>
    #app {
        font-family: 'Helvetica','Arial',sans-serif;
        height: 600px;
        margin: 30px auto;
        width: 1000px;
    }
    </style>
 
</head>
<body>
 
<div id="app"></div>
 
<script>
 
    window.onload = () => {
 
        const aeris = new AerisWeather('CLIENT_ID', 'CLIENT_SECRET');
        const utils = aeris.utils;
 
        aeris.apps().then((apps) => {
            const map = new apps.InteractiveMapApp('#app', {
                map: {
                    strategy: 'leaflet',
                    zoom: 4,
                    layers: 'radar'
                },
                panels: {
                    layers: {
                        buttons: [{
                            id: 'radar',
                            value: 'radar:80',
                            title: 'Radar'
                        },{
                            id: 'satellite',
                            value: 'satellite:75',
                            title: 'Satellite'
                        },{
                            id: 'alerts',
                            value: 'alerts',
                            title: 'Alerts'
                        }]       
                    }
                }
            });
        });
 
    };
 
</script>
 
</body>
</html>