[BUG] Windows - Panning with MOUSE results in mostly choppy/jittery behavior

[corepuncher]

What is the bug?

"Most" of the time, dragging the map with my mouse in Windows results in less-than-optimal panning smoothness.

HOWEVER, map FLING is perfectly smooth. So is programmatically moving.

So it seems to be tied to something listening or reacting to mouse pointer events. I have commented out any auxiliary code of that type from my own code, no change.

How can we reproduce it?

Not sure what aspect is causing this, but I have tilelayer widgets with and without debounce (just in case that is related).

But just build a windows version and see if fling is noticeably smoother than constant drag.
Most noticeable when panning for a long distance. I have a large/wide screen, so make your map window size at least 1920 wide.

Do you have a potential solution?

Assuming the jittery map pan is due to excessive CPU usage, I performed two tests.

1. Panning for about 40 seconds via constant FLING back and forth.
2. Panning for a little longer while holding down the mouse and moving around.

I am attaching a cpu recording, sorted by Self Time. The two tests are clearly marked.

Flinging Map (Smooth)

Panning with mouse (Jittery)

As you can see in the jittery test, several flutter_map items are clustered toward the top.

Note: I had data updates turned off (a few tiles probably downloaded here and there), and I had overlays off as well.

Perhaps there are unnecessary setStates occurring after the pointer down event and before releasing? Again, fling is very smooth for the same map "movement". Hope that helps.

Platforms

Windows 11

Severity

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

[JaffaKetchup]

Can you see if you can reproduce this with the example app? There's an executable artefact attached to the latest CI/CD run.

[corepuncher]

Can you see if you can reproduce this with the example app? There's an executable artefact attached to the latest CI/CD run.

I do not observe the same jittery behavior when panning the map. It's very smooth...are those tiles being downloaded or are they on-disk?

I did however, sometimes have blank tiles:

Also, your keyboard arrow panning is much nicer than mine. When I hold my key down, it only pans a short distance, I have to tap the arrow over and over to keep panning.

How do you do that (continuous pan)?

I roughly do this for windows:

  @override
  Widget build(BuildContext context) {
  ...
    // Primary Content
    Widget content = OrientationBuilder(
      builder: (context, orientation) {
         FlutterMap(
             mapController: animatedMapController.mapController,
             options: MapOptions(
             initialCenter: mapState.center,
             initialZoom: mapState.zoom,
             minZoom: !isLandscape ? 5.0 : mapState.minZoom,
             maxZoom: mapState.maxZoom,
             interactionOptions: mapGesturesEnabled
             ? const InteractionOptions(
               flags: InteractiveFlag.pinchZoom |
               InteractiveFlag.pinchMove |
               InteractiveFlag.drag |
               InteractiveFlag.flingAnimation |
               InteractiveFlag.doubleTapZoom,
               )   : const InteractionOptions(flags: InteractiveFlag.none),
           ....
   );   // orientation builder

return Shortcuts(
        shortcuts: isSearchBarVisible ? {} : shortcuts,
        child: Actions(
          actions: {
            MoveUpIntent: CallbackAction<MoveUpIntent>(
              onInvoke: (intent) {
                if (shouldEnableShortcuts(context, settings)) {
                  mapState.move(LatLng(centerPosition.latitude + 1.0, centerPosition.longitude), mapState.zoom);
                }
                _startOrExtendArrowPanning();
                return null;
              },
            ),
            MoveDownIntent: CallbackAction<MoveDownIntent>(
              onInvoke: (intent) {
                if (shouldEnableShortcuts(context, settings)) {
                  mapState.move(LatLng(centerPosition.latitude - 1.0, centerPosition.longitude), mapState.zoom);
                }
                _startOrExtendArrowPanning();
                return null;
              },
            ),
            MoveLeftIntent: CallbackAction<MoveLeftIntent>(
              onInvoke: (intent) {
                if (shouldEnableShortcuts(context, settings)) {
                  mapState.move(LatLng(centerPosition.latitude, centerPosition.longitude - 1.0), mapState.zoom);
                }
                _startOrExtendArrowPanning();
                return null;
              },
            ),
            MoveRightIntent: CallbackAction<MoveRightIntent>(
              onInvoke: (intent) {
                if (shouldEnableShortcuts(context, settings)) {
                  mapState.move(LatLng(centerPosition.latitude, centerPosition.longitude + 1.0), mapState.zoom);
                }
                _startOrExtendArrowPanning();
                return null;
              },
            ),
        },
          child: content,
       ),
 );


final shortcuts = {
    // Map Panning
    LogicalKeySet(LogicalKeyboardKey.arrowUp): MoveUpIntent(),
    LogicalKeySet(LogicalKeyboardKey.arrowDown): MoveDownIntent(),
    LogicalKeySet(LogicalKeyboardKey.arrowLeft): MoveLeftIntent(),
    LogicalKeySet(LogicalKeyboardKey.arrowRight): MoveRightIntent(),
    LogicalKeySet(LogicalKeyboardKey.keyC): CenterMapIntent(),
  };

Also during my testing, I commented out EVERYTHING inside onPositionChanged just to rule that out.

[JaffaKetchup]

The tiles are being downloaded as normal. Only in the offline page are the tiles in the assets.

I'm not sure why you're missing some tiles, I rarely get that. Check the network tab in Chrome DevTools to see if the requests are failing.

I assume you've found an executable from #1987 then, as that's what adds keyboard control. You can review the PR to see exactly how it works, but essentially I break each direction into two components, a curved animation, and a linear animation which is repeated indefinitely. Then it's just linking those together and triggering them as necessary using the callbacks from a Focus widget. Quite happy with how it turned out, as I could not find another example of a similar effect being done anywhere else in Flutter/community.

I'm going to close this for now, as its not reproducible in a simple environement. Although it is interesting that the issue seems to stem from the coordinates resolver and a particular method on the tile layer. Why it would differ so much between platforms I'm not sure.

I could see it being caused by the size of the map instead of the platform. If you resize your window for your app to take it smaller, does it get more performant?

[corepuncher]

No change in behavior for even a tiny screen size (Windows).

It's almost as if the "grabbing" point with the mouse cursor is being miscalculated as the mouse changes position. For instance, if I grab and pan horizontally, and center my gaze on the cursor, I can see the map jump left or right relative to the cursor, every so often. Theoretically the map should not move relative to the cursor at all while panning.

That again occurs in your test app, and my app. Focus on the cursor as you pan horizontally, and see if your cursor stays still relative to the map or jiggles. Is it just my PC?

Last, I may be misguided on how your keyboard panning is implemented. Is there a built-in flag similar to interactive flags , I thought I read it was "enabled by default" ?

If I comment out my own code here:

    LogicalKeySet(LogicalKeyboardKey.arrowUp): MoveUpIntent(),
    LogicalKeySet(LogicalKeyboardKey.arrowDown): MoveDownIntent(),
    LogicalKeySet(LogicalKeyboardKey.arrowLeft): MoveLeftIntent(),
    LogicalKeySet(LogicalKeyboardKey.arrowRight): MoveRightIntent(),

...

   return Shortcuts(
        shortcuts: isSearchBarVisible ? {} : shortcuts,
        child: Actions(
          actions: {
            /////////////////////// Map movement intents ///////////////////////
            MoveUpIntent: CallbackAction<MoveUpIntent>(
              onInvoke: (intent) {
                if (shouldEnableShortcuts(context, settings)) {
                  mapState.move(LatLng(centerPosition.latitude + 1.0, centerPosition.longitude), mapState.zoom);
                }
                _startOrExtendArrowPanning();
                return null;
              },
            ),
            MoveDownIntent: CallbackAction<MoveDownIntent>(
              onInvoke: (intent) {
                if (shouldEnableShortcuts(context, settings)) {
                  mapState.move(LatLng(centerPosition.latitude - 1.0, centerPosition.longitude), mapState.zoom);
                }
                _startOrExtendArrowPanning();
                return null;
              },
            ),
            MoveLeftIntent: CallbackAction<MoveLeftIntent>(
              onInvoke: (intent) {
                if (shouldEnableShortcuts(context, settings)) {
                  mapState.move(LatLng(centerPosition.latitude, centerPosition.longitude - 1.0), mapState.zoom);
                }
                _startOrExtendArrowPanning();
                return null;
              },
            ),
            MoveRightIntent: CallbackAction<MoveRightIntent>(
              onInvoke: (intent) {
                if (shouldEnableShortcuts(context, settings)) {
                  mapState.move(LatLng(centerPosition.latitude, centerPosition.longitude + 1.0), mapState.zoom);
                }
                _startOrExtendArrowPanning();
                return null;
              },
            ),

And then I rebuild, the arrow keys do not seem to pan by default. I thought maybe i was overriding a built in mechanism but maybe not?

I want dat smooth buttah