Create a 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-layer.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>MapsGL SDK - Create a freeze layer</title>
    <meta name="description" content="Use a custom color scale to highlight frost/freeze temperatures." />
    <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>
    <div id="legend"></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: [-70, 50],
                zoom: 2
            });
 
            const account = new aerisweather.mapsgl.Account('CLIENT_ID', 'CLIENT_SECRET');
            const controller = new aerisweather.mapsgl.MapboxMapController(map, { account });
 
            const FtoC = (f) => (f - 32) * 5 / 9;
            
            controller.on('load', () => {
 
                controller.addLegendControl('#map');
 
                controller.addWeatherLayer('temperatures', {
                    id: 'freeze-temps',
                    data: {
                        evaluator: {
                            title: 'Test Override',
                            fn: (value) => {
                                const tempF = units.CtoF(value);
                                let category = '';
                                
                                if (tempF <= 28) {
                                    category = 'Hard Freeze';
                                } else if (tempF <= 32) {
                                    category = 'Freeze';
                                } else if (tempF <= 36) {
                                    category = 'Frost';
                                }
 
                                if (category) {
                                    return `${category}: ${value.toFixed(2)}&deg;C, ${units.CtoF(value).toFixed(2)}&deg;F`;
                                }
                                return '';
                            }
                        }
                    },
                    paint: {
                        sample: {
                            drawRange: { max: 2.22 },
                            colorscale: {
                                stops: [
                                    -90, '#992BFF',
                                    -2.22, '#0046FF',
                                    0, '#73DAFC',
                                    2.22, '#73DAFC'
                                ],
                                interval: 1,
                                interpolate: false
                            }
                        }
                    },
                    legend: {
                        id: 'temps-freeze',
                        type: 'point',
                        title: 'Frost/Freeze',
                        points: {
                            values: [
                                { color: '#992BFF', label: 'Hard Freeze' },
                                { color: '#0046FF', label: 'Freeze' },
                                { color: '#73DAFC', label: 'Frost' }
                            ]
                        },
                        text: {
                            color: '#000'
                        }
                    }
                });
 
            });
        });
    </script>
 
</body>
</html>

Examples Sessions & Usage