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.
<!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 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: '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>