MapsGL - Using MapsGL with MapLibre globe projection

This example demonstrates using MapsGL with the MapLibre mapping library and globe projection. Starting with MapsGL 1.10.0, tile covering is tighter at the pitched horizon and globe limb, so fewer unused tiles are requested there.

maplibre-globe.html


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>MapsGL SDK - Using MapsGL with Maplibre globe projection</title>
    <meta name="description" content="Use MapsGL with a Maplibre globe." />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
 
    <script src="https://unpkg.com/maplibre-gl@v5.0.0/dist/maplibre-gl.js"></script>
    <link href="https://unpkg.com/maplibre-gl@v5.0.0/dist/maplibre-gl.css" rel="stylesheet" />
 
    <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>
    <script src="./xweather.js"></script>
    
 
    <style>
    body, html {
        margin: 0;
        padding: 0;
        background: #0B0B19;
    }
    #map {
        height: 100vh;
        width: 100%;
    }
    </style>
 
</head>
<body>
    <div id="map"></div>
 
    <script>
        window.addEventListener('load', () => {
 
            // Create the Maplibre map instance
            const map = new maplibregl.Map({
                container: 'map',
                style: 'https://api.maptiler.com/maps/streets-v2/style.json?key=xPFh2vaprBPmtXaXWp9y',
                center: [12, 30],
                zoom: 2
            });
 
            // Set projection to globe
            map.on('style.load', () => {
				map.setProjection({
					type: 'globe',
				});
			});
 
            // Set up the MapsGL account
            const account = new aerisweather.mapsgl.Account(XweatherTokens.api.id, XweatherTokens.api.secret);
 
            // Create the Maplibre map Controller
            const controller = new aerisweather.mapsgl.MaplibreMapController(map, { account });
 
            controller.on('load', () => {
 
                // Find the Maplibre layer id to insert base weather layers before
                let beforeLayerId;
                const layers = controller.map.getStyle().layers;
                layers.forEach((layer) => {
                    if (layer.type === 'line' && !beforeLayerId) {
                        if (/\bborder/i.test(layer.id)) {
                            beforeLayerId = layer.id;
                        }
                    }
                });
 
                controller.addWeatherLayer('satellite-geocolor', {}, beforeLayerId);                
                controller.addWeatherLayer('lightning-strikes-pulse', {}, beforeLayerId);
            });
        });
    </script>
 
</body>
</html>