Calling setData on geojson sources causes flickering

[edenh]

source.setData is being called on mousemove in this example:

[mourner]

@edenh yes, because on every setData, you need to send it to the worker, process it and send back. We could make this a bit better by not removing the line until the main thread gets new processed data.

For a smoother experience on specific use cases like this where data is very small and coordinates don't get away from the current tile too much, but needs to be rendered fast, we could implement an alternative code path that completely avoids worker communication and tiling. It would need a different API though. @ansis what do you think?

[robschley]

This would also help us. We have some use cases that require manipulating a very small amount of data via the setData API and flickering/lag is noticeable.

[mourner]

Grabbing this today.

[mourner]

@robschley try now!

[robschley]

@mourner The flicker is gone when using the setData() API, it is still a little jumpy if the setData API is called frequently but it does not flicker all the data which is a huge improvement. I wonder if it would be possible to animate/transition when using setData()? I suspect that would be a lot of work but it might be something to add to the backlog. Thanks for tackling this issue!

[mourner]

@robschley hmm, can you demonstrate the jumpiness with a JSFiddle? I haven't seen that.

[samarth1sharma]

Instead of using icon, use mapbox marker.
Dynamically vary the latLng of the marker by requesting animation with the help of requestAnimationFrame() function and a very smooth animation can be produced.
Works perfectly fine for me!.

The problem with mapbox icon is that its custom setData() method takes sometime to update the source and so the next animation frame is requested before the data is updated in the source.This causes flickering.
Using mapbox marker, this can be solved.
And then background-image css property can be used to assign a custom image to the marker.

[github0013]

http://turfjs.org/
may be the key.

https://docs.mapbox.com/mapbox-gl-js/example/animate-point-along-route/
https://qiita.com/amay077/items/8f0a415035816217b922