topic Add zoomLevels to the map in ArcGIS JavaScript Maps SDK Questions

Add zoomLevels to the map

RichardMoussopo — Wed, 26 Aug 2015 12:50:56 GMT

I would like to expand the zoom level up to the layer details. Currently the default zoom level stops at 17. Is it possible to make it go up to 20 for example?

Re: Add zoomLevels to the map

TimWitt2 — Wed, 26 Aug 2015 12:53:52 GMT

Richard,

the zoom level is based on the basemap. I think you would need to use your own basemap to be able to modify the zoom levels, since the ESRI basemaps have their zoom level already set.

Tim

Re: Add zoomLevels to the map

RobertScheitlin__GISP — Wed, 26 Aug 2015 12:56:41 GMT

Richard,

Yes you can add LODs to the map but the selected basemap will not draw at levels that it does not have data for.

LOD | API Reference | ArcGIS API for JavaScript

Re: Add zoomLevels to the map

RichardMoussopo — Wed, 26 Aug 2015 13:55:07 GMT

Thank you Robert

but it looks like LODS only works for ArcGISTiledMapServiceLayer

how would you implement it on the map object?

Re: Add zoomLevels to the map

RobertScheitlin__GISP — Wed, 26 Aug 2015 14:48:58 GMT

Richard,

The map object has a lods option in it's constructor.

Re: Add zoomLevels to the map

RobertScheitlin__GISP — Sat, 11 Dec 2021 13:42:51 GMT

Richard,

Here is a sample:

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
    <title>Simple Map</title>
    <link rel="stylesheet" href="http://js.arcgis.com/3.14/esri/css/esri.css">
    <style>
      html, body, #map {
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
      }
      body {
        background-color: #FFF;
        overflow: hidden;
        font-family: "Trebuchet MS";
      }
    </style>
    <script src="http://js.arcgis.com/3.14/"></script>
    <script>
      var map;
      require([
        "esri/map",
        "dojo/domReady!"
      ], function(
        Map
      ) {
        var lods = [
         {
          "level": 0,
          "resolution": 156543.03392800014,
          "scale": 5.91657527591555E8
         },
         {
          "level": 1,
          "resolution": 78271.51696399994,
          "scale": 2.95828763795777E8
         },
         {
          "level": 2,
          "resolution": 39135.75848200009,
          "scale": 1.47914381897889E8
         },
         {
          "level": 3,
          "resolution": 19567.87924099992,
          "scale": 7.3957190948944E7
         },
         {
          "level": 4,
          "resolution": 9783.93962049996,
          "scale": 3.6978595474472E7
         },
         {
          "level": 5,
          "resolution": 4891.96981024998,
          "scale": 1.8489297737236E7
         },
         {
          "level": 6,
          "resolution": 2445.98490512499,
          "scale": 9244648.868618
         },
         {
          "level": 7,
          "resolution": 1222.992452562495,
          "scale": 4622324.434309
         },
         {
          "level": 8,
          "resolution": 611.4962262813797,
          "scale": 2311162.217155
         },
         {
          "level": 9,
          "resolution": 305.74811314055756,
          "scale": 1155581.108577
         },
         {
          "level": 10,
          "resolution": 152.87405657041106,
          "scale": 577790.554289
         },
         {
          "level": 11,
          "resolution": 76.43702828507324,
          "scale": 288895.277144
         },
         {
          "level": 12,
          "resolution": 38.21851414253662,
          "scale": 144447.638572
         },
         {
          "level": 13,
          "resolution": 19.10925707126831,
          "scale": 72223.819286
         },
         {
          "level": 14,
          "resolution": 9.554628535634155,
          "scale": 36111.909643
         },
         {
          "level": 15,
          "resolution": 4.77731426794937,
          "scale": 18055.954822
         },
         {
          "level": 16,
          "resolution": 2.388657133974685,
          "scale": 9027.977411
         },
         {
          "level": 17,
          "resolution": 1.1943285668550503,
          "scale": 4513.988705
         },
         {
          "level": 18,
          "resolution": 0.5971642835598172,
          "scale": 2256.994353
         },
         {
          "level": 19,
          "resolution": 0.29858214164761665,
          "scale": 1128.497176
         },
         {
          "level": 20,
          "resolution": 0.1492910708238083,
          "scale": 564.248588
         },
         {
          "level": 21,
          "resolution": 0.0746455354119042,
          "scale": 282.124294
         }
        ];
        map = new Map("map", {
          basemap: "topo",  //For full list of pre-defined basemaps, navigate to http://arcg.is/1JVo6Wd
          center: [-122.45, 37.75], // longitude, latitude
          zoom: 13,
          lods: lods
        });
      });
    </script>
  </head>

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

Re: Add zoomLevels to the map

RichardMoussopo — Wed, 26 Aug 2015 15:37:41 GMT

Thank you Robert, it worked as expected!