optimizationmapbox-gl-jsweb-optimization

Mapbox GL JS .setData() loop performance optimization

enter image description here enter image description here enter image description here Every 50 milliseconds, I am receiving an update from a server and then I am updating the point data in my Mapbox GL JS like this:

    map
      .getSource('pointsSource')
      .setData(pointsData);

The drama begins when I discover that my laptop goes in turbo mode and uses 200% of the CPU, whereas where I am not doing .setData() (not updating the data but only displaying the map) it works using 25%.

At any given time, I am updating only 25 points. How can I improve performance considering that it is not related to the number of points but rather to the fact that I am calling .setData() very fast? I think this way because I did experiments with 1 point or 10000 and the result is the same (200% CPU).

Solution

  • I don't think setData is intended to be called so frequently. If you don't need to move the geometry (just attributes) you might be able to use setFeatureState instead.

    Alternatively, at least to stop the window locking up, you could wait for the idle event before calling setData():

    map.on('idle', () => map.setData(...));