Leaflet zoom in further and stretch tiles

22
votes

When I zoom in far enough on my map, the TileLayer disappears and I see a bunch of tiles that say "Map data not yet available". I believe these tiles may be coming from the provider, but I am not sure (I am using ESRI WorldImagery dataset).

Is there any way to, at a certain zoom level, just force the tiles to stretch, instead of requesting the tiles for that zoom level? I am ok with some blur, but I do need to zoom in further.

I tried playing around with the zoomOffset option, but whenever I put something there other than 0, my tiles just never load (all grey).

Thanks!

1
leaflet
I'm looking for the exact same thing. They are being served by ESRI. (see services.arcgisonline.com/arcgis/rest/services/World_Street_Map/…). Unlike open street map, for example, which throws a 404 and will cause its TileLayer to file a tileerror event. I've been fighting with this all day, have you found anything since posting? – cscott530
Unfortunately not. I took the coward's way out and used the (less pretty) Open MapQuest tile set instead... – elsurudo
I'm looking for the same thing to support zooming past the highest zoom level provided by MapBox Satellite, and just show the same tile, but stretched to the higher zoom level. This is a major difference I see between MapBox and Google currently. Google doesn't necessarily have higher resolution, but it's more usable at the higher zoom levels despite it being 'over-zoomed' I was hoping to find a Leaflet plugin that would do this, but haven't found anything. – JasonRDalton

1 Answers

31
votes

This can be solved by using two of the options of L.TileLayer.

First, set maxNativeZoom to the highest zoom level your tiles provide (the last zoom level before the "Map data not available" starts to appear - this tells Leaflet to stop requesting new tiles when zooming in beyond this level; stretched tiles will be used instead.

Second, set maxZoom to whatever zoom is appropriate; you might not want this to be more than a couple of levels higher than maxNativeZoom, since the stretched tiles will start to look pretty horrible.

You can find out more about the details by checking under "Options" in the documentation for L.TileLayer: http://leafletjs.com/reference.html#tilelayer