Zoom is limited to zoom level 15 for Basemap with VectorTileLayer

[jotwe]

Hello,

I want to use vector tiles provided by basemap.de in a map application based on ArcGIS API for JS v4.24. It basically works great, but I somehow cannot zoom beyond zoom level 15 which corresponds to scale 9027.977410759811. In the constraints of the MapView object, I set maxZoom to 4 and minZoom to 17. The maxZoom parameters seems to work as expected.

My code looks like this:

let vectorBasemap = new Basemap({
  title: "Vector Basemap",
  id: "vector_basemap",
  baseLayers: [
    new VectorTileLayer({
      title: "Vector basemap",
      url: "https://sgx.geodatenzentrum.de/gdz_basemapde_vektor/tiles/v1/bm_web_de_3857/bm_web_de_3857.json",
      style: "https://sgx.geodatenzentrum.de/gdz_basemapde_vektor/styles/bm_web_col.json"
    })
  ],
  thumbnailUrl: "https://dummyimage.com/256x256/006600/ffffff.png&text=Vector"
});

// [...]

let view = new MapView({
  map: map,
  center: defaultLocation,
  zoom: 10,
  container: "map-canvas",
  resizeAlign: "top-left",
  constraints: {
    minZoom: 17,
    maxZoom: 4,
  },
  ui: {
    components: []
  }
});

// [...]

view.on("mouse-wheel", function (event) {
  console.log(view.scale + " / " + view.zoom);
});

I do not see similar limitations for vector tiles taken from Here maps.

Is there a problem with the style file or do I have to add additional parameters? i simply cannot find the limiting factor here.

Thanks.

[UndralBatsukh · Accepted solution]

Hi there, 

This is working as expected from what I can see. The Vector tile service metadata has the maxzoom defined as 15. In the JS API, LODs come from the first layer in the map.  There are only 15 LODs for this service, hence why you can't pass that zoom level. You can however, disable lods by setting on the MapView.constraints.lods yourself. You can set the LODs by calling TileInfo.create(), define your own LODs, or set empty lods (constraints.lods = []). If you set it empty then you  have to use scales to zoom in and out instead. In any case, the following code snippet shows how to create the LODs to match the ArcGIS online Web Mercator tiling scheme. Once this is set  you will be able to zoom past level 15.

Hope this helps,

let view = new MapView({
  map: map,
  center: [10.0959, 53.454],
  zoom: 14,
  container: "viewDiv",
  constraints: {
    lods: TileInfo.create().lods
  }
});

[jotwe]

Great, that solved my issue. Thanks a lot for the detailed description!