Recommended approach for displaying a map with many markers (500+), one of which is updated very frequently (60Hz)?

[androidseb]

Recommended approach for displaying a map with many markers (500+), one of which is updated very frequently (60Hz)?

Hello, I'm encountering a performance issue and I'm not sure it's due to a limitation of the library or in my way of using it.

I'm rebuilding my app in Flutter, and one of the key UI flows is to allow the user to place polygons and polylines on the map. To achieve that, I show a mix of markers and polygons/polylines that are updated in real time on the map as the the user is moving the map camera.

I'm getting very bad performance if there are already many markers on the map, and my guess is that the map view is doing extra work to recompute all the markers when it should only compute changes for a few markers.

I think this use case could come up not just in my app, so I'm simplifying the problem to make it easier to find the first step towards resolving this.

Simplified problem statement: let's say I want a map view that has many markers, but only one marker's location is updated each time I move the map camera, 60 times per second, like so:

Attempt 1

Keeping the layer containing the marker having changes, I assume a correct way to implement this would be the following code:

class FlutterMapExample1 extends StatefulWidget {
  const FlutterMapExample1({Key? key}) : super(key: key);
  @override
  State<FlutterMapExample1> createState() => _FlutterMapExample1State();
}

class _FlutterMapExample1State extends State<FlutterMapExample1> {
  final List<Marker> manyStaticMarkers = [];
  final List<Marker> oneMarkerChangingOften = [];
  int counter = 0;

  Future<void> _incrementCounter() async {
    await Future.delayed(Duration.zero);
    setState(() {
      counter++;
      final double latAndLng = (counter % 1000 - 500) / 1000;
      oneMarkerChangingOften.clear();
      oneMarkerChangingOften.add(_buildMarker(
        Colors.red,
        position: LatLng(latAndLng, latAndLng),
      ));
    });
  }

  static Marker _buildMarker(final Color color, {final LatLng? position}) {
    return Marker(
      point: position ?? LatLng(0, 0),
      builder: (_) => Container(
        color: color,
        width: 24,
        height: 24,
      ),
    );
  }

  @override
  void initState() {
    for (int i = 0; i < 500; i++) {
      manyStaticMarkers.add(_buildMarker(Colors.green));
    }
    _incrementCounter();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return FlutterMap(
      options: MapOptions(
        center: LatLng(0, 0),
        zoom: 7,
        onPositionChanged: (_, __) => _incrementCounter(),
      ),
      layers: <LayerOptions>[
        TileLayerOptions(
          urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
          minNativeZoom: 1,
          maxNativeZoom: 19,
          maxZoom: 21,
        ),
        MarkerLayerOptions(markers: manyStaticMarkers),
        MarkerLayerOptions(markers: oneMarkerChangingOften),
      ],
    );
  }
}

The performances I'm measuring with this example are the following:

• When I move the map around, a frame costs 12-13ms to compute on my machine
• If I comment out the content of the _incrementCounter() method, a frame costs 6-7ms to compute on my machine

After fiddling with this, I realized it doesn't matter that I'm changing that marker data, what is actually causing the performance hit is the call to setState.
I could very well replace the implementation of _incrementCounter() with a dummy implementation like so, and the performance hit would still be there:

  Future<void> _incrementCounter() async {
   await Future.delayed(Duration.zero);
   setState(() {
     counter++;
   });
 }

So the conclusion I'm drawing from this is that if I expect to want to update some map data at a high rate, I need to find another way to update the data than using setState().

Attempt 4 (yes it took me a few tries to get there)

After playing around with the code and specifically the LayerOption objects, I was able to achieve what I'm trying to do, with no impact on performance (it's just one marker, changing 60 times per second), here is the code:

class FlutterMapExample4 extends StatefulWidget {
  const FlutterMapExample4({Key? key}) : super(key: key);
  @override
  State<FlutterMapExample4> createState() => _FlutterMapExample4State();
}

class _FlutterMapExample4State extends State<FlutterMapExample4> {
  // Defining a stream controller that will be used to notify about rebuild needed of the frequentUpdatesLayerOption
  final StreamController<void> streamController = StreamController<void>();
  late final MarkerLayerOptions frequentUpdatesLayerOption = MarkerLayerOptions(
    markers: [],
    // Passing the StreamController's stream to the MarkerLayerOptions
    rebuild: streamController.stream.asBroadcastStream(),
    // Setting usePxCache to false because the StreamController's stream seems to be ignored otherwise
    usePxCache: false,
  );
  final List<LayerOptions> layers = <LayerOptions>[];
  int counter = 0;

