Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Tiles are not loading on the edges of the map #517

Closed
ristiisa opened this issue Feb 10, 2020 · 11 comments · Fixed by #572
Closed

Tiles are not loading on the edges of the map #517

ristiisa opened this issue Feb 10, 2020 · 11 comments · Fixed by #572

Comments

@ristiisa
Copy link

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
Copy link
Contributor

I'm also having this problem:
imagem

@ibrierley
Copy link
Collaborator

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
Copy link
Collaborator

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
Copy link
Author

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
Copy link
Collaborator

ibrierley commented Feb 18, 2020 via email

@ristiisa
Copy link
Author

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

@ibrierley
Copy link
Collaborator

ibrierley commented Feb 18, 2020 via email

@ibrierley
Copy link
Collaborator

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
Copy link
Collaborator

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
Copy link
Collaborator

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
Copy link
Collaborator

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

@ibrierley ibrierley mentioned this issue Feb 21, 2020
Closed
@maRci002 maRci002 mentioned this issue Apr 4, 2020
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
3 participants
@porfirioribeiro @ristiisa @ibrierley