add multiple geoJSON sources with mapbox GL Js

Question

I am trying to add another source with a new layer to the map with the type geoJSON on the map (mapbox).

I am getting the error message

ERROR Error: There is already a source with this ID

How can I add another geo-source in typescript with a new map.addSource besides an existing geo-source?

First geo-source:

          map.addSource("polygon", create(coordinates, 0.5, 64));
          map.addLayer({
            "id": "polygon",
            "type": "fill",
            "source": "polygon",
            "layout": {},
            "paint": {
              'fill-color': {
                type: 'identity',
                property: 'color',
              },
              'fill-outline-color': 'rgba(200, 100, 240, 1)',
              "fill-opacity": 0.090
            }
          });

in method:

    return {
      "type": "geojson",
      "data": {
        "type": "FeatureCollection",
        "features": [{
          "type": "Feature",
          "geometry": {
            "type": "Polygon",
            "coordinates": [ret]
          }
        }]
      }
    };

second source:

          map.addSource('places', {
            'type': 'geojson',
            'data': activitiesPlaces
          });

       var activitiesPlaces = {
        'type': 'FeatureCollection',
        'features': [
          {
            'type': 'Feature',
            'properties': {
              'name': valuesName
            },
            'geometry': {
              'type': 'Point',
              'coordinates':
                valuesLon,
              valuesLat
            }
          }
        ]
      };

calling this source gives me the error message

Answer 1

The first argument to the Map#addSource method specifies a source ID for the particular source. Each source ID in a map style must be unique, as noted in the API reference here:

Parameters

id (string) The ID of the source to add. Must not conflict with existing sources.

So, specifying unique source IDs for each source added to the map will resolve the error.

Answer 2

Instead of adding multiple sources, you should try adding multiple layers.

    map.addLayer({
            id: 'features-fill',
            type: 'fill',
            source: 'features',
            paint: {'fill-color': 'red', 'fill-opacity': 0.6}
        });

    map.addLayer({
            id: 'features-fill-1',
            type: 'fill',
            source: 'features',
            paint: {'fill-color': 'blue', 'fill-opacity': 0.8}
        });

UPDATE:

map.once('load', function loaded() {
    map.batch(function batch() {
        features.forEach(function eachFilter(feature, index) {
            var id = 'feature-' + index;
            map.addSource(id, {type: 'geojson', data: feature});
            map.addLayer({
                id: id + '-fill',
                type: 'fill',
                source: id,
                paint: {'fill-color': 'red', 'fill-opacity': 0.6}
            });
        });
    });
});

Check out this issue: https://github.com/mapbox/mapbox-gl-js/issues/1484