  Future<void> _incrementCounter() async {
    counter++;
    final double latAndLng = (counter % 1000 - 500) / 1000;
    // Updating the marker layer
    frequentUpdatesLayerOption.markers.clear();
    frequentUpdatesLayerOption.markers.add(_buildMarker(
      Colors.red,
      position: LatLng(latAndLng, latAndLng),
    ));
    // Sending something in the stream to notify the frequentUpdatesLayerOption to rebuild
    streamController.add(null);
  }

  static Marker _buildMarker(final Color color, {final LatLng? position}) {
    return Marker(
      point: position ?? LatLng(0, 0),
      builder: (_) => Container(
        color: color,
        width: 24,
        height: 24,
      ),
    );
  }

  @override
  void initState() {
    final List<Marker> staticMarkers = [];
    for (int i = 0; i < 500; i++) {
      staticMarkers.add(_buildMarker(Colors.green));
    }
    _incrementCounter();
    layers.add(TileLayerOptions(
      urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
      minNativeZoom: 1,
      maxNativeZoom: 19,
      maxZoom: 21,
    ));
    layers.add(MarkerLayerOptions(markers: staticMarkers));
    layers.add(frequentUpdatesLayerOption);
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return FlutterMap(
      options: MapOptions(
        center: LatLng(0, 0),
        zoom: 7,
        onPositionChanged: (_, __) => _incrementCounter(),
      ),
      layers: layers,
    );
  }
}

In conclusion this "works" for what I'm trying to achieve, but I'm wondering if it would be possible to achieve this with setState() somehow, either in the current state of the flutter_map library, or with some improvements to the way the didUpdateWidget function processing works to only update the parts of the state that need updating.

If anybody has any insights on this, I'd love to read about it, thanks in advance!

[ibrierley]

Good question and nice clear examples :). I haven't got a lot of time to dig atm, just had a quick test and all ran at exactly the same speed for me, but that may well be my device I suspect.

It's not quite clear if the updating marker will get location updates async and separate to any map interaction or not (and if just movement is a way of testing it or not) ? Does it really get location updates at 60hz (that feels quite heavy for mobile battery use if its going to update at that whatever, but I suspect I've the wrong end of the stick..and its more about visual performance) ?

[androidseb]

all ran at exactly the same speed for me

Do you mean FlutterMapExample1 and FlutterMapExample4 ran at the same speed? You have to look at the "Flutter: Open DevTools Performance Page" (Ctrl + Shift + P on VSCode), and then look at the "UI" frame time while you're moving the map around. You can't measure precisely like this, but you should notice that the "average" frame UI computation time is halved when going from FlutterMapExample1 to FlutterMapExample4.

that feels quite heavy for mobile battery use

Intuitively you might think that, but if you think about it, while the user is moving the map around by dragging it, the entire map is already rendered 60 times per second with all its markers... so it shouldn't be much more work to only change one marker's position before drawing each frame, right?

and its more about visual performance

Yes exactly, when the user is interacting with the UI, you don't want things to be updating at a lower frame rate, it will just make the UI choppy, and Flutter is all about avoid choppy UI :-)

[JaffaKetchup]

Maybe I should set my custom status to 'Ask me about Streams'?

Thanks for this example, might come in useful in future.

I was wondering if the performance might be better if you used Attempt 1, but wrapped the changing layer in a StreamBuilder and streamed in the marker. In the end, not sure if this is any different to your Attempt 4?

In terms of didUpdateWidget, that would be a good idea to look at. Thanks for the tip!

[androidseb]

@JaffaKetchup thanks for your response.

About the StreamBuilder approach, I tried this, but I'm getting the same performance hit (please let me know if you had something else in mind):

class FlutterMapExample1Dot2 extends StatefulWidget {
  const FlutterMapExample1Dot2({Key? key}) : super(key: key);
  @override
  State<FlutterMapExample1Dot2> createState() => _FlutterMapExample1Dot2State();
}

class _FlutterMapExample1Dot2State extends State<FlutterMapExample1Dot2> {
  final List<Marker> manyStaticMarkers = [];
  final StreamController<Marker> changingMarkerStreamController = StreamController<Marker>();
  late final Stream<Marker> changingMarkerStream = changingMarkerStreamController.stream.asBroadcastStream();
  int counter = 0;

