Adjusting the temperature draw range in real time

This example demonstrates how to adjust the colorized draw range for encoded raster data in real time. This allows you to control the range of temperatures that are colorized on the map by updating the drawRange property of the colorscale paint property for the temperatures layer.
temps-draw-range.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>MapsGL SDK - Adjusting temperature draw range in real time</title>
    <meta name="description" content="Adjust the colorized 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>Temperature Range</h3>
        <div class="control">
            <label for="rangeMin">Min</label>
            <input id="rangeMin" type="range" min="-60" max="120" step="0.1" value="-60" />
            <span class="value"></span>
        </div>
        <div class="control">
            <label for="rangeMax">Max</label>
            <input id="rangeMax" type="range" min="-60" max="120" 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: [-80, 39],
            zoom: 2
        });
 
        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}°F`;
        rangeMax.nextElementSibling.textContent = `${rangeMax.value}°F`;
 
        controller.on('load', () => {
            const tempsLayer = controller.addWeatherLayer('temperatures');
 
            rangeMin.addEventListener('input', () => {
                const valueEl = rangeMin.nextElementSibling;
                valueEl.textContent = `${rangeMin.value}°F`;
 
                // Update the min draw range in degrees Celsius (since the data is in Celsius)
                tempsLayer.setPaintProperty('sample.drawRange.min', aerisweather.mapsgl.units.FtoC(parseInt(rangeMin.value)));
            });
            rangeMax.addEventListener('input', () => {
                const valueEl = rangeMax.nextElementSibling;
                valueEl.textContent = `${rangeMax.value}°F`;
 
                // Update the max draw range in degrees Celsius (since the data is in Celsius)
                tempsLayer.setPaintProperty('sample.drawRange.max', aerisweather.mapsgl.units.FtoC(parseInt(rangeMax.value)));
            });
        });
 
    });
    </script>
 
</body>
</html>
Examples Sessions & Usage