[question] updating JSON source causes map layers to flicker

[rlueder]

Hello,

I need some help updating the JSON data for layers without causing layers to flicker. My current setup for fetching and rendering data is:

1. a HOC that handles dispatching actions to fetch data from my API (using axios/redux-axios-middleware);
2. a Source component that takes the data;
3. a Layer w/ Features that map the array.

<Source
  id='json_source'
  geoJsonSource={response.data.features}
/>
<Layer
  id='my-layer'
  sourceId='json_source'
  type='symbol'
>
  {features.map((feature, i) =>
    <Feature
      {...feature}
      coordinates={feature.geometry.coordinates}
      key={i}
    />
  )}
</Layer>

The data is refreshed every 10s and this causes the whole layer to flicker every time there's an update. I found a series of issues on mapbox-gl-js repo and it seems that setData() should solve this issue (and 'Source' components seem to take care of it) but I had no luck:

Calling setData on geojson sources causes flickering
Is map.update() supposed to respond to changes in GeoJSON source data?
Modifying GeoJSON source

Any tips on how to update JSON data without causing layers to flicker? Thanks!

[alex3165]

Hi @rlueder would you be able to reproduce the issue using the webpackbin boilerplate?

[rlueder]

I'll have some time later this week to give it a go and will let you know (though I think it's something to do with my setup and not react-mapbox-gl).

[alex3165]

@rlueder Do you have any update on this? make sure you don't call the map factory in the render function of your component.

[rlueder]

Hi @alex3165 sorry for the long delay in responding, I finally had time to go back to my project on this and take a look. The issue was completely due to a bad implementation on my side, every time I fetched new data the redux state was being set to undefined and the layer wouldn't load until the data was there, I made a few tweaks and it works now, smooth updates! 👍