MapsGL - Controlling layer ordering

This example demonstrates how to control the order of weather layers on the map. In this example, we are using Mapbox and inserting weather layers below Mapbox’s administrative layers so that city labels and administrative boundaries are not obscured by the weather layers.

A similar approach can be used with other map providers if they support inserting layers at a specific index. Otherwise, only weather layers and any custom layers added through MapsGL can have their order managed.

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." />
    <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.9.1/aerisweather.mapsgl.css" rel="stylesheet" />
    <script defer src="https://cdn.aerisapi.com/sdk/js/mapsgl/1.9.1/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: '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', () => {
                let beforeLayerId;
 
                // Find the Mapbox layer id to insert the weather layer before by matching against a
                // particular Mapbox layer id value and type. Here we look for the first admin boundary
                // layer to insert weather layers below.
                const mapboxLayers = controller.map.getStyle().layers;
                mapboxLayers.forEach((layer) => {
                    if (!beforeLayerId && layer.type === 'line') {
                        if (/^admin-1/.test(layer.id)) {
                            beforeLayerId = layer.id;
                        }
                    }
                });
 
                // insert radar below the admin-3 layer
                const radarLayer = controller.addWeatherLayer('radar', null, beforeLayerId);
 
                // always insert temperatures below radar
                controller.addWeatherLayer('temperatures', null, radarLayer.id);
            });
 
        });
    </script>
 
</body>
</html>