maxNativeZoom + maxZoom ignored

[wesweaver]

I use maxNativeZoom and maxZoom on some projects to allow zooming further than normal zoom levels allow. Normally I can zoom past the native level and continue to render tiles, despite the fact that they get blurry. This is desirable sometimes. Using Bing imagery, leaflet will cease to render tiles past the stated maxNativeZoom level.

L.tileLayer.bing({bingMapsKey: BING_KEY, imagerySet: "AerialWithLabels", maxNativeZoom: "19", maxZoom: "23"}).addTo(map),

[tomvalorsa]

Having the same problem. Did a bit of digging but I'm not overly familiar with how leaflet works...maybe it's requesting another set of tiles from bing for the next zoom level rather than checking if it needs to keep the current ones and scale them instead?

[natonic77]

I'm having the same problem. Looking at the network traffic, upon zooming past the maxNativeZoom level a request is being sent to Bing for tiles at the next zoom level still (based on the name of the tile requested) - the Bing Maps server doesn't understand the tile name so returns a "missing picture" image. I don't suppose anyone figured out a workaround yet?

[natonic77]

After looking at the source code a bit more, it appears that the problem is the Bing TileLayer is overriding the getTileUrl, but is not providing the zoom checks that the default getTileUrl provides in its call to an internal method named _getZoomForUrl.

A workaround that solved this for me is to add the following code at the beginning of the plugin's getTileUrl function (before the quadkey is calculated):

if (coords.z > this.options.maxNativeZoom) { coords.z = this.options.maxNativeZoom; }

I'm not sure this is the best long term solution, but maybe this will point someone more knowledgeable in the right direction so a pull request with a permanent solution can be created.

[gmaclennan]

I would welcome a PR that fixed this.

[ChrisGrohHS]

I'm not seeing the issue mentioned when using Leaflet 1.2.0. I do have the problem described when using 1.0.0.

[slead]

Here's a JS Fiddle showing that Bing Maps works with maxNativeZoom using Leaflet 1.1.0.

var map = L.map('map', {maxZoom: 20}).setView([51.505, -0.09], 18)

var options = {
  bingMapsKey: '<key>',
  maxNativeZoom: 18,
  maxZoom: 20
}
var bingLayer = L.tileLayer.bing(options).addTo(map);

The opening zoom level is 18 - zoom in and the Bing Maps layer should not be removed. If you comment out the maxNativeZoom and maxZoom lines, the Bing Maps layers is removed when you zoom in.

(I couldn't get it to work on JS Fiddle using Leaflet 1.2.0 but didn't bother trying to debug why)

[jfcali]

I'm currently using Leaflet 1.2.0.

By default the tiles are maxed to 18, but in my case, it's enough adding a maxZoom to the L.tileLayer.bing options.

var map = L.map('mapid', { maxZoom: 21 }).setView([41.3851, 2.1734], 13);
L.tileLayer.bing({ bingMapsKey: BING_KEY, imagerySet: 'CanvasGray', maxZoom: 21 }).addTo(map);

In my case, I guess this could be set in the source code by default, so maxZoom is controlled via Leaflet instead of having to declare for both the Leaflet map options and the Bing plugin. Not sure if this makes sense though.

(Edit: this made sense to me because the imagery set I used reaches '21' (CanvasGray), but not all imagery can reach said level, so it maybe isn't a good idea to hardcode a default zoom, although it may be documented as an option? I mean, it already works...)

[gmaclennan]

I think this was fixed in #24 which is included in the new v3.3.0 release. Let me know if it works and we can close this.

[ppKrauss]

I have also problems, now is working with new version and this explanations: https://stackoverflow.com/a/53883145/287948

[jason69]

Hi, I tested with leaflet 1.4.0 and it still doesn't work...

I also tried the getTileUrl tweak but it didn't work...

Let me know how I can help

[gmaclennan]

Hi @jason69 if you share an example of what is not working someone might be able to help. Make sure you have checked the link shared by @ppKrauss above.

[jason69]

OK, thanks to @ppKrauss I finally made it work.

You have to specify both maxNativeZoom AND maxZoom to make it work.

I don't know if this is a bug or not, because with openstreetmap only maxNativeZoom is enough...

Anyway now it works...

[johnd0e]

I don't know if this is a bug or not,

It is bug, that should be fixed.
Another similar project does not have such issue: https://github.com/shramov/leaflet-plugins/blob/master/layer/tile/Bing.js