0

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>
  • there is the esri.config.defaults.map.panDuration config ,( set in milisecond) but for further distance between your point and the centered point , the annimation doesn't work .. – Spring Jan 4 '18 at 21:52
1

I noticed that the map has an "optimizePanAnimation" constructor option that can be set to false to help with panning within the same zoom level.

Here's a link to the documentation. Search the page for "optimizePanAnimation", it's kind of hidden in there.

https://developers.arcgis.com/javascript/3/jsapi/map-amd.html

I've been playing around with that property and the esriConfig settings as well.

esriConfig.defaults.map.panDuration = 10000; 
esriConfig.defaults.map.panRate = 1;
esriConfig.defaults.map.zoomDuration = 10000;
esriConfig.defaults.map.zoomRate = 1;

Here's another thread that touches on the same question.

https://community.esri.com/thread/207490-how-to-add-animation-smooth-pan-on-setting-new-center-for-map

Here's a working codepen that illustrates the idea:

https://codepen.io/Cofad/pen/vYNaOdw

It's not working perfectly yet. I'm having issues with the tiles not loading quickly enough, but it's a step in the right direction.

0

If you are able to use the 4.x JavaScript API, then there are some good options in the "GoTo" function of MapView and SceneView classes.

Here's a simple demo of the options for SceneView: https://jsfiddle.net/gavinr/tdrp5jg9/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.