[BUG] TileLayer lag/jitter

[rorystephenson]

Describe The Bug
When doing animated panning in flutter web using the example app (Animated Mapcontroller page) the markers (and any other non tile layer) seem to jitter against the map tiles.

Expected Behavior
The markers and other non tile layers should move together with the tile layer.

Screenshots & Recordings

flutter-map-panning-jitter.mp4

Additional Information
In the example I slowed the animation to 5 seconds to make the issue more obvious. I have not observed this issue when running the example on the Android emulator, only with flutter web on chrome. This is encountered both using the latest published version of flutter_map as well as master. Flutter version 2.10.5.

When I run in release mode the effect is more subtle but there is still jittering. In any case the movement of the markers and the map tiles should be synchronised so that any jitter/jank should affect them together.

---

Doctors Report

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 2.10.5, on macOS 11.5.2 20G95 darwin-x64, locale en-GB)
[✓] Android toolchain - develop for Android devices (Android SDK version 32.1.0-rc1)
[✓] Xcode - develop for iOS and macOS (Xcode 13.2.1)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2021.1)
[✓] VS Code (version 1.65.0)
[✓] Connected device (2 available)
[✓] HTTP Host Availability

To Reproduce
Steps to reproduce the behavior:

1. Edit the example app to slow the animation of the Animated Mapcontroller page movement to 5 seconds.
2. Run the example app with flutter web and go to the animated mapcontroller page.
3. Click the different location buttons and observe the jitter during panning.

---

Severity
This will help us to label the issue quicker and decide what needs attention first. Only choose fatal if the entire app crashes, otherwise choose non-fatal.

• Non-Fatal
• Fatal / App Crashes

Frequency/Rarity
This will help us to label the issue quicker and decide what needs attention first.

• Once
• Uncommon
• Common
• Always

Applicable Platforms
Only select those that you've tested on - one or more. If possible, test on a variety of platforms.

• Android
• iOS
• Web
• Windows
• Others (beta platforms)

[JaffaKetchup]

Hi @rorystephenson,

I've seen this problem before, even on Android emulators in debug mode.
I think it's probably something to do with the slow calculations used in positioning the markers. In release mode, everything runs faster, so these are quicker. In my experience, Android emulators have limited processing power due to the virtualisation factor, and maybe it's similar with the limitations in JavaScript.

To confirm this, does it happen on without any map controller magic?
Thanks for the report!

[ibrierley]

I don't get a problem on this for the Animated Controller example (in release or debug mode), is this on a very old device ? Are you using the latest from Git ?

Try a, flutter pub deps | grep flutter_map and check it says 0.15.0.

I'd be surprised if its related to slow calculations, there's only 3 markers there.

[ibrierley]

Out of interest, I've created a webspace where I can publish the web stuff to, I'm going to try and have one for each version (happy to be added to the docs if wanted). Example..

https://fluttermap.dabbles.info/v0.15/#map_controller_animated (base at https://fluttermap.dabbles.info/v0.15/ )

For me, when I drag, I don't have a problem, however I do note if I click on Paris, then Dublin etc, it's almost as if the Markers move ahead and back as part of the animation (but again, doesn't if you drag them).

[rorystephenson]

I just updated the description to clarify that I slowed down the animation to 5 seconds as it makes the jitter more obvious.

However even when it's not slowed down there is the weird affect where markers don't seem to move in sync with the map as you mentioned @ibrierley. I'm guessing the same root cause is responsible for the jitteriness as well as the markers seeming to move ahead and back again.

To confirm I have no issues when dragging.

Also I can confirm that I'm trying this on v0.15.0.

EDIT: I've just noticed that the glitch where markers move out of sync with the map occurs when flinging the map but not when dragging it.

[JaffaKetchup]

In that case, I'm likely wrong. Oops!

[ibrierley]

I suspect this one will be quite tough to fix, so any inspiration welcome.

If you add another layer in, like a polyline layer, I note that both that and the markers move in sync, but the tiles don't. So it "feels" like the tile layer is lagging behind, however the tile layer is a bit of an unweildly beast these days.

[rorystephenson]

I suspect this one will be quite tough to fix, so any inspiration welcome.

Agreed. I'm going to keep digging.

If you add another layer in, like a polyline layer, I note that both that and the markers move in sync, but the tiles don't. So it "feels" like the tile layer is lagging behind, however the tile layer is a bit of an unweildly beast these days.

That's a great point. I think this combined with the fact that the lagging/jittering doesn't seem to happen when dragging are the big clues.

[rorystephenson]

I've just been playing around with the tile layer code and I had a suspicion that its unusual way of listening to the movement stream and then calling setState when necessary was causing the lag. I have hacked up a local version which uses StreamBuilder like all of the other layers seem to do and I moved the _handleMove code in to the StreamBuilder and this change has removed the lag 🎉 .

In the following video I am using the usual tile layer and you can see the lag when flinging the map. Then I change to my modified version of AnimatedMapController which is using the hacked up tile layer with a StreamBuilder and there is no longer lag.

fixed-tile-layer.mp4

So the method of listening to the movement stream and then calling setState seems to be the cause of the problem. I can imagine that flutter performs the build caused by the setState call in the next frame (or something similar, I'm not extremely well versed in flutter's building/rendering semantics) which makes the tile layer lag. Even if I set the updateInterval to 0 the issue persists.

I'm not very familiar with the TileLayer code but it seems to listen to the movement stream and only call setState when it deems necessary to avoid loading too many tiles (e.g. if you fling the map fast we wouldn't want to download/load all of the tiles you fling past). Perhaps we need to reconsider this pattern. The first thing that comes to mind is having a delay on the actual downloading/loading of the tile whilst not having that delay on the rebuilding of the displayed tiles. Does anyone else have other ideas on alternatives. Obviously we don't want to impact the performance of the TileLayer with this changes.

[ibrierley]

Great digging! I suspected it was something like that, just hadn't had chance (or didn't want to :D), dig into the tile layer code.

So I guess one question is, are there are any obvious negatives of using the typical Streambuilder method...why is the tile layer using a listen....

I'm a little confused about the fast map fling thingy though (I understand the concept of not wanting to download tiles passed through fast)...if the map is flung fast, and there's a stream listening...wouldn't it still have to reposition tiles, so I'm unsure how the method prevents tile loads....that's me probably not having dug through the code though ? Or is it more that the stream may mean it doesn't hitch so much or something ?