Customizing temperature colors

This example configures the temperatures weather layer with a custom color scale and color stop interval. Color stops are and intervals are provided in degrees Celsius to match the units used by the temperatures layer data source.

The example below utilizes a custom color ramp and displays the temperatures every 2 degrees Fahrenheit. Note the utility function, aerisweather.mapsgl.units.FtoCUnit(2), that the SDK provides to allow converting imperial temperature values to metric.

custom-temps-fill.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>MapsGL SDK - Customizing temperature colors</title>
    <meta name="description" content="Apply a custom color scale to the temperature layer." />
    <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: 4
            });
 
            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: {
                        colorscale: {
                            stops: [
                                -60, '#FFFFFF',
                                -50, '#9C619B',
                                -40, '#58005b',
                                -30, '#ce00d7',
                                -20, '#121475',
                                -10, '#5b97f8',
                                0, '#81e8ff',
                                5, '#0f7001',
                                15, '#ecf93d',
                                25, '#e90f0b',
                                35, '#6b0001',
                                45, '#fff7e2',
                                50, '#7b7b7b'
                            ],
                            interval: aerisweather.mapsgl.units.FtoCUnit(2)
                        }
                    }
                }
            });
        });
 
    });
    </script>
 
</body>
</html>

Examples Sessions & Usage