  Future<void> _incrementCounter() async {
    counter++;
    final double latAndLng = (counter % 1000 - 500) / 1000;
    changingMarkerStreamController.add(_buildMarker(
      Colors.red,
      position: LatLng(latAndLng, latAndLng),
    ));
  }

  static Marker _buildMarker(final Color color, {final LatLng? position}) {
    return Marker(
      point: position ?? LatLng(0, 0),
      builder: (_) => Container(
        color: color,
        width: 24,
        height: 24,
      ),
    );
  }

  @override
  void initState() {
    for (int i = 0; i < 500; i++) {
      manyStaticMarkers.add(_buildMarker(Colors.green));
    }
    _incrementCounter();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return StreamBuilder<Marker>(
      stream: changingMarkerStream,
      builder: (context, snapshot) {
        final Marker? marker = snapshot.data;
        return FlutterMap(
          options: MapOptions(
            center: LatLng(0, 0),
            zoom: 7,
            onPositionChanged: (_, __) => _incrementCounter(),
          ),
          layers: <LayerOptions>[
            TileLayerOptions(
              urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
              minNativeZoom: 1,
              maxNativeZoom: 19,
              maxZoom: 21,
            ),
            MarkerLayerOptions(markers: manyStaticMarkers),
            MarkerLayerOptions(markers: [
              if (marker != null) marker,
            ]),
          ],
        );
      },
    );
  }
}

[androidseb]

Thanks to the answers so far, I think I might be able to answer my own question at this point...

Question

How to I keep good performance when updating the map data (markers, polylines, etc.) frequently (60Hz)?

Answer

Do not use setState() on your widget containing the FlutterMap or any other widget-rebuilding mechanism (e.g. StreamBuilder, BlocBuilder, etc.), instead use the rebuild field available in the LayerOptions object. For example:

class FlutterMapFrequentUpdatesExample extends StatefulWidget {
  const FlutterMapFrequentUpdatesExample({Key? key}) : super(key: key);
  @override
  State<FlutterMapFrequentUpdatesExample> createState() => _FlutterMapFrequentUpdatesExampleState();
}

class _FlutterMapFrequentUpdatesExampleState extends State<FlutterMapFrequentUpdatesExample> {
  // Defining a MarkerLayerOptions that will not change (visual anchor)
  final MarkerLayerOptions noUpdatesLayerOption = MarkerLayerOptions(
    markers: [_buildMarker(Colors.green)],
  );
  // Defining a stream controller that will be used to notify about rebuild needed of the frequentUpdatesLayerOption
  final StreamController<void> streamController = StreamController<void>();
  // Defining the MarkerLayerOptions that will be changing its marker very frequently
  late final MarkerLayerOptions frequentUpdatesLayerOption = MarkerLayerOptions(
    markers: [],
    // Passing the StreamController's stream to the MarkerLayerOptions
    rebuild: streamController.stream.asBroadcastStream(),
    // Setting usePxCache to false because the StreamController's stream seems to be ignored otherwise
    usePxCache: false,
  );
  int counter = 0;

  // This function is meant to be called very frequently, hence it is NOT calling setState()
  Future<void> _updateMarker() async {
    counter++;
    final double latAndLng = (counter % 1000 - 500) / 1000;
    // Updating the marker layer
    frequentUpdatesLayerOption.markers.clear();
    frequentUpdatesLayerOption.markers.add(_buildMarker(
      Colors.red,
      position: LatLng(latAndLng, latAndLng),
    ));
    // Sending something in the stream to notify the frequentUpdatesLayerOption to rebuild
    streamController.add(null);
  }

  static Marker _buildMarker(final Color color, {final LatLng? position}) {
    return Marker(
      point: position ?? LatLng(0, 0),
      builder: (_) => Container(
        color: color,
        width: 24,
        height: 24,
      ),
    );
  }

  @override
  void initState() {
    _updateMarker();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return FlutterMap(
      options: MapOptions(
        center: LatLng(0, 0),
        zoom: 7,
        onPositionChanged: (_, __) => _updateMarker(),
      ),
      layers: [
        TileLayerOptions(
          urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
          maxZoom: 21,
        ),
        noUpdatesLayerOption,
        frequentUpdatesLayerOption,
      ],
    );
  }
}

Note

