Marker performance issue

Hi @alex3165, recently switched over to testing out your library for my project. So far it’s greatly reduced complexity, however I’ve found that my performance has drastically decreased. I can easily generate 1000s of markers on my map and I’ve found that FPS starts to drop to 4 - 6 fps at just a few hundred. I’ve made a sample slow app:

https://github.com/benrudolph/react-mapbox-gl-debug

This only generates 1000 markers, and it’s not quite as slow as my app, but you can still definitely start to see the delay. On a map that has a decent amount of complexity in the markers this gets unusable. I did some profiling and this was the result:

Which points to a lot of time spend on firing events when moving the map and causing things to re-render. Let me know if you have any thoughts on this. Mapbox normally handles 1000s of markers without any delay

EDIT: Looked at the source code for this. I believe this is because this library doesn’t use the native Marker element and applies its own HTML transforms to update marker’s position.

[codepreneur]

@benrudolph @alex3165 I am having same performance issues because I have to display complex things on the map and have to use html markers. Is there a way to setState on ‘moveend’ without tweaking the internals?

[alex3165]

It is useful only if you really have to display something “complex” on the map (video, image, react component…) but if you just want to display many icons you should rather use Layer and Feature