Hide Table of Contents
View Slider with labels sample in sandbox
Slider with labels

Description

This sample shows how you can label the scales on the zoom level slider. This sample uses an ArcGISTiledMapServiceLayer, meaning that the layer has a cache of pre-rendered map tiles at specific scales. You can get an array of the cached scales from the layer's

tileInfo
property. This is how the labels are derived in this sample. In the code below, think of "lods" as "levels of detail".

var lods = layer.tileInfo.lods;for (var i=0, il=lods.length; i<il; i++) {labels[i] = lods[i].scale;}

After constructing this array of scale levels, it's easy to apply the labels through the

sliderLabel.labels
property in
esriConfig
.

esriConfig.defaults.map.sliderLabel = {...labels: labels,...};

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>Map Slider Labels</title>
    <link rel="stylesheet" href="https://js.arcgis.com/3.22/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.22/esri/css/esri.css">
    
    <style>
      /* make map zoom slider labels white, claro uses black by default */
      .claro .dijitRuleLabel {
        color: white;
      }
      .claro .dijitRuleMark {
        border: 1px solid #fff;
      }
      html, body, #map {
        padding:0;
        margin:0;
        height:100%;
      }
    </style> 
    <script src="https://js.arcgis.com/3.22/"></script>
    <script>
      var map;
      require([
        "esri/map", "esri/layers/ArcGISTiledMapServiceLayer", "dojo/number", "dojo/domReady!"
      ], function(Map, ArcGISTiledMapServiceLayer, number){
        // create a layer first
        var layer = new ArcGISTiledMapServiceLayer("https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer");
        // once the layer loads, use its tile levels to label the map's slider
        layer.on("load", function() {
          // use layer's scales to display as slider labels
          var labels = [];
          var lods = layer.tileInfo.lods;
          for ( var i = 0, il = lods.length; i < il; i++ ) {
            if ( i % 2 ) {
              labels.push(number.format(lods[i].scale.toFixed()));
            }
          }

          map = new Map("map", {
            basemap: "satellite",
            center: [-79.805, 26.116],
            zoom: 3,
            sliderStyle: "large",
            sliderLabels: labels 
          });
        });
      });
    </script>
  </head>
  <body class="claro">
    <div id="map"></div>
  </body>
</html>