Creating a frost/freeze layer

This example demonstrates how to utilize the temperatures weather layer with a custom color scale while limiting the values plotted using the drawRange.max parameter to create a frost-freeze map. This type of map can be helpful in agriculture to display locations where frost may be possible and freeze and hard freeze conditions.

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

Potential Frost: > 32F (0) and <= 36F (2.222C)
Freeze: > 28F (-2.222C) and < 32F (0C)
Hard Free: <= 28F (-2.222C)

We will set the drawRange.max to 36F (2.222C), so we only draw temperatures less than or equal to 36F (2.222C). Additionally, setting colorscale.interpolate: false tells the SDK to disable interpolation between the colorscale.stop values.

frost-freeze.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>MapsGL SDK - Customizing the Temperature Color Scale</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
 
    <link href="https://api.mapbox.com/mapbox-gl-js/{% $versions.mapbox.current %}/mapbox-gl.css" rel="stylesheet" />
    <script defer src="https://api.mapbox.com/mapbox-gl-js/{% $versions.mapbox.current %}/mapbox-gl.js"></script>
    
    <script defer src="{% $paths.sdk %}"></script>
    <link href="{% $paths.css %}" rel="stylesheet" />
 
    <style>
    #map {
        height: 600px;
        margin: 30px auto;
        width: 1200px;
    }
    </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-v11',
            center: [40, 30],
            zoom: 2
        });
        
        const account = new aerisweather.mapsgl.Account('CLIENT_ID', 'CLIENT_SECRET');
        const controller = new aerisweather.mapsgl.MapboxMapController(map, { account });
 
        controller.on('load', () => {
            controller.addWeatherLayer('temperatures', {
                paint: {
                    sample: {
                        drawRange: { max: aerisweather.mapsgl.units.FtoCUnit(36) },
                        colorscale: {
                            stops: [
                                -90, '#992BFF',
                                aerisweather.mapsgl.units.FtoCUnit(28), '#0046FF', // hard freeze value stop
                                aerisweather.mapsgl.units.FtoCUnit(32), '#73DAFC', // freeze value stop
                                aerisweather.mapsgl.units.FtoCUnit(36), '#73DAFC', // frost value stop
                            ],
                            interpolate: false
                        }
                    }
                }
            });
        });
 
    });
    </script>
 
</body>
</html>

Customizing alert styles Showing wind categories