Filter weather alerts by category

This example demonstrates how to filter the data displayed by the alerts weather layer by alert category. The available alert categories are listed in the categories object, which includes the category title and the VTEC codes associated with each category.
The VTEC codes and their associated alerts are listed at https://www.xweather.com/docs/maps/reference/alert-types (opens in a new tab).
For more details on how to filter raster and vector layer data, see the filtering data documentation.
filter-alerts.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>MapsGL SDK - Filter weather alerts by category</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Filter weather alerts based on alert category in real-time.">
 
    <link href="https://api.mapbox.com/mapbox-gl-js/v2.8.0/mapbox-gl.css" rel="stylesheet" />
    <script defer src="https://api.mapbox.com/mapbox-gl-js/v2.8.0/mapbox-gl.js"></script>
 
    <link href="https://cdn.aerisapi.com/sdk/js/mapsgl/latest/aerisweather.mapsgl.css" rel="stylesheet" />
    <script defer src="https://cdn.aerisapi.com/sdk/js/mapsgl/latest/aerisweather.mapsgl.js"></script>
    
 
    <style>
    body, html {
        margin: 0;
        padding: 0;
    }
    #map {
        height: 100vh;
        width: 100%;
    }
    #controls {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 8px;
        position: absolute;
        top: 10px;
        left: 10px;
        z-index: 1;
        background: rgba(255, 255, 255, 0.8);
        padding: 10px;
        border-radius: 5px;
        font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
        font-size: 12px;
    }
    #controls h3 {
        margin: 0 0 6px;
        font-size: 14px;
    }
    </style>
 
</head>
<body>
    <div id="map"></div>
    <div id="controls">
        <h3>Alert Category</h3>
        <select id="category">
            <option value="all" selected>All</option>
        </select>
    </div>
 
    <script>
        window.addEventListener('load', () => {
 
            mapboxgl.accessToken = 'MAPBOX_TOKEN';
            const map = new mapboxgl.Map({
                container: document.getElementById('map'),
                style: 'mapbox://styles/mapbox/light-v9',
                center: [-93, 40],
                zoom: 3
            });
 
            const account = new aerisweather.mapsgl.Account('CLIENT_ID', 'CLIENT_SECRET');
            const controller = new aerisweather.mapsgl.MapboxMapController(map, { account });
 
            // Configure the different alert categories and their associated VTEC codes
            // The available VTEC codes and their alerts are listed at https://www.xweather.com/docs/maps/reference/alert-types
            const categories = {
                severe: {
                    title: 'Severe',
                    filter: ['in', 'VTEC', 'SV.W', 'TO.W', 'FF.W', 'MA.W', 'FF.A', 'MA.A', 'TO.A', 'SV.A', 'AW.TS.MN', 
                        'AW.TS.MD', 'AW.TS.SV', 'AW.TS.EX']
                },
                fire: {
                    title: 'Fire',
                    filter: ['in', 'VTEC', 'FW.A', 'FRW', 'RFD', 'FW.W', 'AW.FR.MN', 'AW.FR.MD', 'AW.FR.SV', 'AW.FR.EX']
                },
                flood: {
                    title: 'Flood',
                    filter: ['in', 'VTEC', 'FL.Y', 'FL.A', 'FL.W', 'FL.S', 'FA.W', 'FA.A', 'FF.A', 'FF.W', 'RA.W', 'AW.RA,MN', 
                        'AW.RA.MD', 'AW.RA.SV', 'AW.RA.EX', 'AW.FL.MN', 'AW.FL.MD', 'AW.FL.SV', 'AW.FL.EX', 'AW.RF.MN', 
                        'AW.RF.MD', 'AW.RF.SV', 'AW.RF.EX']
                },
                heat: {
                    title: 'Heat',
                    filter: ['in', 'VTEC', 'EH.A', 'EH.W', 'HT.Y', 'HT.W', 'AW.HT.MN', 'AW.HT.MD', 'AW.HT.SV', 'AW.HT.EX']
                },
                wind: {
                    title: 'Wind',
                    filter: ['in', 'VTEC', 'BW.Y', 'EW.W', 'HW.W', 'HW.A', 'HF.W', 'HF.A', 'LW.Y', 'SI.Y', 'WI.Y', 'WI.W', 
                        'AW.WI.MN', 'AW.WI.MD', 'AW.WI.SV', 'AW.WI.EX']
                },
                tropical: {
                    title: 'Tropical',
                    filter: ['in', 'VTEC', 'TC.S', 'TR.S', 'TR.W', 'TR.A', 'HF.W', 'HF.A', 'HU.S', 'HU.W', 'HU.A']
                },
                winter: {
                    title: 'Winter',
                    filter: ['in', 'VTEC', 'AR.W', 'AVW', 'AVA', 'AV.Y', 'BZ.W', 'BS.Y', 'EC.W', 'EC.A', 'ZL.Y', 'ZF.Y', 'ZR.W', 
                        'ZY.Y', 'UP.W', 'UP.A', 'IS.W', 'LE.W', 'LW.Y', 'SQ.W', 'SQ.A', 'SB.Y', 'SN.W', 'WC.Y', 'WC.W', 'WC.A', 
                        'WS.W', 'WS.A', 'LE.A', 'BZ.A', 'WW.Y', 'LE.Y', 'ZR.Y', 'AW.SI.MN', 'AW.SI.MD', 'AW.SI.SV', 'AW.SI.EX', 
                        'AW.AV.MN', 'AW.AV.MD', 'AW.AV.SV', 'AW.AV.EX', 'AW.LT.MN', 'AW.LT.MD', 'AW.LT.SV', 'AW.LT.EX']
                },
                freeze: {
                    title: 'Freeze',
                    filter: ['in', 'VTEC', 'FE.W', 'FZ.W', 'FZ.A', 'HZ.W', 'HZ.A', 'AW.LT.MN', 'AW.LT.MD', 'AW.LT.SV', 'AW.LT.EX']
                }
            }
 
            // Add the categories to the select dropdown
            const categorySelect = document.querySelector('#category');
            Object.keys(categories).forEach((key) => {
                const option = document.createElement('option');
                option.value = key;
                option.textContent = categories[key].title;
                categorySelect.appendChild(option);
            });
 
            // Get the filter expression based on the selected category
            const getFilter = () => {
                const value = categorySelect.value;
                return value === 'all' ? [] : categories[value].filter;
            }
            
            controller.on('load', () => {
 
                const alertsLayer = controller.addWeatherLayer('alerts', {
                    filter: getFilter()
                });
 
                if (alertsLayer) {
                    // Update the alerts layer filter when the category changes
                    categorySelect.addEventListener('change', (e) => {
                        console.log('Category changed to:', e.target.value, getFilter());
                        alertsLayer.setFilter(getFilter());
                    });
                }
 
            });
        });
 
    </script>
</body>
</html>
Examples Sessions & Usage