MapBox. A highlight effect by hover event on table. SetData takes 2s for updating source with 6000 features

Question

I'm trying to implement a highlight effect by hover effect on the table's row. I've got the data table related to Mapbox's point features. I update the map point's styles by my rxjs state (every change in the state calls styles updating on my map). For small features count, it works well, but it takes 2 seconds for updating styles on the map with 6000 points. Directly setData execution takes 150-200 ms, but rendering takes 1-3 seconds. How can I improve the performance of the Mapbox for my task? As I wrote, I have 6000 points on the map, and when I hover the cursor over a row in the table I want to change the style for2 points. Change of style implemented by changing the feature's layer (might that be the matter?).

Thanks for any ideas. the github issue.

Without any code to check is hard to diagnose where the issue is coming from, but just conceptually setData is making the map to re-render 6000 points, even the ones that are not changing their state. My recommendation would be to use setFeatureState instead of setData, even if your "table row" contains 100 features, it'll be faster without a doubt. — jscastro
Yeah, I've received the same answer in GitHub and below. Thank you! — Darth Welder

Steve Bennett Steve Bennett · Accepted Answer · 2020-07-20T11:48:11

setFeatureState is the most efficient way to update the styling of a small number of features on a map with many features.

It does have certain limitations: it only works on layers with feature IDs, and not all styling can be controlled through feature state (notably, layout properties such as icon-image cannot).

Documentation here: https://docs.mapbox.com/mapbox-gl-js/api/#map#setfeaturestate

MapBox. A highlight effect by hover event on table. SetData takes 2s for updating source with 6000 features

1 Answers