Added tileBounds param to tile_layer to restrict tiles loaded.

[ibrierley]

Should be able to add a LatLngBounds param tileBounds, eg
tileBounds: LatLngBounds(LatLng(43,19), LatLng(48,27)), to the tile layer options to only load tiles within a restricted area.

[hpoul]

thanks, unfortunately it's not working for me - tiles are still requested.. but it seems it's somehow "delayed".. any idea how I can debug it?
I can't really make sense of the _getRestrictedPixelBounds method.. but I think that it's not calculating the correct bounds..

[ibrierley]

What bounds are you putting in there ? (and what area trying to restrict tiles to?)

[hpoul]

I'm using:

  final mapTileBounds = fm.LatLngBounds(
    ll.LatLng(39.153804, 2.140099),
    ll.LatLng(40.079265, 3.685447),
  );

fwiw, it's perfectly possible that i'm doing something wrong with my tiles as well.. although i've tried to add the same bounds to the OSM layer and the tiles are still rendering outside of those bounds.. 🤔

thanks,
Herbert

[ibrierley]

Strange, if I enter that, it restricts the tiles to the island of Palma. Let me re-checkout the PR, and check I haven't missing anything...

So out of interest, if you run it on an OSM layer (on its own, with no other layers), what happens...do all of the tiles load, or none at all....or you mentioned a delayed set of tiles...how how is that delay ? That may poke my brain into some thought.

[ibrierley]

Just tried it with a fresh checkout of that branch, and seems to work ok. So I think we need to try and debug what's happening with yours. It would be handy if you can have an example that doesn't work, just with the osm tile layer firstly.

Or maybe there's a basic misunderstanding what is being sought! Always a possibility. One thing that may be useful is to add a print statement to the URLs being called

[hpoul]

it is perfectly possible that i'm missing something obvious. I've created a simple example, just with one OSM map layer:
https://github.com/hpoul/flutter_map_tilebounds_example

You can also try it out in the browser right here: https://hpoul.github.io/flutter_map_tilebounds_example/

https://github.com/hpoul/flutter_map_tilebounds_example/blob/a5c514e4d534a03bda6e2bb3c20b790b19312853/lib/main.dart#L50-L63

At first glance it looks pretty good.. but as you scroll away from the bounds it keeps loading and loading.. and when you pan back you can see that it loaded far outside the bounds..

[ibrierley]

Yes, good spot, there's something weird going on (more noticable on web, better, but still not right on mobile), I think when part of tiles go offscreen or something...it seems to behave when in view.

Slightly weird, and sometimes you can end up with an L shape set of tiles, which doesn't really make sense with a bounds from 2 points, makes me wonder if something weird with keeping old tiles is happening, so I think that simpler approach may need to be scrapped, but I think there's some other approaches that could possibly work

[hpoul]

Shouldn't it work to do exactly the same as for the global map bounds and then simply add a second check for the current layer, instead of trying to restrict one bound? Although I don't quite understand what is necessary to conver the lat/lng into pixel bounds.. As far as I can see it happens in the getProjectedBounds(double zoom) method of Crs? 🤔

[ibrierley]

Yes, that's what I think I may have as a workaround (just testing atm), I was just trying to make it more efficient, so it didn't need to do 2 checks on every tile we don't need (i.e we know what tile range it will be, so theoretically we shouldn't have to, but there's a bit more going on with certain cases behind the scenes).

[ibrierley]

See if that's any better.

[hpoul]

Thanks a lot for your efforts.. it looks better, but somehow it is still requesting tiles outside of the bounds 🤔 I'll have to debug it further..

I underestimated how complicated this conversion between coordinates and tiles actually is..

[ibrierley]

Could you do a video like you did before ? (or do you mean its somehow requesting tiles that aren't in display or something).

Sometimes the videos give clues as to edge cases not thought about, so quite handy.

the conversion between coords->tiles shouldn't be "too" bad, but sometimes there's a few other bits that aren't obvious, like keepBuffer, keeping old tiles before loading new tiles etc. I don't think that should happen here, but I don't know the tile layers all that well these days, so possible I've missed something obvious.

It's normally fairly easy to debug if reproducable.

[ibrierley]

Or if you post an example of an out of bounds url you can an error for if its not displayed (eg if zoomed in too far), that may give an idea.

[hpoul]

Oh sorry, I somehow managed to use the wrong commit 🙄 it didn't pick up the changes.. i've restarted everything and it seems to work now! 🥳 no more 404 errors ;-)

[JaffaKetchup]

I'm not sure if I'm doing something wrong or expecting the wrong thing.
Adding tileBounds seems to work well on one layer. But if I have two layers, one with bounds, one without, it doesn't seem to work as I expect? If non-bounds is above the bounds layer, then only the bounds layer renders at all (within bounds). If bounds is above the non-bounds layer, then only the non-bounds layer renders at all (everywhere).

This is the code I used (I just replaced some code in the example) - swap them around to see what I said for non-bounds on bottom:

layers: [
  TileLayerOptions(
    urlTemplate: 'ANOTHER-TILE-SERVER', // no-one saw that
  ),
  TileLayerOptions(
    urlTemplate:'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
    subdomains: ['a', 'b', 'c'],
    tileBounds: LatLngBounds(
      LatLng(57.89710503488868, -13.470244761939078),
      LatLng(50.71793738973014, 2.692503665949016),
    ),
  ),
],

Maybe this is beyond the scope of this PR, or maybe I've done something wrong?

[ibrierley]

Yes, don't forget to set backgroundColor: Colors.transparent, on the upper layer. (Also maybe edit out your mapbox key from git, but maybe you don't care so much like me, I do that all the time :D)

[JaffaKetchup]

Ah I see. I had to add the transparent background colour to the bottom (bounded) layer instead of the top layer, however. I'll add it to the new docs at some point. Feel free to merge :).

(Thanks! I deleted the first comment and only kept the new revision.)

[ibrierley]

Sorry, yes, I meant top in terms of visual layer, as opposed to code layer.
Btw wonder if it may be worth us seeing if we can get a few approved testing/dev keys from whichever provider, like mapbox etc.
Thanks, for the testing.

[JaffaKetchup]

@ibrierley Maybe, I could make another account with Mapbox and get the 200,000 free tile requests per month. Maybe Thunderforest would work (they provide 150,000 free tile requests). I don't have to attach a billing account, so there's no risk apart from it just stopping working.

[nhtlquan]

Sorry, yes, I meant top in terms of visual layer, as opposed to code layer. Btw wonder if it may be worth us seeing if we can get a few approved testing/dev keys from whichever provider, like mapbox etc. Thanks, for the testing.

I Using:
tileBounds: LatLngBounds( LatLng(21.013510, 105.813113), LatLng(21.014912, 105.813800),),

But when I change zoom. My layer bounds error:

https://drive.google.com/file/d/1czeWCS_pLVFoYf9V-MnYrzbR1gPt0iAn/view?usp=sharing

@ibrierley can you help me!