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

1256
3
Jump to solution
07-24-2020 12:59 PM
PaulMcCord
Occasional Contributor

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

Tags (2)
0 Kudos
1 Solution

Accepted Solutions
Egge-JanPollé1
MVP Regular Contributor

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

3 Replies
Egge-JanPollé1
MVP Regular Contributor

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>
PaulMcCord
Occasional Contributor

Great! Thank you Egge-Jan. I don't need to stick with v4.11. I've now upgraded to 4.16 and it is working as it should. Thanks for the assistance!

Paul

AmitAnand
New Contributor

Facing similar issue baseMap.initialExtent is setting different zoom level in 4.18 and different in 3.x in older UI it was working fine but after recent update we are facing this issue.

Tags (2)
0 Kudos