Community
Select to view content in your preferred language

Animate from one view to other

747
4
07-12-2018 02:39 PM
RezaNikfal
by
Emerging Contributor
‎07-12-2018 02:39 PM

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?

0 Kudos
4 Replies
RobertScheitlin__GISP
by MVP Emeritus
MVP Emeritus
‎07-12-2018 03:51 PM

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>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
0 Kudos
RezaNikfal
by
Emerging Contributor
‎07-12-2018 06:55 PM

Robert,

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

0 Kudos
RobertScheitlin__GISP
by MVP Emeritus
MVP Emeritus
‎07-13-2018 06:25 AM

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. 

0 Kudos
MohammadrezaNikfal1
by
Regular Contributor
‎07-14-2018 06:49 PM

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.

0 Kudos