Is it possible to draw features on top of other features without re-rendering the original features?

Hi, I understand that the topic question might be a bit confusing. Here is a clarification of what I am now doing:

1. I draw 10,000 features (circles) on a map.
2. I draw another 10,000 circles on a map and it erases the original 10k circles.

I know that I can keep an array and continuously push to it, e.g.

1. Draw the original 10k circles on the map from an array points.
2. Push the next 10k circles into points and draw all 20k circles.

This isn’t my goal because I don’t want to redraw the original points on the map. My reason for drawing the circles 10k at a time is due to performance optimizations and other constraints.

So here’s my question: Can I draw the new 10k circles on the map without erasing/redrawing the original 10k points?

Also if anyone has other ideas for the issue title then I’ll gladly change it. Just couldn’t think of a better one!

[mklopets]

I might have initially misunderstood your problem a bit.

What you can do is have two separate layers on the map, one for each of your network fetches.

{
  this.state.pointsA && (
    <Layer id="points-a" type="circle" paint={{ 'circle-color': 'red', 'circle-radius': 5 }}>
      {this.state.pointsA.map((point) => (
        <Feature coordinates={[point.coordinates]} />
      ))}
    </Layer>
  )
}
{
  this.state.pointsB && (
    <Layer id="points-b" type="circle" paint={{ 'circle-color': 'red', 'circle-radius': 5 }}>
      {this.state.pointsB.map((point) => (
        <Feature coordinates={[point.coordinates]} />
      ))}
    </Layer>
  )
}

Now, if pointsB appears in the state (after a network request), react-mapbox-gl will only create that layer, keeping the points-a layer as-is.

[mklopets]

The reason for suggesting the two layers was that it should be slightly more performant, because mapbox doesn’t have to initialize the first set of points twice. In general yes, just pushing to an array in the component state is definitely the easiest way to add data from two network requests.

Mapbox itself has some docs on optimizing for large data sets: https://docs.mapbox.com/help/troubleshooting/working-with-large-geojson-data/