Mimic in-line GeoJSON using fetch()

Question

For simplicty, referencing this example:

https://carto.com/developers/carto-vl/examples/#example-load-external-geojson-layer

I would like to have this bit of code behave the same as through it were an in-line GeoJSON declaration

fetch('https://libs.cartocdn.com/carto-vl/assets/stations.geojson')
  .then(response => response.json())
  .then(function(data){
      // Define layer
      const source = new carto.source.GeoJSON(data);
      const viz = new carto.Viz();
      const layer = new carto.Layer('layer', source, viz);

      layer.addTo(map, 'watername_ocean');
      layer.on('loaded', hideLoader);
  });

For example (this code works, although for brevity only includes one coordinate):

const stations =
{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {
        "name": "Van Dorn Street",
        "marker-color": "#0000ff",
        "marker-symbol": "rail-metro",
        "line": "blue"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -77.12911152370515,
          38.79930767201779
        ]
      }
    },
  ]
};

const source = new carto.source.GeoJSON(stations);
const viz = new carto.Viz();
const layer = new carto.Layer('layer', source, viz);
layer.addTo(map, 'watername_ocean');

The above is an in-line example which avoids issues relating to global variables versus a variable defined within a function.

What I'm trying to figure out to no avail is how to do use fetch to define a global variable, with the same ease as defining it in-line.

This code does not work:

let stations;    
fetch('https://libs.cartocdn.com/carto-vl/assets/stations.geojson').then(
        function(u){ return u.json();}
      ).then(
        function(json){
          stations = json;
        }
      )

const source = new carto.source.GeoJSON(stations);
const viz = new carto.Viz();
const layer = new carto.Layer('layer', source, viz);
layer.addTo(map, 'watername_ocean');

Generates the following errors:

Error: [Missing required property] 'data' carto-vl.min.js:6:3429

Answer 1

The issue in your code is that 'fetch' is asynchronous. Therefore, when creating the GeoJSON source, the 'stations' variable doesn't have yet any value. In this case, you'd need to use Promises, async-await or a callback.

From the example above:

1. Using a callback:

    fetch('https://libs.cartocdn.com/carto-vl/assets/stations.geojson')
      .then((response) => response.json())
      .then((data) => init(data));

    function init(data) {
      const map = new mapboxgl.Map({
        container: 'map',
        style: carto.basemaps.voyager,
        center: [0, 0],
        zoom: 1,
        scrollZoom: false
      });

      const nav = new mapboxgl.NavigationControl({
        showCompass: false
      });
      map.addControl(nav, 'top-left');
      map.addControl(new mapboxgl.FullscreenControl(), 'top-left');

      // Define user
      carto.setDefaultAuth({
        username: 'cartovl',
        apiKey: 'default_public'
      });

      const source = new carto.source.GeoJSON(data);
      const viz = new carto.Viz();
      const layer = new carto.Layer('layer', source, viz);

      layer.addTo(map, 'watername_ocean');
      layer.on('loaded', hideLoader);

      function hideLoader() {
        document.getElementById('loader').style.opacity = '0';
      }
    }

2. Using async-await

    async function getStations() {
      return fetch('https://libs.cartocdn.com/carto-vl/assets/stations.geojson')
        .then((response) => response.json());
    }

    async function init() {
      const map = new mapboxgl.Map({
        container: 'map',
        style: carto.basemaps.voyager,
        center: [0, 0],
        zoom: 1,
        scrollZoom: false
      });

      const nav = new mapboxgl.NavigationControl({
        showCompass: false
      });
      map.addControl(nav, 'top-left');
      map.addControl(new mapboxgl.FullscreenControl(), 'top-left');

      // Define user
      carto.setDefaultAuth({
        username: 'cartovl',
        apiKey: 'default_public'
      });

      const data = await getStations();
      const source = new carto.source.GeoJSON(data);
      const viz = new carto.Viz();
      const layer = new carto.Layer('layer', source, viz);

      layer.addTo(map, 'watername_ocean');
      layer.on('loaded', hideLoader);

      function hideLoader() {
        document.getElementById('loader').style.opacity = '0';
      }
    }

    init();

To access the variables, you can return them and use it only when the request has finished:

  async function getStations() {
    return fetch('https://libs.cartocdn.com/carto-vl/assets/stations.geojson')
      .then((response) => response.json());
  }

  async function init() {
    const map = new mapboxgl.Map({
      container: 'map',
      style: carto.basemaps.voyager,
      center: [0, 0],
      zoom: 1,
      scrollZoom: false
    });

    // ...

    const data = await getStations();
    const source = new carto.source.GeoJSON(data);
    const viz = new carto.Viz();
    const layer = new carto.Layer('layer', source, viz);

    layer.addTo(map, 'watername_ocean');
    layer.on('loaded', hideLoader);

    // ...

    return { data, source, viz, layer, map };
  }

  // deconstruct the objec to create the variables

  const { data, source, viz, layer, map } = await init();

  // Use the variables here!