Mapbox-gl-js: map.addLayer / map.removeLayer / map.setFilter seem slow on Firefox

[mdartic]

mapbox-gl-js version: 0.44.2 , 0.45.0-beta.1

Steps to Trigger Behavior

1. create a fullscreen map with a mapbox street style
2. add layer circle of geojson data
3. add mousemove / mouseleave / click handlers on layers that add/remove layers or use setFilter or use setData

Expected Behavior

The layers are added / removed / filtered smoothly.

Actual Behavior

The layers are added / removed / filtered slowly on Firefox.
Works correctly on Chrome / Chromium / Opera / Vivaldi.
The setData is more performant than the other strategies.

You can see the result here : https://jsbin.com/nicopal/ and see the code here : https://jsbin.com/nicopal/edit

Here are two gif illustrating how smooth / slow it is :

• Chrome with add/remove layers

• Firefox with add/remove layers

• Firefox with setFilter (thanks @stegano)

On Chrome, sometimes, warnings are saying [Violation] 'requestAnimationFrame' handler took 91ms.

On Firefox, no error, but the layers are added / filtered so slowly...

If we use setData (thanks @peterqliu), performance is better on Firefox : (jsbin here : https://jsbin.com/vusojuf/edit?js,output)

The lag is still present even if setData.

Is there any improvement available to make Firefox smoother ?

With #6263, here is the new result : (thanks @jfirebaugh )

That's better !

[stegano]

Processing with filters or expressions appears to improve performance over removing and adding layers.

[mdartic]

Thanks for your help, I've changed the code with map.setFilter, but problem is still here :

I've updated the code in the jsbin.

[peterqliu]

Hi @mdartic , great question. setFilter and addLayer are both valid ways to do this, but the most performant method is actually setData on the layer for your active state. You can extract the feature geometry via queryRenderedFeatures on your mouse event, and use that to populate the active layer (big white circle).

[mdartic]

Thank you @peterqliu
That's the result in Firefox :

And the code updated : https://jsbin.com/vusojuf

setData seems better in performance, but lag is still present.
We don't have anymore the "queue effect" that we had in addLayer / removeLayer / setFilter.
But Firefox seems still late in refreshing the map style.

Do you think this lag could be more optimized ?

[jfirebaugh]

Yes, we just merged a major feature to better support use cases like this: #6263 (see also #6020). It will be in the 0.46 release.

[Amit-Gore]

@jfirebaugh When can we expect the 0.46 release? I have a vector tile source and filtering out the layer is having the same effect as above. Earlier when I was using geojson source it was working perfectly fine but now it has major performance issues. Can I expect these issues to be covered in next release?

[mollymerp]

@Amit-Gore it should be available by tomorrow evening.