Skip to content

CircleMarker Performance Optimizations#1679

Merged
JaffaKetchup merged 7 commits intofleaflet:masterfrom
Alexays:master
Oct 6, 2023
Merged

CircleMarker Performance Optimizations#1679
JaffaKetchup merged 7 commits intofleaflet:masterfrom
Alexays:master

Conversation

@Alexays
Copy link
Copy Markdown
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
Copy Markdown
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
Copy Markdown
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
Copy Markdown
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
Copy Markdown
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
Copy Markdown
Contributor

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
Copy Markdown
Member

(maybe follow the pattern from Many Markers?)

@Alexays
Copy link
Copy Markdown
Contributor Author

Alexays commented Oct 6, 2023

Sure done :)

Copy link
Copy Markdown
Contributor

@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
@JaffaKetchup
Copy link
Copy Markdown
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