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
Explore in the sandbox
Open in CodePen
View live sample
Description
This sample shows how you can customize the animation behavior of the map it pans. The panDuration and panRate 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 350 for the pan duration and 25 for the pan rate. For more information on Dojo animation, refer to the Reference Guide and API Reference on dojo/_base/fx and the Dojo animation tutorial.
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 pan duration so that the user will spend less time looking at an empty screen while waiting for the panned 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 Navigation Animation</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.46/esri/css/esri.css">
<style>
html, body, #map {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
body {
background-color: #FFF;
overflow: hidden;
font-family: "Trebuchet MS";
}
</style>
<script src="https://js.arcgis.com/3.46/"></script>
<script>
var map;
require(["esri/map", "esri/config", "dojo/domReady!"], function(Map, esriConfig) {
//configure map animation to be faster
esriConfig.defaults.map.panDuration = 1; // time in milliseconds, default panDuration: 350
esriConfig.defaults.map.panRate = 1; // default panRate: 25
esriConfig.defaults.map.zoomDuration = 100; // default zoomDuration: 500
esriConfig.defaults.map.zoomRate = 1; // default zoomRate: 25
map = new Map("map", {
basemap: "satellite",
center: [-93.5, 36.972],
zoom: 5
});
});
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>