Temperature text labels using GeoJSON places

This example demonstrates how to query temperature data for the top 100 cities in the US and display their values on the map.

The cities are requested from the Xweather Data API using the places endpoint in GeoJSON format and set up as a geojson data source on the map. The temperature data is then queried for each city using the temperatures weather layer and displayed as text labels on the map.

query-layer-api-geojson.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>MapsGL SDK - Temperature text labels using GeoJSON places</title>
    <meta name="description" content="Query temperature data for the top 100 cities in the US and display their values 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: [-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', () => {
 
                // Add temperature layer which will be used to query the data from
                const tempsLayer = controller.addWeatherLayer('temperatures');
 
                // Add a custom GeoJSON source that loads in the top 100 cities in the US which will be used as the 
                // points to query the temperature data for
                const citiesRequest = account.api()
                    .endpoint('places')
                    .action('search')
                    .query('country:us,name:!NULL')
                    .sort('pop:-1')
                    .limit(100)
                    .format('geojson');
 
                const citiesSource = controller.addSource('cities', {
                    type: 'geojson',
                    url: citiesRequest.url()
                });
 
                // Add a custom layer that queries the temperature data for each city and displays the temperature in Fahrenheit
                const textLayer = controller.addLayer('cities-text', {
                    type: 'query',
                    source: citiesSource.id,
                    queryLayer: {
                        id: tempsLayer.id
                    },
                    paint: {
                        text: {
                            value: {
                                property: '{dataProp}',
                                transform: (value) => {
                                    if (Number.isNaN(value)) {
                                        return '';
                                    }
                                    return Math.round(1.8 * value + 32);
                                }
                            },
                            size: 24,
                            color: '#000',
                            outlineColor: '#fff',
                            weight: 'bold'
                        },
                        symbol: {
                            allowOverlap: true,
                            fadeOpacity: false,
                            pitchWithMap: false,
                            rotateWithMap: false
                        }
                    }
                });
 
            });
        });
    </script>
 
</body>
</html>

Examples Sessions & Usage