AnsweredAssumed Answered

Animate from one view to other

Question asked by Reza@GIS on Jul 12, 2018
Latest reply on Jul 14, 2018 by nikfal

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?

Outcomes