I can't over zoom tiles of tiledlayer despite setting maxScale to 0

YObaidat · ‎03-17-2022

I want to over zoom tiled layer tiles by setting maxScale to 0 but still I can't zoom beyond specific scale. You can check code below. Please note that when try to do the same with JS Api v3 it works. What I'm missing here if anyone could help please.

https://codepen.io/yobeidat/pen/KKZVPKE

<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <title>
      Intro to MapImageLayer | Sample | ArcGIS API for JavaScript 4.22
    </title>

    <link
      rel="stylesheet"
      href="https://js.arcgis.com/4.22/esri/themes/light/main.css"
    />
    <script src="https://js.arcgis.com/4.22/"></script>

    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>

    <script>
      require([
        "esri/Map",
        "esri/views/MapView",
        "esri/layers/MapImageLayer",
        "esri/layers/TileLayer",
        "esri/Basemap"
      ], (Map, SceneView, MapImageLayer,TileLayer,Basemap) => {
  let baseLayer = new TileLayer({
    url: "https://services.arcgisonline.com/arcgis/rest/services/World_Terrain_Base/MapServer",
    maxScale:0
  });
  
  let basemap = new Basemap({
  baseLayers: [
    baseLayer
  ]
});

        const permitsLayer = new MapImageLayer({
          portalItem: {
            // autocasts as new PortalItem()
            id: "d7892b3c13b44391992ecd42bfa92d01"
          }
        });

        /*****************************************************************
         * Add the layer to a map
         *****************************************************************/
        const map = new Map({
          basemap: basemap,
          layers: [permitsLayer]
        });

        const view = new SceneView({
          container: "viewDiv",
          map: map
        });
        permitsLayer.when(() => {
          view.goTo(permitsLayer.fullExtent).catch((error) => {
            if (error.name != "AbortError") {
              console.error(error);
            }
          });
        });
      });
    </script>
  </head>

  <body>
    <div id="viewDiv"></div>
  </body>
</html>