MapsGL - Controlling layer ordering

This example shows how MapsGL layer ordering slots stack weather layers without looking up a Mapbox style layer id.

Temperatures and radar land in underlay (radar above temperatures, both below admin boundaries). Wind particles and alert outlines both sit in inlay — particles below the alert lines by stack rank. Use the controls to pin the entire underlay band under waterway labels, or to move radar into inlay so it stacks with vector marks instead of other fills.

layer-ordering.html


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>MapsGL SDK - Controlling layer ordering</title>
    <meta name="description" content="Control the ordering of weather layers on the map using slots." />
    <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: 280px;
    }
    #controls h3 {
        margin: 0 0 8px;
        font-size: 14px;
    }
    #controls label {
        display: flex;
        align-items: flex-start;
        gap: 8px;
        margin: 6px 0;
        cursor: pointer;
    }
    #controls p {
        margin: 8px 0 0;
        color: #555;
    }
    </style>
 
</head>
<body>
    <div id="map"></div>
    <div id="controls">
        <h3>Layer ordering</h3>
        <label>
            <input id="pinUnderlay" type="checkbox" />
            Pin underlay under waterway labels
        </label>
        <label>
            <input id="radarInlay" type="checkbox" />
            Move radar into the inlay slot
        </label>
        <p>Default: underlay below admin boundaries, radar above temperatures; particles and alerts share inlay.</p>
    </div>
 
    <script>
        window.addEventListener('load', () => {
 
            mapboxgl.accessToken = 'MAPBOX_TOKEN';
            const map = new mapboxgl.Map({
                container: 'map',
                style: 'mapbox://styles/mapbox/light-v11',
                center: [-85.5, 40],
                zoom: 3,
                projection: 'mercator'
            });
 
            const account = new aerisweather.mapsgl.Account('CLIENT_ID', 'CLIENT_SECRET');
            const controller = new aerisweather.mapsgl.MapboxMapController(map, { account });
 
            controller.on('load', () => {
                controller.addWeatherLayer('temperatures');
                const radarLayer = controller.addWeatherLayer('radar');
                controller.addWeatherLayer('wind-particles');
                controller.addWeatherLayer('alerts-outline');
 
                const radarId = Array.isArray(radarLayer) ? radarLayer[0].id : radarLayer.id;
 
                document.getElementById('pinUnderlay').addEventListener('change', (event) => {
                    controller.setSlotBeforeId(
                        'underlay',
                        event.target.checked ? 'waterway-label' : null
                    );
                });
 
                document.getElementById('radarInlay').addEventListener('change', (event) => {
                    controller.moveLayerToSlot(
                        radarId,
                        event.target.checked ? 'inlay' : 'underlay'
                    );
                });
            });
 
        });
    </script>
 
</body>
</html>