Hide Table of Contents
Analysis
Dynamic Layers
Editing
Feature Layers
Feature Table
Graphics
Map
Mobile
Online and Portal
Popups and Info Windows
Query and Select
Renderers, Symbols, Visualization
Search
Customize zoom animation
Explore in the sandbox
Open in CodePen
View live sample
Description
This sample shows how you can customize the animation behavior of the map when a user zooms in and out. The zoomDuration and zoomRate are Dojo animation properties that determine the duration of the animation and the rate of frame refresh, respectively. These properties are both measured in milliseconds and default to 500 for the zoom duration and 25 for the zoom rate.You can adjust the properties in this sample to get the best look for your data and application. For example, if your map takes a long time to load, you might increase the zoom duration so that the user will spend less time looking at an empty or distorted screen while waiting for the zoomed map to load. Conversely, if your map loads quickly, you might decrease the duration to give the map a faster feel.
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>Customize Map Zoom Animation</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">
<script src="https://js.arcgis.com/3.46/"></script>
<script>
dojo.require("esri.map");
var map;
function init() {
//configure map zoom animation to be slower
esri.config.defaults.map.zoomDuration = 100; //time in milliseconds; default is 500
esri.config.defaults.map.zoomRate = 10; //refresh rate of zoom animation; default is 25
map = new esri.Map("map", {
center: [-52.031, 15.284],
zoom: 2,
sliderStyle: "large"
});
map.addLayer(new esri.layers.ArcGISTiledMapServiceLayer("https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"));
}
dojo.ready(init);
</script>
</head>
<body class="claro">
Configure map zoom duration
<div id="map" style="width:1024px; height:512px; border:1px solid #000;"></div>
</body>
</html>