4

If I set maxZoom to any high number like 100, and then zoom in beyond the maximum "zoom level" for the actual tile layer, Leaflet.js doesn't do the expected and show the highest resolution tile, stretched out, but instead just shows blank tiles.

Can it be changed somehow so that it keeps using the highest resolution and stretches it out for further zooming?

I know the details don't get better, but that's not why I want to keep zooming.

  • Are you setting maxzoom in the map config or the tile layer options? If in the tile layer you will need to set maxNativeZoom and maxZoom on the tile layer to make this work. – malcolm Mar 31 '18 at 0:33
  • Welcome to GIS SE! As a new user be sure to take the Tour to learn about our focussed Q&A format. – PolyGeo Mar 31 '18 at 5:25
  • @malcolm Well, I set the maxZoom for the L.map. After reading your reply, I found out the max native zoom level (18) for the tile layer in question and thus set the maxNativeZoom to 18 in the L.tileLayer. However, when I then load the map, it first seems to be working for a split second once you go beyond 18 in zoom, but it flickers and switches between rendering and showing empty tiles in a very glitchy and weird manner. Basically, it shows the correct picture for a split second each time you move the "camera", and then goes to blank tiles. Weird. I have no clue what's wrong. – coolmap Mar 31 '18 at 9:47
  • Try setting maxNativeZoom to one zoom level lower than the actual native zoom, and also there might be a limit on overzoom - one or two zoom levels – malcolm Mar 31 '18 at 11:03
  • Same result doing that. :-( – coolmap Mar 31 '18 at 11:54
3

You probably have 2 issues:

  1. It is unclear whether you have set the maxZoom option on the map or on the Tile Layer, as pointed out by @malcolm in the question comments. For Leaflet to do the behaviour you sound to expect (i.e. stretch out the tiles from the latest available zoom, i.e. the maxNativeZoom), you have to specify both maxZoom and maxNativeZoom on your Tile Layer. Otherwise the default maxZoom value is applied (18), which removes the Tile Layer from the map beyond that zoom level.
L.tileLayer(urlTemplate, {
  maxNativeZoom: 18,
  maxZoom: 100
}).addTo(map);

You can try with this example: https://plnkr.co/edit/z1p9x05vAv4h1sJJrDQC?p=preview

  1. Note that 100 is a crazy high zoom value, which will multiply your tile by 2100 (i.e. > 1030!!!). I am sure browsers will technically be unable to stretch an image to this scale. We could also question its usefulness, since you probably have 256px size tiles, so when the zoom is "just" 8 levels beyond maxNativeZoom, you already have a single pixel filling the former size of your tile (28 = 256)

In the above example, my Firefox 59 on Linux no longer renders the tile image beyond zoom level 40, i.e. when the tile from maxNativeZoom = 18 is stretched by 240-18 = 4,194,304

Trying to scale directly a plain image, my browsers starts behaving strange for a scale > 4,000,000

Example: https://plnkr.co/edit/QMZE6KNcNFURPacvn01U?p=preview

  • Yes! Thanks. That worked. I just had to set both maxNativeZoom and maxZoom for each tileLayer, ignoring the map entirely. – coolmap Apr 1 '18 at 14:35

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.