Slow performance on map with several markers/clusters

Question

Slow performance on map with several markers/clusters

carloslibardo opened this issue 5 years ago · 8 comments

Hi, i was having slow performance with map markers because i was rendering 250+ markers at the same time in mapview, then i decided to use this lib and implement marker cluster to have a better performance, but i'm still having trouble with that, can be checked in the video. I noticed that this happen when the markers are rendering, but keep with slow performance, even render is done. Can someone try to help me? Thanks

When i'm the max zoom out, for example, works fine.

Here are the versions I am using :

"react": "^16.8.4",
"react-native": "^0.59.3",
"react-native-maps-super-cluster": "^1.6.0"
"react-native-maps": "^0.24.2",

Answer 1 · 2019-08-20T07:18:37.000Z

I have the same issue ... I am testing on iOS simulator. The UI FPS drops to 10 when the clusters are in view, even when the map is inactive. The UI FPS returns to 60 when there no clusters in the map view.

Answer 2 · 2019-08-20T07:19:31.000Z

Which version of the library are you using? Could you please try downgrading to 1.5.x and let me know if the problem persists? Thanks.

Answer 3 · 2019-08-20T13:54:45.000Z

@39otrebla sorry, i just noticed now, i wrote the wrong lib version in my issue hahahah, already fixed, but the version that i was using was ^1.6.0. I downgrade to 1.5.0 but the problem still happens =/

@update

I recorded a new video that can be more easy to notice the slow performance:

Answer 4 · 2019-08-20T17:49:27.000Z

@update i was searching for this problem in react-native-maps lib, and found some troubles with the MapView.Marker, then i set the tracksViewChanges to false and improve the performance, but my marker need to be re-rendered sometimes, then i found a workaround, not officially and possible not the best solution:

react-native-maps/react-native-maps#369

Answer 5 · 2019-09-04T17:14:01.000Z

Hey, im rendering over 2500 markers, with and without clusters and I have no problems of performance. So te problem is in your end (Code) and I don't use tracksViewChanges.

Callout affects the performance alot, so I suggest to not use it, and instead use some functions that triggers a view or a modal.

Also use PureComponent as a class on the markers to prevent re-renders.

Custom images instead of default marker has great effect on performance.

Here you have a live example :

http://g.recordit.co/4NhdmpGbwH.gif

Answer 6 · 2019-09-05T04:15:50.000Z

@39otrebla I have "react-native-maps-super-cluster": "^1.5.0",.

I was able to resolve UI drop by using the icon prop on the <Marker> component. Rendering markers using <View> or <Image> causes to UI to drop drastically, as long as they are in the FOV.

Answer 7 · 2019-09-05T17:24:11.000Z

@hzburki using icon prop works well in production environment? When i was having this problem i did it too, but just work in debug mode.

@jvidalv sometimes you need to use tracksViewChanges, for example when the marker will be changed according the user's use.

Answer 8 · 2019-09-06T05:06:55.000Z

@kaduelinho I'm yet to release the map feature to production but I've tested it on production build and it works fine.

The only issue is that when rendering markers, the default (red google maps marker) gets displayed for half a second before loading the custom image. Other than that the UI FPS holds steady at 60FPS.

I do still have the issue of FPS dropping to 20-25FPS when zooming or panning the map. But that issue persists, even when I remove the super-cluster package. So I think it is a react-native-maps issue.