Hide Table of Contents
View Customize zoom animation sample in sandbox
Customize zoom animation

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.22/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.22/esri/css/esri.css">
    
    <script src="https://js.arcgis.com/3.22/"></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>