Is there a way to convert API data to a Mapbox layer?

Question

I have a callback function below that is able to generate data from the Eventbrite API. Currently this function can generate markers on my Mapbox map through the 'new Marker' method. However instead of a marker, I want to generate this data into layers on the map through the 'Mapbox addLayer' method.

    callbackEventbrite(function(result){
    const keys = Object.values(result);
    for(const key of keys){
        geojson = {
            type: 'featureCollection',
            features: [{
                type: 'feature',
                geometry: {
                    type: 'Point',
                    coordinates: [key.venue.longitude, key.venue.latitude]
                }
            }]
        }
        eventInfo.push(
            {"longitude": key.venue.longitude , "latitude": key.venue.latitude , "name": key.name.text, "venue": key.venue.name, "date": key.start.local, "category": key.category_id}
        );
    }
});

I basically want to this , which generates symbols on the map, based on the coordinates of the geometry, but with the API data instead.

map.addLayer({
        "id": "locations",
        "type": "symbol",
        "source": {
            "type": "geojson",
            "data": {
                "type": "FeatureCollection",
                "features": [
                    {
                      "type": "Feature",
                      "properties": {
                        "Title": "The Congress Inn",
                        "Description": "Pub located in Longton",
                        "Type": "Pub",
                        "Address": "14 Sutherland Rd, Stoke-on-Trent ST3 1HJ",
                        "Longitude": 2.1316,
                        "Latitude": 52.9878,
                        "icon": "bar"
                      },
                      "geometry": {
                        "coordinates": [
                          -2.131836,
                          52.987238
                        ],
                        "type": "Point"
                      }
                    },

Any help is much appreciated! thankyou

Answer 1

This should be fairly simple, you just need to build a feature array out of the Eventbrite response.

1. First build an array of geojson features to use in your source.

2. Then add the source to the map, separately and before you add the layer. You'll use the feature array you just created in the source.

3. After the source is added to the map you can create a layer and reference the source in your layer.

Try the code below to get you started. Let me know if it works for your case.

var featureArr;
callbackEventbrite(function(result) {
  const keys = Object.values(result);
  for (const key of keys) {
    var feature = {
      "type": "Feature",
      "id": key.venue.id,
      "geometry": {
        "type": "Point",
        "coordinates": [key.venue.longitude, key.venue.latitude]
      },
      "properties": {
        "title": key.venue.name,
        "description": key.venue.description,
        "icon": "bar"
      }
    };
    featureArr.push(feature);
  }
}


map.addSource("mySource", {
  "type": "geojson",
  "data": {
    "type": "FeatureCollection",
    "features": featureArr
  }
});

map.addLayer({
  "id": "locations",
  "type": "symbol",
  "source": "mySource",
  "layout": {
    "text-font": ["Open Sans Semibold", "Arial Unicode MS Bold"],
    "text-offset": [0, 0.6],
    "text-anchor": "top",
  }
});

Note: I don't know what's in the response object from Eventbrite so some of the key.value.xyz are made up variables