Set visible scales | ArcGIS API for JavaScript 3.46

Version 1.2 of the ArcGIS JavaScript API added more control over how the map works with cached, or tiled, map services. This sample shows how you can limit the scale levels at which the map can retrieve tiles. This is useful if you don't want users zooming too far in or out, even though tiles may exist at those extreme scales.

This sample uses an imagery layer from ArcGIS Online. This service has 20 levels of detail available, but the application is configured to only use a few of them. Because the application is focused on one national park, users do not need to be able to zoom farther out.

In this sample, the levels of detail are configured in an array

lods[]

containing information about each level's index number, resolution, and scale. How do you easily retrieve all this information? The best way is to navigate to the service's Services Directory page, then append

?f=pjson

to the URL. Follow this link to see an example:

http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer?f=pjson

From here you can copy out the levels of detail that you want in your array. Once you've configured the array, you can set the map's

lods

property in the constructor. You can only set the levels of detail at the time you create the map.

Code

<!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>Custom TileInfo</title>

    <link rel="stylesheet" href="https://js.arcgis.com/3.46/esri/css/esri.css">
    <style>
     html, body, #map{
      height: 100%;
      margin: 0;
      padding: 0;
     }
    </style>
    <script src="https://js.arcgis.com/3.46/"></script>
    <script>
      var map;

      require([
        "esri/map", "dojo/dom", "dojo/domReady!"
      ], function(
        Map, dom
      ) {
        // Extract several levels from the  Imagery_World
        // map service.  Once the map has been created the level ids will be reset.     
        var lods = [{
          "level": 11,
          "resolution": 76.4370282850732,
          "scale": 288895.277144
        }, {
          "level": 12,
          "resolution": 38.2185141425366,
          "scale": 144447.638572
        }, {
          "level": 13,
          "resolution": 19.1092570712683,
          "scale": 72223.819286
        }, {
          "level": 14,
          "resolution": 9.55462853563415,
          "scale": 36111.909643
        }, {
          "level": 15,
          "resolution": 4.77731426794937,
          "scale": 18055.954822
        }, {
          "level": 16,
          "resolution": 2.38865713397468,
          "scale": 9027.977411
        }, {
          "level": 17,
          "resolution": 1.19432856685505,
          "scale": 4513.988705
        }];
        
        map = new Map("map", {
          basemap: "hybrid",
          center: [-115.812, 33.866],
          lods: lods
        });
        map.on("extent-change", function(evt) {
          dom.byId("scale").innerHTML = "LOD Level: <i>" + evt.lod.level + 
            "</i> Resolution: <i>" + evt.lod.resolution.toFixed(3) + 
            "</i> Scale: <i>" + evt.lod.scale.toFixed(3) + "</i>";
        });
      });
    </script>
  </head>
  
  <body>
    <div id="map">
      <span id="scale" style="position:absolute; left:10px; bottom:10px; z-index:100; color:white">
      </span>
    </div>
  </body>

</html>

	Site wide shortcuts
`?`	Bring up this help dialog
`esc`	Dismiss this help dialog
`gh`	Go to Home
`gg`	Go to Guide
`ga`	Go to API Reference
`gs`	Go to Sample Code
`gt`	Scroll to top of page
`spacebar`	Scroll page down
`shift spacebar`	Scroll page up
`gb`	Scroll to bottom of page

	Sample Code
`/`	Focus search
`es`	Explore in the Sandbox
`s`	Share in online code editor
`vl`	View live example

Explore in the sandbox Open in CodePen View live sample

Description

Code

Keyboard shortcuts

Explore in the sandbox Open in CodePen
View live sample