If the above answer is correct, then it might make sense to actually NOT update didUpdateWidget. Doing some "smart" computation in didUpdateWidget might actually slow things down, and wouldn't have value if we have another recommended way (streams) to make frequent updates to LayerOptions objects.

@JaffaKetchup please let me know if the answer I suggested makes sense to you, if it does, then I can mark this post as the answer

[JaffaKetchup]

@androidseb I wasn't quite thinking that.

Try changing the layers property to children. This takes a list of widgets instead of a list of LayerOptions. Wrap each layer options with its respective widget: eg. TileLayerWidget(options: TileLayerOptions(...)). This can be done for each market layer as well.

Then wrap the appropriate MarkerLayerWidget with the StreamBuilder, not the whole map widget. This should help with not rebuilding the whole map, and only that layer.

[androidseb]

@JaffaKetchup about your answer: wow, I did not know you could do that! I was not aware of TileLayerWidget and such.

I think I understood what you meant now, and yes it is solving the problem indeed, since only that one marker layer is being updated with the stream.

Here is my code with the StreamBuilder just for the changing marker, working with no (noticeable) performance hit:

class FlutterMapExample1Dot3 extends StatefulWidget {
  const FlutterMapExample1Dot3({Key? key}) : super(key: key);
  @override
  State<FlutterMapExample1Dot3> createState() => _FlutterMapExample1Dot3State();
}

class _FlutterMapExample1Dot3State extends State<FlutterMapExample1Dot3> {
  final List<Marker> manyStaticMarkers = [];
  final StreamController<Marker> changingMarkerStreamController = StreamController<Marker>();
  late final Stream<Marker> changingMarkerStream = changingMarkerStreamController.stream.asBroadcastStream();
  int counter = 0;

  Future<void> _incrementCounter() async {
    counter++;
    final double latAndLng = (counter % 1000 - 500) / 1000;
    changingMarkerStreamController.add(_buildMarker(
      Colors.red,
      position: LatLng(latAndLng, latAndLng),
    ));
  }

  static Marker _buildMarker(final Color color, {final LatLng? position}) {
    return Marker(
      point: position ?? LatLng(0, 0),
      builder: (_) => Container(
        color: color,
        width: 24,
        height: 24,
      ),
    );
  }

  @override
  void initState() {
    for (int i = 0; i < 500; i++) {
      manyStaticMarkers.add(_buildMarker(Colors.green));
    }
    _incrementCounter();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return FlutterMap(
      options: MapOptions(
        center: LatLng(0, 0),
        zoom: 7,
        onPositionChanged: (_, __) => _incrementCounter(),
      ),
      children: <Widget>[
        TileLayerWidget(
            options: TileLayerOptions(
          urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
          minNativeZoom: 1,
          maxNativeZoom: 19,
          maxZoom: 21,
        )),
        MarkerLayerWidget(options: MarkerLayerOptions(markers: manyStaticMarkers)),
        StreamBuilder<Marker>(
          stream: changingMarkerStream,
          builder: (context, snapshot) {
            final marker = snapshot.data;
            return MarkerLayerWidget(
                options: MarkerLayerOptions(markers: [
              if (marker != null) marker,
            ]));
          },
        ),
      ],
    );
  }
}

[ibrierley]

I think I'm missing something with this thread :D, it is early in the morning though!

If you are dragging the map about, you are moving all the other markers around. I don't really understand why the need for the setState in the first example. It works just fine without all the async stuff and the same performance as the stream example, and same as example below, but see if Jaffas stream addition to that makes a difference. So I suspect I'm still missing the point :D.

This is what I'd tried earlier...

class InteractiveTestPage extends StatefulWidget {
  static const String route = 'interactive_test_page';

  const InteractiveTestPage({Key? key}) : super(key: key);

  @override
  State createState() {
    return _InteractiveTestPageState();
  }
}

class _InteractiveTestPageState extends State<InteractiveTestPage> {
  final List<Marker> manyStaticMarkers = [];
  final List<Marker> oneMarkerChangingOften = [];
  int counter = 0;

  void _incrementCounter()  {
    counter++;
    final double latAndLng = (counter % 1000 - 500) / 1000;
    oneMarkerChangingOften.clear();
    oneMarkerChangingOften.add(_buildMarker(
      Colors.red,
      position: LatLng(latAndLng, latAndLng),
    ));
  }

  static Marker _buildMarker(final Color color, {final LatLng? position}) {
    return Marker(
      point: position ?? LatLng(0, 0),
      builder: (_) => Container(
        color: color,
        width: 24,
        height: 24,
      ),
    );
  }

