MapsGL - Toggle a layer mask at runtime

This example adds temperatures, then uses setMask to clip the fill to land, water, or neither. The layer stays on the map — only the stencil changes. The data inspector follows the same mask, so a click over masked-out area does not report a temperature for that layer.
runtime-layer-mask.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>MapsGL SDK - Toggle a layer mask at runtime</title>
    <meta name="description" content="Switch a temperatures layer between land, water, and no mask without removing the layer." />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
 
    <link href="https://api.mapbox.com/mapbox-gl-js/v3.12.0/mapbox-gl.css" rel="stylesheet" />
    <script defer src="https://api.mapbox.com/mapbox-gl-js/v3.12.0/mapbox-gl.js"></script>
 
    <link href="https://cdn.aerisapi.com/sdk/js/mapsgl/1.10.1/aerisweather.mapsgl.css" rel="stylesheet" />
    <script defer src="https://cdn.aerisapi.com/sdk/js/mapsgl/1.10.1/aerisweather.mapsgl.js"></script>
 
    <style>
    body, html {
        margin: 0;
        padding: 0;
    }
    #map {
        height: 100vh;
        width: 100%;
    }
    #legend {
        position: absolute;
        bottom: 10px;
        right: 10px;
    }
    #controls {
        position: absolute;
        top: 10px;
        left: 10px;
        z-index: 1;
        background: rgba(255, 255, 255, 0.9);
        padding: 10px 12px;
        border-radius: 5px;
        font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
        font-size: 12px;
        line-height: 1.4;
        max-width: 240px;
    }
    #controls h3 {
        margin: 0 0 8px;
        font-size: 14px;
    }
    #controls label {
        display: flex;
        align-items: center;
        gap: 8px;
        margin: 6px 0;
        cursor: pointer;
    }
    #controls p {
        margin: 8px 0 0;
        color: #555;
    }
    </style>
 
</head>
<body>
    <div id="map"></div>
    <div id="legend"></div>
    <div id="controls">
        <h3>Layer mask</h3>
        <label>
            <input type="radio" name="mask" value="none" />
            No mask
        </label>
        <label>
            <input type="radio" name="mask" value="land" checked />
            Land only
        </label>
        <label>
            <input type="radio" name="mask" value="water" />
            Water only
        </label>
        <p>setMask updates the stencil without removing the temperatures layer. Queries honor the same mask.</p>
    </div>
 
    <script>
        window.addEventListener('load', () => {
 
            mapboxgl.accessToken = 'MAPBOX_TOKEN';
            const map = new mapboxgl.Map({
                container: 'map',
                style: 'mapbox://styles/mapbox/light-v11',
                center: [-98, 39],
                zoom: 4,
                projection: 'mercator'
            });
 
            const account = new aerisweather.mapsgl.Account('CLIENT_ID', 'CLIENT_SECRET');
            const controller = new aerisweather.mapsgl.MapboxMapController(map, { account });
 
            controller.on('load', () => {
                controller.addLegendControl('#legend');
                controller.addDataInspectorControl();
 
                controller.addWeatherLayer('temperatures');
                controller.setMask('temperatures', { type: 'land' });
 
                document.querySelectorAll('input[name="mask"]').forEach((input) => {
                    input.addEventListener('change', () => {
                        const value = document.querySelector('input[name="mask"]:checked').value;
                        if (value === 'none') {
                            controller.setMask('temperatures', null);
                        } else {
                            controller.setMask('temperatures', { type: value });
                        }
                    });
                });
            });
 
        });
    </script>
 
</body>
</html>