1

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 .. – Springer F Jan 4 '18 at 21:52
0

Are you able to use the 4.x JavaScript API? If so 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.