VectorTileLayer does not render when zoom level greater than 14

[giswqs]

The ipyleaflet VectorTileLayer does not render when zoom level is greater than 14. I found the maxNativeZoom issue in the upstream Leaflet.VectorGrid. Unfortunately, the repo is no longer being actively maintained and has no update since Sept 2021. It is unlikely that the issue will be resolved any time soon.

There is an alternative called Leaflet.VectorTileLayer, which is being actively developed by @jkuebart. It appears to support min/maxNativeZoom.

It would be great if ipyleaflet can switch to use Leaflet.VectorTileLayer.

The beauty of vector tile is that you can zoom way in to see the details of the shapes. Without the maxNativeZoom and maxZoom, the vector tile rendering is not very useful.

import ipyleaflet
m = ipyleaflet.Map(center=(40, -100), zoom=4, scroll_wheel_zoom=True)
url = 'https://planetarycomputer.microsoft.com/api/data/v1/vector/collections/ms-buildings/tilesets/global-footprints/tiles/{z}/{x}/{y}'
layer = ipyleaflet.VectorTileLayer(url=url, attribution='Microsoft', max_native_zoom=20, max_zoom=20)
m.add(layer)
m

Relevant issues:

• https://github.com/microsoft/PlanetaryComputer/discussions/175
• https://github.com/python-visualization/folium/issues/1715

[lopezvoliver]

@giswqs There are a couple of separate issues here.

First, the current implementation of VectorTileLayer in ipyleaflet does not have the max_native_zoom parameter implemented. So, if you zoom in more than the actual max native zoom of a dataset, the layer doesn't appear. In #1206, I added this parameter, so this will work soon.

Second, the issue that you mention in Leaflet.VectorGrid refers to the scaling of the line width, so the layer still appears at zoom levels higher than maxNativeZoom, but it looks blurry. I agree with you that the alternative you mention should be incorporated into ipyleaflet.

Third, it seems this vector layer in particular has a max native zoom of 13. I don't see a reference for this in the dataset description, but empirically I found it by inspecting it using this vector layer inspector tool.

You can see that the level 14 is missing here:

Level 13:

Level 14:

You can also try directly here:

https://planetarycomputer.microsoft.com/api/data/v1/vector/collections/ms-buildings/tilesets/global-footprints/tiles/14/4182/6086

which gives you:

{"detail":"Tile 14/4182/6086 not found for tileset global-footprints in collection ms-buildings"}

Here's a preview of how the data looks like using ipyleaflet (with the improvement of #1206):

Level 13:

Level 14:

you can see that now it renders (if you set max_native_zoom=13) but it appears blurry because of the issue you mentioned with the upstream js plugin.

Here's level 15:

and here's the example vector tile layer from the [documentation] at zoom level 18, showing the same blurry effect (it seems the max native zoom for this layer is 16):