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
tileInfoproperty. 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.labelsproperty in
esriConfig.
esriConfig.defaults.map.sliderLabel = {...labels: labels,...};
<!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.46/dijit/themes/claro/claro.css"> <link rel="stylesheet" href="https://js.arcgis.com/3.46/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.46/"></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>