JavaScript SDK - Adding Alert Categories as Map Layer Options

The following example will display an interactive map application centered on the United States with radar, satellite and alert layer options. Alerts can be selected to show all alerts or specific categories of alerts only.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Aeris JavaScript SDK - Alert Categories As Map Layer Options For InteractiveMapApp</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: 'alerts'
                },
                panels: {
                    layers: {
                        buttons: [{
                            id: 'radar',
                            title: 'Radar',
                            value: 'radar:70'
                        },{
                            id: 'satellite',
                            title: 'Satellite',
                            segments: [{
                                title: 'Visible',
                                value: 'satellite-visible,states-outlines'
                            },{
                                title: 'Infrared',
                                value: 'satellite:75'
                            }, {
                                title: 'Geocolor',
                                value: 'satellite-geocolor,states-outlines-dk'
                            }]
                        },{
                            id: 'alerts',
                            title: 'Alerts',
                            segments: [{
                                title: 'All Alerts',
                                value: 'alerts'
                            }, {
                                title: 'Severe Related',
                                value: 'alerts-severe'
                            }, {
                                title: 'Fire Related',
                                value: 'alerts-fire'
                            },{
                                title: 'Flood Related',
                                value: 'alerts-flood'
                            }, {
                                title: 'Tropical Related',
                                value: 'alerts-tropical'
                            }]
                        }]       
                    },
                    legends: {
                        position: {
                            pin: 'bottomleft',
                            translate: { x: 10, y: -30 }
                        }
                    },
                     timeline: {
                        position: {
                            translate: {x: 0, y: -15}
                        }
                    }
                }
            });
        });
    };
 
</script>
 
</body>
</html>