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 Xweather('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>