Controller layer order

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.

controlling-layer-order.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>MapsGL SDK - Controlling layer order</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', () => {
 
            let beforeLayerId;
 
            // find the Mapbox layer id to insert the weather layer before by matching against a
            // particular Mapbox layer id value and type
            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>

Using a Leaflet map Customizing temperature colors