[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.

[Matveeus]

Hi @josxha . I’m still encountering this “motion blur” issue when moving the map with custom markers. Have there been any updates or new approaches since your last comment? If you have any additional suggestions or guidance on how to address the delay and keep the markers in sync with the map, I’d greatly appreciate it. Thank you!

[josxha]

Hi @Matveeus, yes I can give you some updates. The current implementation relies on platform views for ios and android. Using this, the rendering of the map and flutter are not in sync and have some delay. Having synched rendering would require a better ffi access for the maplibre renderer. However, there are some possibilities to reduce the delay so that it becomes acceptable. For example https://flutter-maplibre.pages.dev/demo/#/widget-layer is pretty much as best as it could become.

This package currently recieves it's camera moves via a method channel from the android/ios SDK and updates the screen location of the flutter widgets that are displayed on top of the map. It is nowdays possible to use a combination of ffi and jni to interop with java/kotlin on android and ffi to interop with objective c on ios. This could bring some performance benefits itself for more expensive data as we don't have to serialize and deserialize it.

The biggest benefit is that ffi allows calling methods not asynchronous - theoretically. The current situation is that interop with java/kotlin and ffi to objective c is still experimental and there is last time I checked there was no reliable way to call from java/kotlin into dart.