AnsweredAssumed Answered

How to Add Animation / Smooth Pan On Setting New Center For Map

Question asked by behClevest on Jan 4, 2018
Latest reply on Jan 4, 2018 by rscheitlin

Can you please take a look at this demo and let me know how I can add smooth animation or Pan function to move to the destination? 


As you can see I am trying to re-center the map center by

 map.centerAt(new Point(-78.542, 37.61, new SpatialReference({wkid: 4326})));


on a click event but this is jumping the map to the destination.


<!DOCTYPE html>
    <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>Simple Map</title>
    <link rel="stylesheet" href="">
    <link rel="stylesheet" href="" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
      html, body, #map {
        height: 100%;
        margin: 0;
        padding: 0;

    <script src=""></script>
    <script src=""></script>
      var map;

      require(["esri/map", "esri/geometry/Point","esri/SpatialReference","dojo/domReady!"], function(Map, Point, SpatialReference) {
        map = new Map("map", {
          basemap: "topo",  //For full list of pre-defined basemaps, navigate to
          center: [-122.45, 37.75], // longitude, latitude
          zoom: 13

        $(".btn").on("click", function(){
           map.centerAt(new Point(-78.542, 37.61, new SpatialReference({wkid: 4326})));



     <button type="button" class="btn btn-default">Go There</button>
    <div id="map"></div>