question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Constrain bounds of TileLayer

See original GitHub issue

Would it be possible to add a property to the TileLayer that will constrain its bounds?

The lack of constraint poses a problem when accessing a tile server I have that serves individual rasters (small coverage, not global). The TileLayer continues to make requests from my tile server anytime I zoom out/view outside the data bounds, overloading my tile server which is just returning a bunch of transparent PNGs.

The logic I’m looking for:

t = TileLayer(
    url="https://mytileserver.com/tiles/{z}/{x}/{y}.png?projection=EPSG:3857",
    # Do not request tile outside of these bounds (bottom, top, left, right)
    bounds=[37.40679, 38.080379, -122.759396, -122.065103],
)

From what I can tell, the leaflet JS tileLayer does have an option for bounds that is inherited from gridLayer but this does not seem to be wrapped in ipyleaflet. Ref https://leafletjs.com/reference.html#tilelayer

Example data:

Screen Shot 2021-11-20 at 8 33 19 PM

Additional context:

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:9 (9 by maintainers)

github_iconTop GitHub Comments

1reaction
banesullivancommented, Dec 20, 2021

Aha! That’s awesome! I can confirm that ((south, west), (north, east)) works!

before after
Screen Shot 2021-12-20 at 9 42 28 AM Screen Shot 2021-12-20 at 9 42 18 AM

There’s a nifty “debug” tile server in localtileserver which is live here: https://tileserver.banesullivan.com/tiles/debug/{z}/{x}/{y}.png?sleep=0

from ipyleaflet import Map, TileLayer
from traitlets import Tuple

class BoundTileLayer(TileLayer):
    bounds = Tuple(default_value=None, allow_none=True).tag(sync=True, o=True)

b = (23.564991210892646,
 25.550873767434343,
 -78.95864996539397,
 -76.57492370013779)

t = BoundTileLayer(
    url='https://tileserver.banesullivan.com/tiles/debug/{z}/{x}/{y}.png?sleep=0',
    # Do not request tile outside of these bounds ((south, west), (north, east))
    bounds=((b[0],b[2]), (b[1], b[3])),
)

m = Map(center=[31.092678045970622, -73.68000268936159], zoom=4)
m.add_layer(t)
m
1reaction
davidbrochartcommented, Dec 20, 2021

Not quite, the bounds must be in the form:

((south, west), (north, east))

I’ll open a PR.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Constrained Extent - OpenLayers
This map has a view that is constrained in an extent. This is done using the extent view option. Please note that specifying...
Read more >
Manage hosted tile layers—ArcGIS Online Help | Documentation
Archive current content in a new layer. In this example scenario, you have a vector tile layer that stores service area boundaries. This...
Read more >
Leaflet - Prevent loading tiles outside of MaxBounds
To tell Leaflet that your Tile Layers does not have any tile to serve outside predefined bounds, simply use the bounds option.
Read more >
LeafletJS: Load Tile Layer based on bounding box
L.tileLayer does accept bounds parameter. I found it by digging into the code, but it is currently missing from the documentation.
Read more >
View bounds - React Leaflet
Click a rectangle to fit the map to its bounds. ... <MapContainer bounds={outerBounds} scrollWheelZoom={false}>. <TileLayer.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found