topic Re: How to Add Animation / Smooth Pan On Setting New Center For Map in ArcGIS JavaScript Maps SDK Questions

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

BehrouzHosseini — Sat, 11 Dec 2021 22:33:06 GMT

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>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

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

RobertScheitlin__GISP — Sat, 11 Dec 2021 22:33:09 GMT

Bengi,

Here is a sample that sets the APIs default animation.

<!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.23/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.23/"></script>
    <script>
      var map;

      require(["esri/map", "esri/geometry/Point", "esri/SpatialReference", "esri/config", "dojo/domReady!"], function(Map, Point, SpatialReference, esriConfig) {
        //configure map animation to be faster
        esriConfig.defaults.map.panDuration = 500; // time in milliseconds, default panDuration: 350
        esriConfig.defaults.map.panRate = 50; // default panRate: 25
        esriConfig.defaults.map.zoomDuration = 500; // default zoomDuration: 500
        esriConfig.defaults.map.zoomRate = 1; // default zoomRate: 25

        map = new Map("map", {
          basemap: "satellite",
          center: [-93.5, 36.972],
          zoom: 5
        });
        
        setTimeout(function(){
          map.centerAt(new Point(-78.542, 37.61, new SpatialReference({wkid: 4326})));
        }, 1000)
        
      });
    </script>
  </head>
  <body>
    <div id="map"></div>
  </body>
</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

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

BehrouzHosseini — Thu, 04 Jan 2018 16:21:57 GMT

Thanks Robert but this is working fine on only Zoomed out maps. I tried to use a zoom level of 12 or 14 and jumping was happening again

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

RobertScheitlin__GISP — Thu, 04 Jan 2018 16:28:28 GMT

Bengi,

You just need to play with the panDurration and panRate numbers then until your happy.