bounds parameter missing from TileLayerOptions

[atiqsamtia]

Leaflet Js does provide bounds parameter for the Tiles layers as well so that those layers are only loaded for a certain area. just like bounds on the full map but this applies to individual layers. It is very good for having multiple layers from different locations active. Like separate maps for each area.

DOCS:
https://leafletjs.com/reference.html#tilelayer-bounds

this implementation does not have this feature. Can you please provide this or guide me to implement it on my own?

[ibrierley]

Have you tried

MapOptions(
  bounds: LatLngBounds(LatLng(58.8, 6.1), LatLng(59, 6.2)),
  boundsOptions: FitBoundsOptions(padding: EdgeInsets.all(8.0)),
),

[atiqsamtia]

@ibrierley Yes, I've used this one. but this is for a full map. The missing one is for each layer.

So that if multiple layers are added on the map, unnecessary 404 tiles requests are not sent if map is moved out of specific layer bounds

leaflet JS supports this natively.

[github-actions]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.

[github-actions]

This issue was closed because it has been stalled for 5 days with no activity.

[hpoul]

Is there any workaround for this? I guess I could use a custom TileProvider which doesn't request tiles which are out of bounds? 🤔 I also have a custom map overlay which is only available for a certain region, and everything outside of that map i want OSM to be displayed.. Essentially everything works, except generating a ton of 404s :) so it would be nice to have a bounds for a single tile layer

[ibrierley]

Just trying to understand this a bit more...if the mapoptions has a bounds set, the tilelayer shouldn't request other tiles outside those bounds should it ? Or are you saying the tile provider is grabbing tiles out of the bounds area ?

Trying to be clear on the difference, and why the tileprovider is requesting unnecessary tiles...

[hpoul]

@ibrierley Not sure I understand, I think the MapOptions are for the whole FlutterMap, or can I set a different MapOptions for each layer? I have an OpenStreet Map tile layer as base map for the whole world, but want to have my own map tiles overlayed for a single county / region. So I have one TileLayerWidget with OSM for the whole world.. and my custom TileLayerWidget which should only be requested for a smaller bound. Does this make sense?

[ibrierley]

Yes, the bounds option is for a smaller region of the whole map, that you can't navigate over iirc...so I'm a bit unclear why one wants different bounds for different layers...I'm not saying there isn't a use case for it...just trying to understand what the difference in display and tile requests would be.

So you do mean you would for example display a layer of full openstreetmaps, with no bounds (so osm when navigating the USA), and then UK specific adapted tiles with bounds on the layer above when navigating the UK for example ?

[hpoul]

So you do mean you would for example display a layer of full openstreetmaps, with no bounds (so osm when navigating the USA), and then UK specific adapted tiles with bounds on the layer above when navigating the UK for example ?

Exactly, in my case we have our own branded, stylized version of a map highlighting specific routes. But I still want to allow the user to navigate outside of that region.

[ibrierley]

Makes it a bit clearer, and sounds like a good case for it, so I see no reason why it couldn't/shouldn't be an option.

Fastest way is probably to submit a PR (wondering if it would make sense of have a bounds check in the tile_layer.dart around lines 1002), otherwise someone else may have a bash, but not sure when exactly that would be. I'll reopen.

[atiqsamtia]

Another use-case for TileLayer specific bounds is when we have multiple layers for example One layer for London and One layer for Paris. when a user is in the Paris area, the London layer should not request tiles as it'll return a massive 404 and vice versa.

Leaflet has this built-in in JS version.

I wanted to send a PR but there is no documentation on how to add a new TileLayer and how the data is flowing, I tried but could not get the bounds.

I suggest creating a new BoundingTileLayer so that other users don't get affected and normal layers don't run the bonding calculation for each tile.

[hpoul]

wondering if it would make sense of have a bounds check in the tile_layer.dart around lines 1002

I guess this sounds reasonable.. currently _isValidTile just checks for globalBounds I guess it can't be hard to add a layerBounds or something. Maybe i'll give it a go when i've got time

