Adjusting the particle draw range in real time

This example demonstrates how to adjust the particle draw range for encoded raster data in real time. This allows you to control the range of wind speeds that are displayed on the map by updating the drawRange property of the colorscale paint property for the wind particles layer.
wind-particles-draw-range.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>MapsGL SDK - Adjusting particle draw range in real time</title>
    <meta name="description" content="Adjust the particle draw range for encoded raster data in real time." />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
 
    <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 {
        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;
    }
    #controls h3 {
        margin: 0 0 6px;
        font-size: 14px;
    }
    #controls .control {
        display: flex;
        flex-direction: row;
        gap: 8px;
        align-items: center;
    }
    #controls label {
        display: block;
        font-size: 12px;
    }
    #controls input {
        width: 200px;
    }
    #controls .value {
        display: inline-block;
        font-size: 12px;
        font-weight: bold;
    }
    </style>
 
</head>
<body>
    <div id="map"></div>
    <div id="controls">
        <h3>Wind Speed Range</h3>
        <div class="control">
            <label for="rangeMin">Min</label>
            <input id="rangeMin" type="range" min="0" max="110" step="0.1" value="0" />
            <span class="value"></span>
        </div>
        <div class="control">
            <label for="rangeMax">Max</label>
            <input id="rangeMax" type="range" min="0" max="110" step="0.1" value="120" />
            <span class="value"></span>
        </div>
    </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, 39],
            zoom: 4
        });
 
        const account = new aerisweather.mapsgl.Account('CLIENT_ID', 'CLIENT_SECRET');
        const controller = new aerisweather.mapsgl.MapboxMapController(map, { account });
 
        controller.addLegendControl('#map');
 
        const rangeMin = document.getElementById('rangeMin');
        const rangeMax = document.getElementById('rangeMax');
        
        rangeMin.nextElementSibling.textContent = `${rangeMin.value} mph`;
        rangeMax.nextElementSibling.textContent = `${rangeMax.value} mph`;
 
        controller.on('load', () => {
            const windLayer = controller.addWeatherLayer('wind-particles', {
                paint: {
                    sample: {
                        colorscale: {
                            drawRange: { min: 0, max: 5 }
                        }
                    }
                }
            });
 
            rangeMin.addEventListener('input', () => {
                const valueEl = rangeMin.nextElementSibling;
                valueEl.textContent = `${rangeMin.value} mph`;
 
                // Update the min draw range in degrees Celsius (since the data is in Celsius)
                windLayer.setPaintProperty('sample.drawRange.min', aerisweather.mapsgl.units.mphToMs(parseInt(rangeMin.value)));
            });
            rangeMax.addEventListener('input', () => {
                const valueEl = rangeMax.nextElementSibling;
                valueEl.textContent = `${rangeMax.value} mph`;
 
                // Update the max draw range in degrees Celsius (since the data is in Celsius)
                windLayer.setPaintProperty('sample.drawRange.max', aerisweather.mapsgl.units.mphToMs(parseInt(rangeMax.value)));
            });
        });
 
    });
    </script>
 
</body>
</html>
Examples Sessions & Usage