MapsGL - Using MapsGL with Mapbox GL globe projection

This example demonstrates using MapsGL with the Mapbox GL 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.

mapbox-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 Mapbox GL globe projection</title>
    <meta name="description" content="Use MapsGL with a Mapbox globe." />
    <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>
    <script src="./xweather.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 = XweatherTokens.mapbox;
            const map = new mapboxgl.Map({
                container: document.getElementById('map'),
                style: 'mapbox://styles/mapbox/dark-v9',
                center: [12, 30],
                zoom: 1,
                projection: 'globe'
            });
 
            map.on('style.load', () => {
                map.setFog({
                    'color': 'rgb(186, 210, 235)', // Lower atmosphere
                    'high-color': 'rgb(36, 92, 223)', // Upper atmosphere
                    'horizon-blend': 0.02, // Atmosphere thickness (default 0.2 at low zooms)
                    'space-color': 'rgb(11, 11, 25)', // Background color
                    'star-intensity': 0.6 // Background star brightness (default 0.35 at low zoooms )
                });
            })
 
            const account = new aerisweather.mapsgl.Account(XweatherTokens.api.id, XweatherTokens.api.secret);
            const controller = new aerisweather.mapsgl.MapboxMapController(map, { account });
            
            controller.on('load', () => {
                controller.addWeatherLayer('wind-particles');
            });
        });
 
    </script>
</body>
</html>