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>
<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>Simple Map</title>
    <link rel="stylesheet" href="https://js.arcgis.com/3.23/esri/css/esri.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <style>
      html, body, #map {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://js.arcgis.com/3.23/"></script>
    <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 http://arcg.is/1JVo6Wd
          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})));
        });

      });
    </script>

  </head>

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

Outcomes