  @override
  void initState() {
    for (int i = 0; i < 500; i++) {
      manyStaticMarkers.add(_buildMarker(Colors.green));
    }
    _incrementCounter();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return FlutterMap(
        options: MapOptions(
          center: LatLng(0, 0),
          zoom: 7,
          onPositionChanged: (_, __) => _incrementCounter(),
        ),
        children:[
          TileLayerWidget(options: TileLayerOptions(
            urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
            minNativeZoom: 1,
            maxNativeZoom: 19,
            maxZoom: 21,
          )),
          MarkerLayerWidget(options: MarkerLayerOptions(markers: manyStaticMarkers)),
          MarkerLayerWidget(options: MarkerLayerOptions(markers: oneMarkerChangingOften, usePxCache: false)),
        ]
    );
  }
}

[androidseb]

@ibrierley thanks for your code suggestion, I tried it and it works too as far as performance goes, I get no performance hit with that code 👍

It seems the key to that problem is using MarkerLayerWidget inside of children instead of using MarkerLayerOptions inside of layers.

[ibrierley]

Does version 1 still work though out of interest (performance wise and update wise) if you remove setState (and set pxCache to false) ?

[androidseb]

Yes indeed, if you set pxCache to false, and remove the setState, then the performance hit goes away, sample code here:

class FlutterMapExample1NoCache extends StatefulWidget {
  const FlutterMapExample1NoCache({Key? key}) : super(key: key);
  @override
  State<FlutterMapExample1NoCache> createState() => _FlutterMapExample1NoCacheState();
}

class _FlutterMapExample1NoCacheState extends State<FlutterMapExample1NoCache> {
  final List<Marker> manyStaticMarkers = [];
  final List<Marker> oneMarkerChangingOften = [];
  int counter = 0;

  Future<void> _incrementCounter() async {
    counter++;
    final double latAndLng = (counter % 1000 - 500) / 1000;
    oneMarkerChangingOften.clear();
    oneMarkerChangingOften.add(_buildMarker(
      Colors.red,
      position: LatLng(latAndLng, latAndLng),
    ));
  }

  static Marker _buildMarker(final Color color, {final LatLng? position}) {
    return Marker(
      point: position ?? LatLng(0, 0),
      builder: (_) => Container(
        color: color,
        width: 24,
        height: 24,
      ),
    );
  }

  @override
  void initState() {
    for (int i = 0; i < 500; i++) {
      manyStaticMarkers.add(_buildMarker(Colors.green));
    }
    _incrementCounter();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return FlutterMap(
      options: MapOptions(
        center: LatLng(0, 0),
        zoom: 7,
        onPositionChanged: (_, __) => _incrementCounter(),
      ),
      layers: <LayerOptions>[
        TileLayerOptions(
          urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
          minNativeZoom: 1,
          maxNativeZoom: 19,
          maxZoom: 21,
        ),
        MarkerLayerOptions(markers: manyStaticMarkers),
        MarkerLayerOptions(markers: oneMarkerChangingOften, usePxCache: false),
      ],
    );
  }
}

[JaffaKetchup]

Well I guess the result of this then is: if you don't have an external source and just need to move based on map movement, use @ibrierley's probably simpler answer; otherwise, stream in the external source as directly to the concerned layer as possible.

All in all, avoid rebuilding the whole map: we kind of knew this part already, but the rest is useful info.

[ibrierley]

I was just about to write similar to that. This is a bit of an unusual case as it's kind of already tied to a stream behind the scenes (based on map movement and all markers need repositioning), so I was a bit wary of overcomplicating it if necessary. If there's a gps stream or something, it makes more sense to go the other route (which is more typical, but also why there's not necessarily a singular recommended approach I think.

I do think we should have a recommendation to use Widgets in general rather than Layers, and maybe update examples with them, if only because I think they are simpler and more intuitive, and I'd like to see all the older layer code vanish one day :D.

[JaffaKetchup]

In the documentation, we do recommend to use widgets instead of layers in the master Layer page. However, in each subpage, we use the older syntax for simplicity. See https://docs.fleaflet.dev/usage/layers for more information.

[androidseb]

@ibrierley @JaffaKetchup thanks for your help with this!
I've marked this question as answered now: @JaffaKetchup's post sums it up pretty well, and all the code sample should be plenty to give context to others looking at this question :-)