Prevent tiles outside of polygon from loading

Question

Is there a way to prevent tiles from loading that are outside of a polygon? The closest example of this I found is here

http://jsfiddle.net/LsvDk/23/

Answer 1

If my understanding is correct, you do not like the example you mention because it uses a vector shape (polygon) to hide the tiles, but Leaflet has to re-render the shape when panning / zooming, which makes the background tiles temporarily appear?

---

EDIT:

Please have a try with TileLayer.BoundaryCanvas plugin. Instead of using a vector shape as mask, it combines tiles and its mask into a canvas. Hence the mask becomes a raster image, which avoids Leaflet behaviour of vector shape re-rendering at each pan / zoom, but instead keeps previous tiles (combined with mask in this case) until new ones are received.

Allows you to draw tile layers with arbitrary polygonal boundary. HTML5 Canvas is used for rendering.

The mask is specified as a GeoJSON shape, so it should be as easy to set up as in your example.

---

Remaining of original answer:

You would probably be interested in the bounds option of Tile Layer, to prevent any displaying of tiles outside a specified area.

When this option is set, the TileLayer only loads tiles that are in the given geographical bounds.

However, if your visible area does not perfectly fit with tiles boundaries, you would still have to use a mask to cover some areas, and you might still get the same issue with vector shapes being re-rendered.