Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

CircleMarker Performance Optimizations #1679

Merged
merged 7 commits into from
Oct 6, 2023
Merged

Conversation

Alexays
Copy link
Contributor

@Alexays Alexays commented Oct 5, 2023

I'm working on a project that requires a map with a lot of elements, while maintaining optimum performance.
At the moment, we have one custom painter per circle, which leads to a huge drop in performance when there are thousands of circles, for example, whereas we could just as easily use a single painter.

@Alexays Alexays changed the title Avoid using stack for circle layer Use one custom painter for all circles Oct 5, 2023
@JaffaKetchup JaffaKetchup changed the title Use one custom painter for all circles Switch to using one CustomPainter for all CircleMarkers Oct 5, 2023
@JaffaKetchup
Copy link
Member

Hi @Alexays, thanks for your PR!

We'll have a look into this, as performance improvements are always welcome. However, the tests are now failing.

@Alexays
Copy link
Contributor Author

Alexays commented Oct 5, 2023

Hi @Alexays, thanks for your PR!

We'll have a look into this, as performance improvements are always welcome. However, the tests are now failing.

Thanks!
Tests should be ok now.

@Alexays
Copy link
Contributor Author

Alexays commented Oct 6, 2023

Just pushed another improvement.
As accorded to Hixie here
https://www.reddit.com/r/flutterhelp/comments/oa5dh3/is_there_a_way_to_cache_a_portion_of_canvas_to/
The use of drawPoints is way faster, and it allows us to draw the same circles in batch.
I just added a group logic to keep the border and color functionalities different.
And in my tests, I finally reached 60 fps with ~10000 same circles drawn vs ~12fps with the old implementation.

@JaffaKetchup
Copy link
Member

Wow that's an improvement and a half! I'll check later today.

To be honest, circle markers have not had much work done to them since their introduction.

@TesteurManiak
Copy link
Collaborator

Thanks for the contribution! Do you think you can also update the CirclePage example to showcase your improvements with a lot of circles? This will make it easier to test.

@JaffaKetchup
Copy link
Member

(maybe follow the pattern from Many Markers?)

@Alexays
Copy link
Contributor Author

Alexays commented Oct 6, 2023

Sure done :)

Copy link
Collaborator

@TesteurManiak TesteurManiak left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM, I've tested the example on Flutter Web with canvaskit and the map was quite smooth even with 20.000 circles 👍

@JaffaKetchup JaffaKetchup changed the title Switch to using one CustomPainter for all CircleMarkers CircleMarker Performance Optimizations Oct 6, 2023
@JaffaKetchup JaffaKetchup merged commit 5fb54f7 into fleaflet:master Oct 6, 2023
6 checks passed
@JaffaKetchup
Copy link
Member

Many thanks :)

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.

3 participants