JavaScript 4.2 - GoTo operation not working with Zoom

SethPatrich2 · ‎01-13-2017

I am not able to perform a GoTo operation with a Zoom option. I have tried on multiple targets including individual/multiple graphics and geometries, which should work according to the reference.

Here is sample code I'm using to replicate the issue:

<!DOCTYPE html>
<html>
<head>
    <title>GoTo Operation with Zoom</title>
    <style>
        html,
        body,
        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }
    </style>

    <link rel="stylesheet" href="https://js.arcgis.com/4.2/esri/css/main.css">
    <script src="https://js.arcgis.com/4.2/"></script>

    <script>
        require([
          "esri/Map",
          "esri/views/MapView",
          "esri/symbols/SimpleMarkerSymbol",
          "esri/geometry/Point",
          "esri/Graphic",
          "esri/geometry/SpatialReference",
          "dojo/domReady!"
        ], function (Map, MapView, SimpleMarkerSymbol, Point, Graphic, SpatialReference) {

            var map = new Map({
                basemap: 'hybrid'
            });

            var view = new MapView({
                center: [-84.3852995, 33.7678835],
                container: "viewDiv",
                map: map,
                zoom: 13

            });

            //Create SVG Icon
            var iconPath = "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z";

            var markerSymbol = new SimpleMarkerSymbol(
                {
                    path: iconPath,
                    size: "50px",
                    color: "#3F51B5",
                    outline: {
                        color: [255, 255, 255],
                        width: 1
                    }
                }
            );

            var point = new Point({
                longitude: -84.3852995,
                latitude: 33.7678835,
                spatialReference: SpatialReference.WGS84
            });

            var pointGraphic = new Graphic({
                geometry: point,
                symbol: markerSymbol
            });

            view.graphics.add(pointGraphic);

            var options = {
                zoom: 5
            }

            view.goTo(point, options);
        });
    </script>
</head>

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

I'm getting the following exception:

TypeError: Cannot read property 'wkid' of null
 at v (MapView.js:35)
 at y (MapView.js:38)
 at Object.m.createAsync (MapView.js:45)
 at Object.m.goTo (MapView.js:15)
 at esriLoader.require.Viewpoint.generateRandomPoints (AngularMap.html:115)
 at AngularMap.html:249
 at angular-esri-map@2.0.1:118
 at processQueue (angular.js:15961)
 at angular.js:15977
 at Scope.$eval (angular.js:17229)

RobertScheitlin__GISP · ‎01-13-2017

Seth,

your issue was how you were using the goto and the fact that the map was not ready yet.

Make this one little change:

            setTimeout(function(){
              view.goTo({target: point, zoom: 12});
            }, 200);‍‍‍

View solution in original post

RobertScheitlin__GISP · ‎01-13-2017

Seth,

your issue was how you were using the goto and the fact that the map was not ready yet.

Make this one little change:

            setTimeout(function(){
              view.goTo({target: point, zoom: 12});
            }, 200);‍‍‍

SethPatrich2 · ‎01-13-2017

Thanks Robert, I ended up using a Promise with the MapView before I plot the point.

Do you know how to adjust the animation/duration speeds for the zoom operation in 4.2?

RobertScheitlin__GISP · ‎01-13-2017

Sure it is:

view.goTo({target: point, zoom: 12}, {duration: 2000});