Animate from one view to other

RezaNikfal · ‎07-12-2018

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?

RobertScheitlin__GISP · ‎07-12-2018

Reza,

The view.then will return before the view is actually drawn so you will execute the goto before the view has drawn initially. You can see this by adding a setTimeout like have bellow.

<!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() {
        setTimeout(function(){
          view.goTo({
            target: point,
            zoom: 12
          });
        }, 5000)
      }, function(error) {
        console.log("Error no." + error + "Happend");
      });
    });
  </script>
</head>

<body>
  <div id="viewDiv"></div>
</body>

</html>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

RezaNikfal · ‎07-12-2018

Robert,

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

RobertScheitlin__GISP · ‎07-13-2018

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.

MohammadrezaNikfal1 · ‎07-14-2018

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.