Adding a land mask to a raster layer

This example demonstrates how to add a land mask to a raster tile layer on the map. The mask is inverted so that it is applied to the land, which is the opposite of the default behavior of the water layer where the mask would be applied to the water.
layer-masking.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>MapsGL SDK - Adding a land mask to a raster layer</title>
    <meta name="description" content="Add a land mask to a raster tile layer on the map." />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
 
    <link href="https://api.mapbox.com/mapbox-gl-js/v2.8.0/mapbox-gl.css" rel="stylesheet" />
    <script defer src="https://api.mapbox.com/mapbox-gl-js/v2.8.0/mapbox-gl.js"></script>
 
    <link href="https://cdn.aerisapi.com/sdk/js/mapsgl/latest/aerisweather.mapsgl.css" rel="stylesheet" />
    <script defer src="https://cdn.aerisapi.com/sdk/js/mapsgl/latest/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: document.getElementById('map'),
                style: 'mapbox://styles/mapbox/light-v9',
                center: [10, 47.60621],
                zoom: 3
            });
 
            const account = new aerisweather.mapsgl.Account('CLIENT_ID', 'CLIENT_SECRET');
            const controller = new aerisweather.mapsgl.MapboxMapController(map, { account });
            
            controller.on('load', () => {
                // Set up the masking layer and data source, which just uses the built-in `water` layer but styled to 
                // be white so it can be used as a mask
                const waterLayer = controller.addWeatherLayer('water', {
                    id: 'water-mask',
                    paint: {
                        fill: {
                            color: '#fff'
                        }
                    }
                });
  
                // Add the raster data tile source 
                controller.addSource('satellite-geocolor', {
                    type: 'raster',
                    url: 'https://maps{s}.aerisapi.com/{client_id}_{client_secret}/blue-marble/{z}/{x}/{y}/0@2x.png'
                });
 
                // Add the raster layer and associate it with the data source
                controller.addLayer('satellite', {
                    type: 'raster',
                    source: 'satellite-geocolor',
                    paint: {
                        raster: {
                            opacity: 0.7
                        }
                    },
 
                    // Reference the water mask layer to use as a mask while inverting it so the mask is applied to the 
                    // land instead of the water
                    mask: {
                        id: waterLayer.id,
                        invert: true
                    }
                });
 
            });
        });
 
    </script>
</body>
</html>
Examples Sessions & Usage