[BUG] Motion blur on custom markers

[Azzeccagarbugli]

Platforms

all

Version of flutter maplibre_gl

0.20.0

Bug Description

I'm encountering an unusual issue with the custom marker example when panning and moving the map. The markers exhibit a pronounced motion blur effect that significantly impacts the user experience. I've attached a video demonstrating the problem.

I've tried various approaches to resolve this issue, including adjusting marker properties and exploring different rendering techniques, but without success. Any guidance on how to eliminate this motion blur would be greatly appreciated!

---

Screen.Recording.2024-08-09.at.10.39.36.mov

Steps to Reproduce

1. Run the example app
2. Open the custom markers page
3. Pan around the map

Expected Results

The markers will be synchronized with the map when the user interacts with the map.

Actual Results

The markers won't "stick" fully to the map and will create an annoying "motion blur" effect when the user pans and moves the map.

Code Sample

All the code can be found here.

I feel the responsibility for the issue is coming from the implementation of this API:

_mapController.toScreenLocationBatch(coordinates).then((points) {
  _markerStates.asMap().forEach((i, value) {
    _markerStates[i].updatePosition(points[i]);
  });
});

[josxha]

Hi @Azzeccagarbugli, thanks for opening this issue. While I can't give you a solution I can give some further information about this behavior. The delayed movement of the "custom" markers happen because custom markers are flutter widgets but the map is rendered as a plaform view. The update logic of the "custom" markers takes some milliseconds because it calls the asyncronous _mapController.toScreenLocationBatch() function. This causes this delayed movement or motion blur.

https://github.com/maplibre/flutter-maplibre-gl/blob/b077b956b54141e46f6765fe9b71af2b726ad53b/example/lib/custom_marker.dart#L62C3-L74C4

My idea how to improve the behaviour would be something like to use a camera-moved callback that provides the new map camera or some delta values and can be used to update the flutter markers widgets.

A workaround could be for static custom markers to render the widget to an image and create a symbol with that image. However, this is probably not really useable if the marker chances often, e.g. changes some text.