Skip to content

JF: fix map performance#2

Open
aymoun95 wants to merge 5 commits into
Jobflow-io:mainfrom
aymoun95:fix/map-performance
Open

JF: fix map performance#2
aymoun95 wants to merge 5 commits into
Jobflow-io:mainfrom
aymoun95:fix/map-performance

Conversation

@aymoun95

@aymoun95 aymoun95 commented May 15, 2024

Copy link
Copy Markdown

Description

  • Enhance map poor performance upon loading multiple markers

Time Track

  • Started working on it on Tuesday afternoon and finished the first solution by the evening.

Test

  • Before pulling try out the map on the main branch, open the performance monitor and check the js and ui threads fps
  • checkout out this branch
  • check the performance monitor, it gets 60 fps all the time

Screenshots

Screenshot 2024-05-14 at 8 20 10 PM

Edit: for now we can show the image of company as cluster image and once zoom in the group is going to be shown

Simulator.Screen.Recording.-.iPhone.SE.3rd.generation.-.2024-05-16.at.20.05.36.mp4

PS: we can further improve the performance by setting the tracksViewChanges to false as here it will work because of conditional rendering by the supercluster but one downside to it is that the image will be shown as white until it loads but there will be no flicker. This has the best performance until now ( did not push this, just disable the tracksViewChanges)

Simulator.Screen.Recording.-.iPhone.SE.3rd.generation.-.2024-05-16.at.21.15.12.mp4

Notes

  • Sol 1: this solution uses clustering, I used only the installed library use-supercluster (found another that simplifies react-native-maps-clustering but no need for extra bundle size)

  • Sol 2: tried out to only show the markers that appear inside the bounding box (we can simplify getting it using predefined react native maps method: getBounds), but the problem persisted as almost all the markers are scattered in the same area: I didn't want to change the data as I assumed that this is a real scenario as stated in the challenge.

  • Sol 3: tried setting the tracksViewChanges to false and re-render the marker custom image using the redraw method but got no luck on ios as the redraw was not called either inside onLoad or when using an effect.

  • Sol 4: I am thinking of creating a small server and will try to send data by chunks but I thought that the map will flicker a bit as if I set the tracksViewChanges to false I need to force a re-render.

PS: I think we can overcome the Sol 3 issue with further investigation, will keep trying for it and once done will create another PR for it. Also will try Sol 4 after that.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants