[BUG] fitBounds doesn't cause new tiles to load

[billyz313]

What is the bug?

When I use the .fitBounds method the map moves to the correct location, however the tiles which are supposed to be displayed on the map do not load. If I slightly pan or zoom the map the tiles show up. This happens in the web version when running thru the Chrome browser. It works fine in the android version. You can see it happening in the image below.

How can we reproduce it?

I removed the small bit of code from the search and hard coded the values so the code to reproduce can be as simple as

widget.controller.fitBounds(LatLngBounds(
                      LatLng(46.3471572, 0.0527585),
                      LatLng(48.9410263, 3.1286392)));

I work around it by programmatically moving the map directly after the fitBounds and it works, but I feel like it should be able to just fitBounds to show the tiles.

Do you have a potential solution?

No response

Platforms

Windows, visual studio code, Chrome(web-javascript), debug

Severity

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

[JaffaKetchup]

Hi @billyz313,

Thanks for the report. This is strange that it only affects certain platforms.
Can you please confirm your flutter_map version?

If you have the spare time, please try depending on #1551, as that may or may not solve this issue. A pubspec.yaml snippet to do this is:

dependency_overrides:
    flutter_map:
        git:
            url: https://github.com/rorystephenson/flutter_map.git
            ref: flutter-map-state-refactor

[billyz313]

My pleasure, I also found it strange.

In my pubspec i currently have flutter_map: ^4.0.0.

Unfortunately I can't use the flutter_map in the repo because I am using flutter_map_dragmarker and flutter_map_line_editor which throw a bunch of errors all seeming to lead back to stuff like "The getter 'FlutterMapState' isn't defined for the class 'DragMarkers'." So I assume those just are not ready for the new version...

Also, I did just update flutter_map: ^5.0.0. and removed the extra move to see if it works, but the same issues is present, so I added it back in for now.

[ibrierley]

line_editor and dragmarker are published for v5 already.

[billyz313]

@ibrierley Thank you, I do have the updated ones for v5, however they seem to not work with the dependency_overrides suggestion from above

dependency_overrides:
    flutter_map:
        git:
            url: https://github.com/rorystephenson/flutter_map.git
            ref: flutter-map-state-refactor

[ozkayas]

I am facing the same issue on flutter web. Tiles are loaded at first, then after getting positions and fitBounds is called, tiles disappear.
flutter_map: 5.0.0
flutter : 3.10.6
Not sure what triggered this issue.

mapProblem.mp4

[billyz313]

@ozkayas I have worked around the issue by adding a move after the fitBounds. The move actually does not move at all, I pass it the same lat, lon, and zoom, but it refreshes the tiles. This of course is not the fix for the bug, but it is a workaround until a fix is introduced. One caveat I guess is that I have both the bounding box and the center lat, lon. I reckon using widget.controller.center.latitude and widget.controller.center.longitude will also give the same results.
Here is my code:

widget.controller.fitBounds(bounds);
widget.controller.move(
    LatLng(double.parse(result["lat"]),
        double.parse(result['lon'])),
    widget.controller.zoom);

[shahpasandar]

I have the same issue on Android/iOS versions of my app with flutter_map: ^5.0.0.

Flutter 3.10.5 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 796c8ef792 (7 weeks ago) • 2023-06-13 15:51:02 -0700
Engine • revision 45f6e00911
Tools • Dart 3.0.5 • DevTools 2.23.1

[JaffaKetchup]

Although I have not yet gotten around to reproducing this, with the extra reports in this comments thread and the report at #1601, I'm marking this as P1 Important.

It appears as though this issue affects more platforms than just web, so it's unclear why OP could only reproduce on web.

[sikandernoori]

How can we reproduce this on IOS?

Run example app go to Animated MapController page, zoom in a bit then click Fit Bounds button on screen.

RPReplay_Final1690914412.mov

[slawekkrol]

Temporarily solution for that (version v5.0.0) until fix:

_mapController
  ..fitBounds(
      LatLngBounds(
        const LatLng(46.3471572, 0.0527585),
        const LatLng(48.9410263, 3.1286392),
      ),
      options: FitBoundsOptions(
        padding: EdgeInsets.only(top: 40),
      ))
  ..move(_mapController.center, _mapController.zoom + 0.00001);

[afrish]

This is a critical defect that totally prevents us from using fitBounds() method on iOS and Android

[JaffaKetchup]

@afrish Please see the workaround above for now. Call move with a tiny change in the zoom level - it won't be noticable, but it will cause tiles to load.

[afrish]

@afrish Please see the workaround above for now. Call move with a tiny change in the zoom level - it won't be noticable, but it will cause tiles to load.

Ok, thank you, I will try this. I would be glad to help fixing this, but I have too little knowledge in the library internals...

[JaffaKetchup]

This is fixed in #1626.

I'm not sure exactly why the event source being fitCamera does not cause tiles to refresh, but mapController does. Note that in v6, this method is deprecated in favour of fitCamera, which is more flexible.

[stevenv-synap]

@JaffaKetchup Thanks so much for your hard work. Just came to have a look around for some guidance, and ended up seeing a solution has already been submitted for merging. Much appreciated! <3