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-temp-colors.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="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: {
                        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>

Controller layer order Customizing wind particles