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 ?


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'],
                    new L.LatLng(15.292019,145.834236),
                    new L.LatLng(15.097866,145.676994)

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?

  • I agree, but my layers are not always esri. Anyway, I found a solution. Apparently L.tileLayer does accept bounds param, only it is not listed in documentation. Thanks for your answer. great tip!
    – Shaunak
    Aug 26 '13 at 17:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.