LeafletJS: Load Tile Layer based on bounding box

Question

I have a LeafletJS map application with lots of layers. I have a few layers that only have imagery for certain regions across the world. Because everything goes on a world base map. All tile caches are generated as standard tile caches covering the world in web Mercator (Google tile cache system) and are served using a ArcGIS Server.

Here is what I would like to do: Load a tile layer when certain bounding box comes into active view and then unload it when box is out.

Is there a simple way to do this in LeafletJS without going through manual geometry check ?

Answer 1

Here is how I solved it. L.tileLayer does accept bounds parameter. I found it by digging into the code, but it is currently missing from the documentation. This fixed it .

L.tileLayer(config.ISLAND_IMAGERY + '/tile/{z}/{y}/{x}', {
                zIndex: -4,
                subdomains: ['', '1', '2'],
                bounds:[
                    new L.LatLng(15.292019,145.834236),
                    new L.LatLng(15.097866,145.676994)
                ]
            }),

Answer 2

TiledMapLayer in esri-leaflet seems to handle diplaying cached ArcGIS Server tiles only where they are present without writing any code pretty seamlessly.

(pan this example app north into Canada to stop loading US Demographic layers)

are the 1KB request/responses in other areas problematic?