Search code examples
arcgis-js-api

ESRI JSAPI 3.x -- how to set min/max zoom levels?


I have this codepen that sets the min/max zoom level when initializing the map but the values are not honored. Calling map.getZoom() always returns -1 and I can zoom in and out without limit.

      var bounds = new Extent({
        "xmin":-16045622,
        "ymin":-811556,
        "xmax":7297718,
        "ymax":11142818,
        "spatialReference":{"wkid":102100}
      });

      var map = new Map("map", {
        extent: bounds,
        minZoom: 5,
        maxZoom: 8
      });

I can find no samples related to "minzoom" or "maxzoom" on the samples page.

How can I limit the zoom levels of this map?


Solution

  • The problem is that the map does not have predefined zoom levels, that is why getZoom is -1.

    Usually zoom levels are set in the basemap. Just to test, try using a basemap in your code you will see that works as expected,

    var map = new Map("map", {
      basemap: "topo",
      extent: bounds,
      minZoom: 5,
      maxZoom: 8
    });
    

    In the case you don't have zoom levels, you can use scale instead of zoom, that will work in your code. Simplifying calculations you can use,

    zoom level 5 ~ 1:15.000.000

    zoom Level 8 ~ 1:2.000.000

    So it would be something like this,

    var map = new Map("map", {
      extent: bounds,
      minScale: 15000000,
      maxScale: 2000000
    });