[Fixed] How to update a mapbox feature coordinate periodically

Issue

I am rendering approximately 100k features on the map using geojson file. When user zoom into a certain level, I would like to periodically pull the data from DB to update the feature coordinates on the viewport.

setInterval(()=> {
    console.log(this.map.getZoom());
    if(this.map.getZoom() >= 12) {
      // Get viewport features
      const list = this.map.queryRenderedFeatures({ layers: ['datalayer'] });
      console.log(list);
      // list.forEach(fea => {
      //how to update the feature coordinates???

      .... 
      // })
    }
  }, 10000);

});

I did some research I found the setFeatureState but this can only update the properties value instead of coordinates?

Solution

setFeatureState can change properties and you can use that for hover or some changing in properties.

queryRenderedFeatures get features that already rendered.
mapbox first convert geojson to tiles and then show the map so if you use queryRenderedFeatures it gets only rendered features for each tile. so you have rendered fetures with duplicate properties and unique coordinates.

you can use this.map.getSource('some id').serialize().data to get all of your data and make a loop on features and after some changing on geometry in your hole data you can set your new data with this.map.getSource('some id').setData(new_data)