Mapbox GL setData to update a layer with multiple markers

Question

I have a Mapbox GL with one layer and several markers at this level, I'm trying to update a specific marker, so I use setData to update only one marker, but setData will reset the whole layer to add only what I'm trying to update as a single marker over the entire layer, thereby removing all old markers.

By adding multiple markers in the GEOJson format as an array of GEOJson objects, as shown below, I get an error message:

Uncaught Error: Input data is not a valid GeoJSON object.

the code:

          map.getSource('cafespots').setData([{
            "type": "Feature",
            "geometry": {
              "type": "Point",
              "coordinates": [31.331849098205566, 30.095422632059062]
            },
            "properties": {
              "marker-symbol": "cafe"
            }
          },{
            "type": "Feature",
            "geometry": {
              "type": "Point",
              "coordinates": [31.39, 30.10]
            },
            "properties": {
              "marker-symbol": "cafe"
            }
          }]);

I will feel it this way if someone can help by telling me what I'm doing wrong / missing here, thanks

Answer 1

setData GeoJSON ( ) URL, GeoJSON.

GeoJSON setData .

var geojson = {
  "type": "FeatureCollection",
  "features": []
};

map.on('load', function() {
  map.addSource('custom', {
    "type": "geojson",
    "data": geojson
  });

  // Add a marker feature to your geojson object
  var marker {
    type: 'Feature',
    geometry: {
      type: 'Point',
      coordinates: [0, 0]
    }
  };

  geojson.features.push(marker);
  map.getSource('custom').setData(geojson);
});

https://www.mapbox.com/mapbox-gl-js/example/measure/ , .