Hide Table of Contents
Analysis
Data Reviewer
Dynamic Layers
Editing
Feature Layers
Feature Table
Graphics
Map
Mobile
Online and Portal
Popups and Info Windows
Query and Select
Renderers, Symbols, Visualization
Search
Slider with labels
Explore in the sandbox
Open in CodePen
View live sample
Download as a zip file
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
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,...};
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.29/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.29/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.29/"></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>