Create a wind speed categories layer

This example demonstrates how to utilize the wind speed weather layer with a custom color scale while limiting the values plotted using the drawRange.min parameter. This type of implementation is useful to highlight specific wind categories and the same technique can be applied to other weather layers.

In this example, we are setting a custom color ramp, for the following categories:

Breezy: 15 - 24 mph
Windy: 15 - 38 mph
Gale / Tropical Storm Force: 39 - 54 mph
Storm / Severe Gale: 55 - 73 mph
Hurricane Force: 74+ mph

We will set the drawRange.min to 15mph (6.7056 mps), so we only draw winds greater than or equal to 15mph (6.7056 mps). Additionally, setting colorscale.interpolate: false tells the SDK to disable interpolation between the colorscale.stop values, improving efficiency.

wind-speed-categories-layer.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>MapsGL SDK - Create a wind speed categories layer</title>
    <meta name="description" content="Use a custom color scale for wind speed to show categorical winds." />
    <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%;
    }
    </style>
 
</head>
<body>
    <div id="map"></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: [-122.33207, 47.60621],
            zoom: 8
        });
 
        const account = new aerisweather.mapsgl.Account('CLIENT_ID', 'CLIENT_SECRET');
        const controller = new aerisweather.mapsgl.MapboxMapController(map, { account });
 
        controller.on('load', () => {
            controller.addWeatherLayer('wind-speeds', {
                paint: {
                    sample: {
                        drawRange: {
                            min: aerisweather.mapsgl.units.mphToMs(15)
                        },
                        colorscale: {
                            // raw data is in m/s, but we define the categories in mph; so we need 
                            // to convert mph to m/s for the color stop values
                            stops: [
                                aerisweather.mapsgl.units.mphToMs(15), '#AED9FE', // breezy
                                aerisweather.mapsgl.units.mphToMs(25), '#FFDF2C', // windy
                                aerisweather.mapsgl.units.mphToMs(39), '#FF9503', // gale / tropical storm force
                                aerisweather.mapsgl.units.mphToMs(55), '#DB2500', // storm / severe gale
                                aerisweather.mapsgl.units.mphToMs(75), '#D802E0'  // hurricane force
                            ],
                            interpolate: false
                        }
                    }
                }
            });
        });
 
    });
    </script>
 
</body>
</html>

Examples Sessions & Usage