Marker performance issue

[fvisticot]

What is the bug?

Using Flutter Web and flutter_map V4, i display a Map with several markers.

I have started to monitor page performances for WEB using the show_fps: ^1.0.6 package I know that it is not a good practice to monitor performances with "debug Android Studio" but profile seems not available for web Platform.

I'm using the MarkerClusterLayerWidget to display the markers

With few markers on the map, performance is OK with 60 FPS.

When adding more markers (50) , performances drops to 20 FPS

Even if it is in debug mode, the degradation is important.

Any advice or optimizations planned to improve markers performances.

How can we reproduce it?

Build a map with 50 markers inside

Do you have a potential solution?

No response

Platforms

WEB

Severity

Obtrusive: Prevents normal functioning but causes no errors in the console

[ibrierley]

Whats the performance like if you don't use MarkerClusterLayerWidget ?

[fvisticot]

Tx for the quick reply. I have checked without MarkerClusterLayerWidget with a simple MarkerLayer. Result is the same.

In addition, I have deployed a release mode with canvaskit rendering, Using the FPS analyser, with only 51 markers, I'm still between 30 and 40 FPS.

My WebApp objective is to display between 200 and 2000 markers. I'm not very confident yet using this solution.

Any help advice to help me ?

[ibrierley]

Run the example app, click on "many markers" from the top left options. The first stop on the slider is 500 markers which runs fine for me. So firstly I'd run that, see if it performs ok. If that runs fine, then its worth posting what your markers actually are, in case it's those which are part of the issue.

[JaffaKetchup]

I'm not sure whether it's possible, but maybe the FPS monitoring package is having an adverse effect. Performance monitoring on web should use the DevTools.

[fvisticot]

the DevTo

Seems not possible for WEB. I need to use Chrome DevTools https://docs.flutter.dev/perf/ui-performance

[JaffaKetchup]

@fvisticot That's what I posted above. Did I miss something?

[fvisticot]

Run the example app, click on "many markers" from the top left options. The first stop on the slider is 500 markers which runs fine for me. So firstly I'd run that, see if it performs ok. If that runs fine, then its worth posting what your markers actually are, in case it's those which are part of the issue.

The issue is due to the "Marker" I have build. The Marker was defined with a "complex stateless widget" I need to display 1344 markers (test done without cluster)

• With a basic Icon as Maker I get 125 FPS
• With a container with Decoration, I get 4 FPS
• With a container without Decoration, I get around 30 FPS

Marker(
              point: LatLng(competitorLocation.location.latitude,
                  competitorLocation.location.longitude),
              builder: (context) {
                //return Icon(Icons.circle, color: Colors.red, size: 48); // solution#1
                return Container(
                  width: 30,
                  height: 30,
                  //color: Colors.red,
                  decoration: BoxDecoration(
                      shape: BoxShape.circle,
                      color: Colors.pink,
                      border: Border.all(
                        style: BorderStyle.solid,
                        color: Colors.white,
                        width: 1,
                      )),
                  child: Text("a"),
                );
              })

[JaffaKetchup]

Containers are very inefficient. Try using the individual components - such as DecoratedBox, ColoredBox, Padding, and SizedBox.

Clustering will help. If you can make a constant widget, that'll help, but that's probably not possible in your situation.

Ultimately, this isn't a bug. Thanks for reporting!

[talski]

why every marker needs to be rebuilt when I move the map?

[JaffaKetchup]

Hi @talski,

The interaction has changed somewhat in v6, and it's possible you'll notice a large performance improvement. Marker bodies are now standard childs, instead of being built by builder, which should allow the marker tree to be cached, for much quicker rebuilt overall.

The actual Marker itself needs to be rebuilt because the entire layer is rebuilt when moving the map - that's how it moves, just transforming itself.