Adding Map Layer Filters
Render an interactive map application with the ability to filter a vector layer’s visible data. The following example will display an interactive map application centered on the United States with radar, storm reports and storm cells layer options. Storm reports and storm cells toggle controls are configured to support filters, either toggling between filters (storm cells) or selecting one or more filter (storm reports).
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Xweather JavaScript SDK - Interactive Map App w/Layer Filters</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>
body {
font-family: 'Helvetica','Arial',sans-serif;
}
#app {
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,
timeline: {
from: -48 * 3600
},
layers: 'stormreports'
},
panels: {
layers: {
buttons: [{
id: 'radar',
value: 'radar:80',
title: 'Radar'
},{
value: 'stormreports',
title: 'Storm Reports',
filter: true,
multiselect: true,
segments: [{
value: 'all',
title: 'All'
},{
value: 'wind',
title: 'Wind'
},{
value: 'flood',
title: 'Flood'
},{
value: 'hail',
title: 'Hail'
},{
value: 'tornado',
title: 'Tornado'
}]
},{
value: 'stormcells',
title: 'Storm Cells',
filter: true,
multiselect: false,
segments: [{
value: 'all',
title: 'All'
},{
value: 'hail',
title: 'Hail'
},{
value: 'rotating',
title: 'Rotating'
},{
value: 'tornado',
title: 'Tornadic'
}]
}]
}
}
});
});
};
</script>
</body>
</html>