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).

Interactive map application with layer filters example
Interactive map application with layer filters example
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Aeris 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 AerisWeather('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>

Last modified: May 15, 2019