4.2.2 Displaying a Spatial Studio Dataset as GeoJSON

To load the public Submarine Cables dataset as GeoJSON from Spatial Studio and display it in the MapLibre application, you must make the following changes to the HTML code shown in Displaying a Spatial Studio Dataset in a Standalone MapLibre JavaScript Map as Vector Tiles:

• When adding the Spatial Studio token, the transformRequest function must look for requests of the type Source instead of Tile.
• The map source and layer definitions must change to use the geojson type.

The following show the corresponding changed blocks of code:

        transformRequest: (url, resourceType) => {
            if (resourceType === 'Source' && url.startsWith(spatialStudio.baseUrl)) {
                return {
                    url: url,
                    headers: {'Authorization': 'Bearer ' + spatialStudio.accessToken}
                }
            }
        }

        map.addSource('spatial-studio-geojson-data', {
            'type': 'geojson',
            'data': spatialStudio.baseUrl + '/jsonstream/c5e166cdf86a1605ff9fbaa9d04b7378'
        });

        map.addLayer(
            {
                'id': 'submarine-cables',
                'type': 'line',
                'source': 'spatial-studio-geojson-data',
                'layout': {
                    'line-cap': 'round',
                    'line-join': 'round'
                },
                'paint': {
                    'line-opacity': 0.6,
                    'line-color': 'rgb(53, 175, 109)',
                    'line-width': 3
                }
            }
        );