Animate from one view to other

Question

I've just tried to animate from first view to the second as follows: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"> <title>Popup actions - 4.8</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <link rel="stylesheet" href="https://js.arcgis.com/4.8/esri/css/main.css"> <script src="https://js.arcgis.com/4.8/"></script> <script> require([ "esri/Map", "esri/views/MapView", "esri/geometry/Extent", "esri/geometry/Point", "dojo/domReady!" ], function ( Map, MapView, Extent, Point ) { // Create the Map const map = new Map({ basemap: "topo" }); // Create the Constrains const constraints = new Object({ minScale: 1000000, // User cannot zoom out beyond a scale of 1:500,000 maxScale: 0, // User can overzoom tiles snapToZoom: false, }); // Center of the Map const point = new Point({ x: -96.8236, y: 33.1507 }); // Create the Extent const extent = new Extent({ xmin: -9177882, ymin: 4246761, xmax: -9176720, ymax: 4247967, spatialReference: { wkid: 102100 } }); // Create the MapView const view = new MapView({ container: "viewDiv", map: map, zoom: 12, extent: extent }); view.when(function () { view.goTo({ target: point, zoom: 12 }); }, function (error) { console.log("Error no." + error + "Happend"); }); }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍ bu it just shows the second view. Any solution?

MohammadrezaNikfal1 · Answer

Agree, the updating process in Map View during animation does not work like Scene View. In other words, the goto() works as expected and the issue is the animation process itself. During this process, the image tiles are not updated. So when you animate a large scale map view in a short distance (according to scale), you can get an animation. Otherwise, during animation you get a white screen. Take a look at the following code that creates animation in Map view: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"> <title>Popup actions - 4.8</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <link rel="stylesheet" href="https://js.arcgis.com/4.8/esri/css/main.css"> <script src="https://js.arcgis.com/4.8/"></script> <script> require([ "esri/Map", "esri/views/MapView", "esri/geometry/Point", "dojo/domReady!" ], function ( Map, MapView, Point, ) { var map = new Map({ basemap: "streets" }); const point = new Point({ x: -96.8236, y: 33.1507 }); const point1 = new Point({ x: -95.6236, y: 33.5507 }); var view = new MapView({ container: "viewDiv", map: map, zoom: 8, center: point }); view.when(function () { view.goTo({ center: point1, zoom: 8 }, { duration: 4000, easing: "linear " } ); }); }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍ If you increase the Zoom to 14 or duration to 400 you do not get a good animation.

RobertScheitlin__GISP · Answer

Reza,

You are not going to get a MapView to animate the same way the SceneView does. The issue is they way they attempt to retrieve the cached map is completely different.

RezaNikfal · Answer

Robert,

I am trying to animate the movement from the first view to the next like this Esri's sample on scene view.