MapsGL - Adding a day/night overlay

This example adds the day/night overlay on top of satellite imagery. The terminator follows the timeline and stays above the satellite layer in the overlay slot. Use the controls to change opacity or remove the overlay.
day-night-overlay.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>MapsGL SDK - Adding a day/night overlay</title>
    <meta name="description" content="Shade the map with twilight and night, then adjust overlay opacity." />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
 
    <link href="https://api.mapbox.com/mapbox-gl-js/v3.12.0/mapbox-gl.css" rel="stylesheet" />
    <script defer src="https://api.mapbox.com/mapbox-gl-js/v3.12.0/mapbox-gl.js"></script>
 
    <link href="https://cdn.aerisapi.com/sdk/js/mapsgl/1.10.1/aerisweather.mapsgl.css" rel="stylesheet" />
    <script defer src="https://cdn.aerisapi.com/sdk/js/mapsgl/1.10.1/aerisweather.mapsgl.js"></script>
 
    <style>
    body, html {
        margin: 0;
        padding: 0;
    }
    #map {
        height: 100vh;
        width: 100%;
    }
    #controls {
        position: absolute;
        top: 10px;
        left: 10px;
        z-index: 1;
        background: rgba(255, 255, 255, 0.9);
        padding: 10px 12px;
        border-radius: 5px;
        font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
        font-size: 12px;
        line-height: 1.4;
        max-width: 260px;
    }
    #controls h3 {
        margin: 0 0 8px;
        font-size: 14px;
    }
    #controls label {
        display: flex;
        align-items: center;
        gap: 8px;
        margin: 6px 0;
        cursor: pointer;
    }
    #controls input[type="range"] {
        width: 100%;
    }
    #controls p {
        margin: 8px 0 0;
        color: #555;
    }
    </style>
 
</head>
<body>
    <div id="map"></div>
    <div id="controls">
        <h3>Day/night overlay</h3>
        <label>
            <input id="overlayEnabled" type="checkbox" checked />
            Show overlay
        </label>
        <label>
            Opacity
            <span id="opacityValue">0.85</span>
        </label>
        <input id="opacity" type="range" min="0" max="1" step="0.05" value="0.85" />
        <p>Satellite stays under the terminator. The overlay follows the timeline.</p>
    </div>
 
    <script>
        window.addEventListener('load', () => {
 
            mapboxgl.accessToken = 'MAPBOX_TOKEN';
            const map = new mapboxgl.Map({
                container: 'map',
                style: 'mapbox://styles/mapbox/light-v11',
                center: [0, 20],
                zoom: 1.5,
                projection: 'mercator'
            });
 
            const account = new aerisweather.mapsgl.Account('CLIENT_ID', 'CLIENT_SECRET');
            const controller = new aerisweather.mapsgl.MapboxMapController(map, { account });
 
            controller.on('load', () => {
                const opacityInput = document.getElementById('opacity');
                const opacityValue = document.getElementById('opacityValue');
                const overlayEnabled = document.getElementById('overlayEnabled');
 
                const opacity = () => Number(opacityInput.value);
 
                controller.addWeatherLayer('satellite');
                controller.addDayNightOverlay({ opacity: opacity() });
 
                opacityInput.addEventListener('input', () => {
                    opacityValue.textContent = opacity().toFixed(2);
                    if (overlayEnabled.checked) {
                        controller.addDayNightOverlay({ opacity: opacity() });
                    }
                });
 
                overlayEnabled.addEventListener('change', () => {
                    if (overlayEnabled.checked) {
                        controller.addDayNightOverlay({ opacity: opacity() });
                    } else {
                        controller.removeDayNightOverlay();
                    }
                });
            });
 
        });
    </script>
 
</body>
</html>