Change map units

This example starts with the default map units for the MapsGL MapController and then changes the units for temperature and wind speed after a 5 second delay. Additionally, the current units displayed in the legend will be updated to reflect the new units the map is using.

You can change the units for temperature and wind speed by calling the setUnits() method on the MapController instance. Refer to the map controller configuration options for more information on the available units that can be set.

change-map-units.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>MapsGL SDK - Change map units</title>
    <meta name="description" content="Change units of data displayed on the map 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 {
        display: flex;
        flex-direction: column;
        gap: 12px;
        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 8px;
        font-size: 14px;
    }
    #controls .container {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 20px;
    }
    #controls .control {
        display: flex;
        flex-direction: row;
        gap: 4px;
    }
    #controls .control-field {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }
    #controls .control label {
        margin-top: 2px;
        font-weight: bold;
        min-width: 40px;
    }
    </style>
 
</head>
<body>
    <div id="map"></div>
    <div id="legend"></div>
    <div id="controls">
        <div class="container">
            <div id="units" class="control">
                <label for="range-start">Units</label>
                <div class="control-field">
                    <select id="wind-units">
                        <option value="km/h">km/h</option>
                        <option value="mph" selected>mph</option>
                        <option value="m/s">m/s</option>
                    </select>
                </div>
            </div>
        </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, 40],
                zoom: 4
            });
 
            const account = new aerisweather.mapsgl.Account('CLIENT_ID', 'CLIENT_SECRET');
            const controller = new aerisweather.mapsgl.MapboxMapController(map, { account });
 
            const unitsControl = document.querySelector('#wind-units');
            unitsControl.addEventListener('change', (e) => {
                const units = { speed: e.target.value };
                controller.setUnits(units);
            });
            
            controller.on('load', () => {
 
                controller.addLegendControl('#map');
 
                controller.addWeatherLayer('wind-speeds');
                controller.addWeatherLayer('wind-speeds-text');
 
                // setTimeout(() => {
                //     controller.setUnits({ 
                //         temperature: 'F',
                //         speed: 'km/h'
                //     });
                // }, 5000);
 
            });
        });
    </script>
 
</body>
</html>

Examples Sessions & Usage