Tiles are not loading on the edges of the map

[ristiisa]

I'm having an issue where the tiles on the edges of the map are not loading after the map is moved.

Steps to reproduce:

1. run the example project
2. zoom into the map until street level
3. pan the map slowly until unloaded tiles appear and stop
4. the unloaded tiles will not finish loading

Any ideas on how to solve this?

Might be related to #463

I tested this with:
note8:
Flutter (Channel master, v1.15.3-pre.37, on Microsoft Windows [Version 10.0.18362.86], locale et-EE)
Android SDK version 29.0.2

iphone 6s:
Flutter (Channel master, v1.14.4-pre.28, on Mac OS X 10.14.6 18G103, locale en-EE)
Xcode - develop for iOS and macOS (Xcode 11.3.1)

[porfirioribeiro]

I'm also having this problem:

[ibrierley]

Regarding the original problem, it generally works for me (I'm not saying that there isn't a problem, just I can't reproduce it atm)

Sometimes I get a tile rejection...eg

════════ (2) Exception caught by image resource service ════════════════════════════════════════════
HTTP request failed, statusCode: 404, https://a.tile.openstreetmap.org/18/130494/85278.png

But I that's the tile server, as opposed to flutter_map (even though that tile exists, maybe the tile server has restrictions or something?).

It would be good to specify if there are any errors in the console when testing it in case.

Are there any other ways you can recreate the problem, as it may depend on network etc ?

[ibrierley]

Ristiisa, I'm just experimenting with some updates on tile_layer.dart if you wanted to test and give feedback at #79 (comment) this may improve the problem, but I couldn't replicate the original

[ristiisa]

Ristiisa, I'm just experimenting with some updates on tile_layer.dart if you wanted to test and give feedback at #79 (comment) this may improve the problem, but I couldn't replicate the original

Here is the video showing how to reproduce the issue:
https://imgur.com/a/AeNAfX9

commit: 447e464

There were a lot of 404 while panning the map...

...
2020-02-18 10:45:24.860 30926-31000/me.jpryan.example I/flutter: Image not loaded, error: HTTP request failed, statusCode: 404, https://c.tile.openstreetmap.org/21/1192720/615661.png
2020-02-18 10:45:24.860 30926-31000/me.jpryan.example I/flutter: Image not loaded, error: HTTP request failed, statusCode: 404, https://b.tile.openstreetmap.org/21/1192719/615664.png
2020-02-18 10:45:24.860 30926-31000/me.jpryan.example I/flutter: Image not loaded, error: HTTP request failed, statusCode: 404, https://c.tile.openstreetmap.org/21/1192719/615665.png
2020-02-18 10:45:24.860 30926-31000/me.jpryan.example I/flutter: Image not loaded, error: HTTP request failed, statusCode: 404, https://b.tile.openstreetmap.org/21/1192720/615660.png
2020-02-18 10:45:24.860 30926-31000/me.jpryan.example I/flutter: Image not loaded, error: HTTP request failed, statusCode: 404, https://c.tile.openstreetmap.org/21/1192717/615661.png
2020-02-18 10:45:24.860 30926-31000/me.jpryan.example I/flutter: Image not loaded, error: HTTP request failed, statusCode: 404, https://a.tile.openstreetmap.org/21/1192717/615665.png
2020-02-18 10:45:24.861 30926-31000/me.jpryan.example I/flutter: Image not loaded, error: HTTP request failed, statusCode: 404, https://b.tile.openstreetmap.org/21/1192717/615660.png
2020-02-18 10:45:24.861 30926-31000/me.jpryan.example I/flutter: Image not loaded, error: HTTP request failed, statusCode: 404, https://a.tile.openstreetmap.org/21/1192716/615660.png
2020-02-18 10:45:24.861 30926-31000/me.jpryan.example I/flutter: Image not loaded, error: HTTP request failed, statusCode: 404, https://c.tile.openstreetmap.org/21/1192716/615665.png
2020-02-18 10:45:24.861 30926-31000/me.jpryan.example I/flutter: Image not loaded, error: HTTP request failed, statusCode: 404, https://b.tile.openstreetmap.org/21/1192716/615664.png
2020-02-18 10:45:24.861 30926-31000/me.jpryan.example I/flutter: Image not loaded, error: HTTP request failed, statusCode: 404, https://a.tile.openstreetmap.org/21/1192716/615663.png
2020-02-18 10:45:24.861 30926-31000/me.jpryan.example I/flutter: Image not loaded, error: HTTP request failed, statusCode: 404, https://c.tile.openstreetmap.org/21/1192716/615662.png
2020-02-18 10:45:24.861 30926-31000/me.jpryan.example I/flutter: Image not loaded, error: HTTP request failed, statusCode: 404, https://b.tile.openstreetmap.org/21/1192716/615661.png
2020-02-18 10:45:24.861 30926-31000/me.jpryan.example I/flutter: Image not loaded, error: HTTP request failed, statusCode: 404, https://b.tile.openstreetmap.org/21/1192721/615665.png
2020-02-18 10:45:24.861 30926-31000/me.jpryan.example I/flutter: Image not loaded, error: HTTP request failed, statusCode: 404, https://c.tile.openstreetmap.org/21/1192721/615660.png

[ibrierley]

Hi, I don't think openstreetmap supports zooms at level 21..so if using that, I would set your maxZoom to be 20 in the options. So I suspect what happens there, is that you are zooming too far, it's trying to do the right thing by using backup tiles one step back, but when there are no backup tiles existing, it will fail. Can you try setting maxZoom to be 20 and see if you still get those errors ? Kind regards, Ian

…

On Tue, Feb 18, 2020 at 8:54 AM ristiisa ***@***.***> wrote: Ristiisa, I'm just experimenting with some updates on tile_layer.dart if you wanted to test and give feedback at #79 (comment) <#79 (comment)> this may improve the problem, but I couldn't replicate the original Here is the video showing how to reproduce the issue: https://imgur.com/a/AeNAfX9 commit: 447e464 <447e464> There were a lot of 404 while panning the map... ... 2020-02-18 10:45:24.860 30926-31000/me.jpryan.example I/flutter: Image not loaded, error: HTTP request failed, statusCode: 404, https://c.tile.openstreetmap.org/21/1192720/615661.png 2020-02-18 10:45:24.860 30926-31000/me.jpryan.example I/flutter: Image not loaded, error: HTTP request failed, statusCode: 404, https://b.tile.openstreetmap.org/21/1192719/615664.png 2020-02-18 10:45:24.860 30926-31000/me.jpryan.example I/flutter: Image not loaded, error: HTTP request failed, statusCode: 404, https://c.tile.openstreetmap.org/21/1192719/615665.png 2020-02-18 10:45:24.860 30926-31000/me.jpryan.example I/flutter: Image not loaded, error: HTTP request failed, statusCode: 404, https://b.tile.openstreetmap.org/21/1192720/615660.png 2020-02-18 10:45:24.860 30926-31000/me.jpryan.example I/flutter: Image not loaded, error: HTTP request failed, statusCode: 404, https://c.tile.openstreetmap.org/21/1192717/615661.png 2020-02-18 10:45:24.860 30926-31000/me.jpryan.example I/flutter: Image not loaded, error: HTTP request failed, statusCode: 404, https://a.tile.openstreetmap.org/21/1192717/615665.png 2020-02-18 10:45:24.861 30926-31000/me.jpryan.example I/flutter: Image not loaded, error: HTTP request failed, statusCode: 404, https://b.tile.openstreetmap.org/21/1192717/615660.png 2020-02-18 10:45:24.861 30926-31000/me.jpryan.example I/flutter: Image not loaded, error: HTTP request failed, statusCode: 404, https://a.tile.openstreetmap.org/21/1192716/615660.png 2020-02-18 10:45:24.861 30926-31000/me.jpryan.example I/flutter: Image not loaded, error: HTTP request failed, statusCode: 404, https://c.tile.openstreetmap.org/21/1192716/615665.png 2020-02-18 10:45:24.861 30926-31000/me.jpryan.example I/flutter: Image not loaded, error: HTTP request failed, statusCode: 404, https://b.tile.openstreetmap.org/21/1192716/615664.png 2020-02-18 10:45:24.861 30926-31000/me.jpryan.example I/flutter: Image not loaded, error: HTTP request failed, statusCode: 404, https://a.tile.openstreetmap.org/21/1192716/615663.png 2020-02-18 10:45:24.861 30926-31000/me.jpryan.example I/flutter: Image not loaded, error: HTTP request failed, statusCode: 404, https://c.tile.openstreetmap.org/21/1192716/615662.png 2020-02-18 10:45:24.861 30926-31000/me.jpryan.example I/flutter: Image not loaded, error: HTTP request failed, statusCode: 404, https://b.tile.openstreetmap.org/21/1192716/615661.png 2020-02-18 10:45:24.861 30926-31000/me.jpryan.example I/flutter: Image not loaded, error: HTTP request failed, statusCode: 404, https://b.tile.openstreetmap.org/21/1192721/615665.png 2020-02-18 10:45:24.861 30926-31000/me.jpryan.example I/flutter: Image not loaded, error: HTTP request failed, statusCode: 404, https://c.tile.openstreetmap.org/21/1192721/615660.png — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#517>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AA5YN5JWYJM4ATVMOB2736TRDOO4NANCNFSM4KSKUNEQ> .

[ristiisa]

I set the maxZoom to 17 and the errors no longer appeared.

Some times some tiles take a 10+ sec to load (no errors) but that might be connectivity issue?

[ibrierley]

Yes, I think what it's doing there, is it's using a spare backup tile which otherwise would be grey/missing (so it's a really zoomed out tile used as backup in this case). It could be preferred to not use a backup tile with more than a zoom difference of 2 or something as a tweak. Ian

…

On Tue, Feb 18, 2020 at 10:23 AM ristiisa ***@***.***> wrote: I set the maxZoom to 17 and the errors no longer appeared. Some times some tiles take a 10+ sec to load (no errors) but that might be connectivity issue? [image: image] <https://user-images.githubusercontent.com/514571/74726563-5c6d2080-5248-11ea-93a3-993dea666904.png> — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#517>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AA5YN5KZQ55LTR4HWPENWDDRDOZJDANCNFSM4KSKUNEQ> .

[ibrierley]

Just a note in case anyone looks at this. I think there is some oddity in the original code. If I force a move to LatLng(-21.831126, 18.419449) zoom 13.623521933239402 I get the edge tile missing problem.
It feels like the bounds that are calculated slightly too small, and can be fudged to make it work, but it would be good to get the actual problem isolated first I think.

[ibrierley]

Just did a little more testing...if I edit maps.dart, MapStateModel with

initMapController() {
    _mapController = MapController();

    imageCache.clear();

    List moves = [
      [51.578054, 0.082491, 9.9103288366806743, 3, ""],
      [51.578054, 0.082491, 9.8103288366806743, 4, ""],
      [51.578054, 0.082491, 9.7103288366806743, 5, ""],
      [51.578054, 0.082491, 9.6103288366806743, 6, ""],
      [51.578054, 0.082491, 9.5103288366806743, 7, ""],
      [51.578054, 0.082491, 9.4903288366806743, 8, ""],
      [51.578054, 0.082491, 9.3903288366806743, 9, ""],
      [51.578054, 0.082491, 9.2903288366806743, 10, ""],
      [51.578054, 0.082491, 9.1903288366806743, 11, ""],
      [51.578054, 0.082491, 9.0903288366806743, 12, ""],
      [51.578054, 0.082491, 8.9003288366806743, 13, ""],
      [51.578054, 0.082491, 8.8903288366806743, 14, ""],
      [51.578054, 0.082491, 8.7903288366806743, 15, ""],
      [51.578054, 0.082491, 8.6903288366806743, 16, ""],
      [51.578054, 0.082491, 8.5903288366806743, 17, ""],
      [51.578054, 0.082491, 8.4903288366806743, 18, ""],
      [51.578054, 0.082491, 8.3903288366806743, 9, ""],
    ];

    moves.forEach((val) {
      Future.delayed(Duration(seconds: val[3]), () {
        if (val[4] == "+") {
          _mapController.move(LatLng(mapController.center.latitude + val[0],
              mapController.center.longitude + val[1]), val[2]);
        } else 
          _mapController.move(LatLng(val[0], val[1]), val[2]);
        }
      });
    });

I'm wondering if it's taking some incorrect bounding boxes into account or something (is it coincidence it seems to be worse when it passes a zoom of 9.5, that may just be when it loads a new tile in anyway so maybe a redherring).

(Depending if you have any extra layout and maybe mobile size it may vary when you see the specific problem ?)

[ibrierley]

I may have tracked this down, there is this bit of code...in map.dart

Bounds getPixelBounds(double zoom) {
    var mapZoom = zoom;
    var scale = getZoomScale(mapZoom, zoom);
    var pixelCenter = project(center, zoom).floor();
    var halfSize = size / (scale * 2);
    return Bounds(pixelCenter - halfSize, pixelCenter + halfSize);
  }

Which doesn't make sense to say var scale = getZoomScale(mapZoom, zoom); so I think it should be...

var mapZoom = this.zoom; // instead of var mapZoom = zoom.

Subtle but important difference, as otherwise scale is always 1.

I'm busy the next few days I think, but I'll try and get chance to test this more after that.

[ibrierley]

I've created a pull request at #525 to fix/track this.