[ibrierley]

Another use-case for TileLayer specific bounds is when we have multiple layers for example One layer for London and One layer for Paris. when a user is in the Paris area, the London layer should not request tiles as it'll return a massive 404 and vice versa.

Leaflet has this built-in in JS version.

I wanted to send a PR but there is no documentation on how to add a new TileLayer and how the data is flowing, I tried but could not get the bounds.

I suggest creating a new BoundingTileLayer so that other users don't get affected and normal layers don't run the bonding calculation for each tile.

I don't think we need a new tile_layer. I think a simple tileBounds option, and then around the lines mention, an if( tileBounds != null && tileOutsideBounds(blah)) { then skip } would prevent affecting others, and not do any extra calculations unless necessary (one could possibly check if the tileBounds are outside the mapBounds as well as an initial slight optimisation I guess to save having the check every tile if option is enabled).

[ibrierley]

Thinking about this a bit more...is it enough for just the tiles not to be loaded that are outside these bounds...or should it be a specific display thing ?
I'm guessing it may be easier to not include tiles outside of certain bounds, than needing a display and maybe needing new sized widgets or something to be added ?

[hpoul]

@ibrierley for my usecase it's just about the loading.. the current behavior from a user's point of view is already perfect, i just want to get rid of those 404s 😅

[ibrierley]

do you have a small example highlighting the problem to reproduce ?

…

On Friday, April 8, 2022, Herbert Poul ***@***.***> wrote: @ibrierley <https://github.com/ibrierley> for my usecase it's just about the loading.. the current behavior from a user's point of view is already perfect, i just want to get rid of those 404s 😅 — Reply to this email directly, view it on GitHub <#1137 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AA5YN5K6SY6YXZDMT5XP5QTVEBPX3ANCNFSM5MSU7XRQ> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[hpoul]

@ibrierley I'm not sure what's still unclear about the problem.. I can basically give you the real world example 😂

the second layer does not contain the whole world, but just a small region.. and I want it overlayed over the whole OSM. So it will trigger 404s when the user navigates to another region on the map.

   fm.FlutterMap(
      options: fm.MapOptions(
        center: ll.LatLng(39.81074507870429, 3.1154755243871137),
        zoom: 10.0,
        maxZoom: 15,
        onTap: (_, __) {
        },
      ),
      mapController: controller,
      children: [
        fm.TileLayerWidget(
          options: fm.TileLayerOptions(
            urlTemplate:
                nonNls('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'),
            subdomains: nonNls(['a', 'b', 'c']),
            tileProvider: const CachedTileProvider(),
            attributionBuilder: (_) {
              return nonNls(const Text('© OpenStreetMap contributors'));
            },
          ),
        ),
        fm.TileLayerWidget(
          options: fm.TileLayerOptions(
            opacity: 0.5,
            backgroundColor: Colors.transparent,
            urlTemplate: 'https://cdn.huerzeler.app/data/tilesoutmercator/{z}/{x}/{y}.png',
            maxZoom: 15,
            tileProvider: const CachedTileProvider(),
            tms: true,
          ),
        ),
        ),
      ],
  );

the CachedTileProvider is just using it's own cache manager..

class CachedTileProvider extends fm.TileProvider {
  const CachedTileProvider();
  @override
  ImageProvider getImage(fm.Coords<num> coords, fm.TileLayerOptions options) {
    return CachedNetworkImageProvider(
      getTileUrl(coords, options),
      //Now you can set options that determine how the image gets cached via whichever plugin you use.
      cacheManager: HbhCacheManager.mapTileInstance,
    );
  }
}

[ibrierley]

Sorry, I didn't mean it was unclear, I was just trying to figure a useful test, but realised I only needed one layer to test anyway....

I've created a PR #1212 give that a go, see if it does what you want before we consider merging it.

You can add tileBounds: LatLngBounds(LatLng(43,19), LatLng(48,27)), as an example for Romania

[github-actions]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.

[JaffaKetchup]

Closing, as fixed by #1212.