MapsGL - Add a Nextzen cities text layer

This example adds a city text layer to a map using the Nextzen vector tile service and filtered to only include features whose type property is equal to locality.
The text layer displays city names at various zoom levels and adjusts the font size based on the population of the city.
nextzen-cities.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>MapsGL SDK - Add a Nextzen cities text layer</title>
    <meta name="description" content="Add city text labels from a Nextzen vector tile source scaled by population." />
    <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>
    
 
    <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: [-93, 40],
                zoom: 4
            });
 
            const account = new aerisweather.mapsgl.Account('CLIENT_ID', 'CLIENT_SECRET');
            const controller = new aerisweather.mapsgl.MapboxMapController(map, { account });
            
            controller.on('load', () => {
 
                // Hide Mapbox labels
                const map = controller.map;
                map.style.stylesheet.layers.forEach(function(layer) {
                    if (layer.type === 'symbol') {
                        map.setLayoutProperty(layer.id, 'visibility', 'none');
                    }
                });
 
                const source = controller.addSource('nextzen', {
                    type: 'vector',
                    url: 'https://tile.nextzen.org/tilezen/vector/v1/256/all/{z}/{x}/{y}.mvt?api_key={nextzen_key}'
                });
 
                const layer = controller.addLayer('nextzen-cities', {
                    type: 'text',
                    source: 'nextzen',
                    sourceType: 'point',
                    sourceLayer: 'places',
                    filter: ['all', ['==', 'kind', 'locality']],
                    paint: {
                        text: {
                            value: ['coalesce', ['get', 'name:en'], ['get', 'name']],
                            weight: ['match', ['get', 'kind'], 'region', 'bold', 'normal'],
                            size: [
                                'case',
                                ['==', ['get', 'kind'], 'country'],
                                ['case', ['<', ['zoom'], 4], 13, 20],
                                ['==', ['get', 'kind'], 'region'],
                                ['case', ['<', ['zoom'], 4], 10, 12],
                                ['<', ['zoom'], 4],
                                12,
                                [
                                    'interpolate',
                                    ['linear'],
                                    ['min', 5000000, ['max', 0, ['get', 'population']]],
                                    0, 12,
                                    5000000, 20
                                ]
                            ],
                            transform: ['match', ['get', 'kind'], 'region', 'uppercase', 'none'],
                            letterSpacing: ['match', ['get', 'kind'], 'region', 0.1, 0],
                            color: ['match', ['get', 'kind'], 'region', '#999', '#555'],
                            outlineColor: '#fff',
                            offset: { x: 0, y: 0 }
                        },
                        symbol: {
                            pitchWithMap: false,
                            rotateWithMap: false
                        }
                    }
                });
 
            });
        });
    </script>
 
</body>
</html>