nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Add zoomLevels to the map

RichardMoussopo

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?

タグ付けされた投稿をもっと見る

Accepted answers

RobertScheitlin__GISP

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>

All comments

RichardMoussopo

Thank you Robert, it worked as expected!

RobertScheitlin__GISP

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>

RobertScheitlin__GISP

Richard,

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

RichardMoussopo

Thank you Robert

but it looks like LODS only works for ArcGISTiledMapServiceLayer

how would you implement it on the map object?

RobertScheitlin__GISP

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

TimWitt2

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

会話に参加する

サインインしたメンバーは投稿、更新のフォローなどができます。初めてですか？無料アカウントを登録してください。

クイックリンク

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.