Unable to zoom in beyond zoom level 16 - ArcGIS API for JS

PaulMcCord · ‎07-24-2020

Hello,

I'm creating a map application using the ArcGIS API for JS v4.11. I'm running into an issue where I can't zoom closer than zoom level 16. I've applied constraints to my MapView, which I've called myView:

//Constrain the max and min zoom levels
    myView.constraints = {
        minZoom: 13,
        maxZoom: 19
    };‍‍‍‍‍

The minZoom is being honered... I can't zoom out further than zoom level 13, but I can't zoom in to 19.

I don't know if it makes a difference, but I'm using a custom basemap that I created using the Vector Tile Style Editor: ArcGIS Vector Tile Style Editor

Is there any additional configuration I need to do if using a custom basemap? Here's how I bring in the custom basemap:

//Create the main map, starting with a custom basemap
    var basemap = new Basemap({
        baseLayers: [
            new VectorTileLayer({
                portalItem: {
                    id: "ddef64bb74174dd6adf7cff46dd24da7"
                }
            })
        ],
        title: "customBM",
        id: "customBM"
    });‍‍‍‍‍‍‍‍‍‍‍‍

Thanks,

Paul

Egge-Jan_Pollé · ‎07-24-2020

Hi Paul McCord,

Yes, I do see what you mean.

I replicated your case - see full code below.

Using your basemap (having LODs 0-22) I manage to get it working with ArcGIS API for JS v4.16. With that version it is perfectly possible to limit zooming between levels 13 an 19 -> try the example below.

But as soon as I downgrade to 4.11 I encounter the same issue: no zooming beyond level 16. Weird...

So, the question is: do you really have to stuck with version 4.11?

HTH,

Egge-Jan

<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>ArcGIS JavaScript Tutorials: zoom constraints</title>
  <link rel="stylesheet" href="https://js.arcgis.com/4.16/esri/css/main.css">
  <script src="https://js.arcgis.com/4.16/"></script>
  <style>
    html, body, #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
    #location {
      padding: 15px;
      background: white;
      color: black;
       border: 5px solid gold;
       font-family: sans-serif;
       font-size: 1.2em;
    }
  </style>
  <script>
    require([
      "esri/Map",
      "esri/Basemap",
      "esri/views/MapView",
      "esri/layers/VectorTileLayer",
      "esri/core/watchUtils"
    ], function(Map, Basemap, MapView, VectorTileLayer, watchUtils) {

      var map = new Map({
        basemap: new Basemap({
          baseLayers: [
            new VectorTileLayer({
              portalItem: {
                id: "ddef64bb74174dd6adf7cff46dd24da7"
              }
            })
          ],
          title: "customBM",
          id: "customBM"
        })
      });

      var view = new MapView({
        container: "viewDiv",
        map: map,
        center: [-73.966667, 40.783333], // longitude, latitude
        zoom: 15
      });

      //Constrain the max and min zoom levels
      view.constraints = {
        minZoom: 13,
        maxZoom: 19
      };
      
      view.ui.add("location", "bottom-left");

      watchUtils.whenTrue(view, "stationary", function() {
        lon = parseInt(view.center.x); // with parseInt values are rounded to the full meter (coordinates in Web Mercator - EPSG:3857)
        lat = parseInt(view.center.y);
        zoomLevel = view.zoom;
        document.getElementById("location").innerHTML = "Map Center - Longitude: " + lon + " / Latitude: " + lat + " / Zoom level: " + zoomLevel; 
      });
    });
  </script>
</head>
<body>
  <div id="viewDiv"></div>
  <div id="location"></div>
</body>
</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

View solution in original post

Egge-Jan_Pollé · ‎07-24-2020