Add zoomLevels to the map

RichardMoussopo · ‎08-26-2015

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?

RobertScheitlin__GISP · ‎08-26-2015

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>

View solution in original post

TimWitt2 · ‎08-26-2015

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

RobertScheitlin__GISP · ‎08-26-2015

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

RichardMoussopo · ‎08-26-2015

Thank you Robert

but it looks like LODS only works for ArcGISTiledMapServiceLayer

how would you implement it on the map object?

RobertScheitlin__GISP · ‎08-26-2015

Richard,

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

RobertScheitlin__GISP · ‎08-26-2015

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>

RichardMoussopo · ‎08-26-2015

Thank you Robert, it worked as expected!