MapView goTo Zooming Units are Off? Issues with Zooming

JakeErickson · ‎02-21-2020

I am working on querying a feature layer to draw an outline for a parcel and then zooming to the highlighted parcel. However when attempting to call view.goTo after querying the feature layer and successfully drawing the graphic in the map, the view proceeds to zoom out into the middle of Africa rather than over my highlighted parcel in Coconino County Arizona. I would think what I am trying to do is a simple fix.

In my MapView object I set the center to be [-112.500, 37.0000], a lat, long; however the units of my graphic appears to be esriFeet as determined in the feature layer url: https://services1.arcgis.com/Rlvx5g8pKeK13apH/ArcGIS/rest/services/CountyParcels/FeatureServer

Is that the issue with this zooming incorrectly? If so, what can I do to convert/fix the units?

I have attached some screenshots of the graphic actually drawing on the feature layer along with the console output to get an idea of what the x and y are that we are trying to zoom to.

I would REALLY appreciate a response or at least some guidance as to what I am doing wrong. Feel free to ask me any questions you may have. Thanks for your help!

Here is my source code:

<html>
<head>
<meta name="description" content="ArcGIS JavaScript Tutorials: Query a feature layer">
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>Account ArcGis View</title>
<style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.11/esri/css/main.css">

<script src="https://js.arcgis.com/4.11/"></script>
<script src="./Utils/ArcGisWebUtils.js"></script>
</head>
<script>
require([
   "esri/Map",
    "esri/views/MapView",
    "esri/layers/FeatureLayer",
    "esri/Graphic",
    "esri/layers/GraphicsLayer"
    ],
    function(Map, MapView,FeatureLayer,Graphic,GraphicsLayer) {

   var map = new Map({
        basemap: "streets"
      });

   var layerUrl = getParcelLayerUrl();
   var parcelName = getParcelName();
   var parcelNumber = getParcelNum();
   var sql = parcelName + " = '" + parcelNumber + "'";
   var arrayOfColors = getOutlineColor().split(",");

     var view = new MapView({
       container: "viewDiv",
       map: map,
       center: [-112.500, 37.0000],
       zoom: 7
     });

      var featureLayer = new FeatureLayer({
          url: layerUrl,
        });
      map.add(featureLayer,0);

       var graphicsLayer = new GraphicsLayer();
      map.add(graphicsLayer);

       view.when(function(){
           queryFeatureLayer(sql);
    });

       function addGraphics(result) {
           graphicsLayer.removeAll();
           result.features.forEach(function(feature){
               console.log(feature.attributes);
             var g = new Graphic({
               geometry: feature.geometry,
               attributes: feature.attributes,
               symbol: {
                type: "simple-fill",
                color: "white",
               style: "diagonal-cross",
                 outline: {
                  width: 2,
                  color: [arrayOfColors[0],arrayOfColors[1], arrayOfColors[2], 1.0],
                },
                 size: "20px"
               },
             });
             graphicsLayer.add(g);
             //Zooming is off!
             var geo = view.center;
             geo.x = g.geometry.extent.xmax;
             console.log(geo.x);
             geo.y = g.geometry.extent.ymax;
             console.log(geo.y);
             view.goTo({geometry: geo, zoom: 15});
           });
         }

       function queryFeatureLayer(sqlExpression) {
           var query = {
                   spatialReference: view.spatialReference,
             outFields: ["*"],
             returnGeometry: true,
             where: sqlExpression
           };
           featureLayer.queryFeatures(query).then(function(result) {
             addGraphics(result, true);
           });
         }

});
</script>
</head>

</html>

RobertScheitlin__GISP · ‎02-21-2020

Jake,

You have a few issues in your code. Here a working version. I did not have access to all your functions so I hard coded some values in.

<html>

<head>
  <meta name="description" content="ArcGIS JavaScript Tutorials: Query a feature layer">
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>Account ArcGis View</title>
  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>
  <link rel="stylesheet" href="https://js.arcgis.com/4.11/esri/css/main.css">

  <script src="https://js.arcgis.com/4.11/"></script>
  <script src="./Utils/ArcGisWebUtils.js"></script>
</head>
<script>
  require([
      "esri/Map",
      "esri/views/MapView",
      "esri/layers/FeatureLayer",
      "esri/Graphic",
      "esri/layers/GraphicsLayer"
    ],
    function (Map, MapView, FeatureLayer, Graphic, GraphicsLayer) {
      var map = new Map({
        basemap: "streets"
      });

      var layerUrl = 'https://services1.arcgis.com/Rlvx5g8pKeK13apH/ArcGIS/rest/services/CountyParcels/FeatureServer/0';
      var parcelName = 'APN';//getParcelName();
      var parcelNumber = '11635047';//getParcelNum();
      var sql = parcelName + " = '" + parcelNumber + "'";
      var arrayOfColors = [255,255,0];//getOutlineColor().split(",");

      var view = new MapView({
        container: "viewDiv",
        map: map,
        center: [-112.500, 37.0000],
        zoom: 7
      });

      var featureLayer = new FeatureLayer({
        url: layerUrl,
        outFields: ["*"]
      });
      map.add(featureLayer, 0);

      var graphicsLayer = new GraphicsLayer();
      map.add(graphicsLayer);

      view.when(function () {
        queryFeatureLayer(sql);
      });

      function addGraphics(result) {
        graphicsLayer.removeAll();
        result.features.forEach(function (feature) {
          // console.log(feature.attributes);
          var g = new Graphic({
            geometry: feature.geometry,
            attributes: feature.attributes,
            symbol: {
              type: "simple-fill",
              color: "white",
              style: "diagonal-cross",
              outline: {
                width: 2,
                color: [arrayOfColors[0], arrayOfColors[1], arrayOfColors[2], 1.0],
              }
            },
          });
          graphicsLayer.add(g);
          //Zooming is off!
          // var geo = view.center;
          // geo.x = g.geometry.extent.xmax;
          // console.log(geo.x);
          // geo.y = g.geometry.extent.ymax;
          // console.log(geo.y);          
          // view.goTo({
          //   geometry: g.geometry,
          //   zoom: 15
          // });
          view.goTo(g);
        });
      }

      function queryFeatureLayer(sqlExpression) {
        var query = featureLayer.createQuery();
        query.where = sqlExpression;
        query.outSpatialReference = view.spatialReference;
        // var query = {
        //   spatialReference: view.spatialReference,
        //   outFields: ["*"],
        //   returnGeometry: true,
        //   where: sqlExpression
        // };
        featureLayer.queryFeatures(query).then(function (result) {
          addGraphics(result, true);
        });
      }
    });
</script>
</head>

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

View solution in original post

RobertScheitlin__GISP · ‎02-21-2020

Jake,

You have a few issues in your code. Here a working version. I did not have access to all your functions so I hard coded some values in.

<html>

<head>
  <meta name="description" content="ArcGIS JavaScript Tutorials: Query a feature layer">
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>Account ArcGis View</title>
  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>
  <link rel="stylesheet" href="https://js.arcgis.com/4.11/esri/css/main.css">

  <script src="https://js.arcgis.com/4.11/"></script>
  <script src="./Utils/ArcGisWebUtils.js"></script>
</head>
<script>
  require([
      "esri/Map",
      "esri/views/MapView",
      "esri/layers/FeatureLayer",
      "esri/Graphic",
      "esri/layers/GraphicsLayer"
    ],
    function (Map, MapView, FeatureLayer, Graphic, GraphicsLayer) {
      var map = new Map({
        basemap: "streets"
      });

      var layerUrl = 'https://services1.arcgis.com/Rlvx5g8pKeK13apH/ArcGIS/rest/services/CountyParcels/FeatureServer/0';
      var parcelName = 'APN';//getParcelName();
      var parcelNumber = '11635047';//getParcelNum();
      var sql = parcelName + " = '" + parcelNumber + "'";
      var arrayOfColors = [255,255,0];//getOutlineColor().split(",");

      var view = new MapView({
        container: "viewDiv",
        map: map,
        center: [-112.500, 37.0000],
        zoom: 7
      });

      var featureLayer = new FeatureLayer({
        url: layerUrl,
        outFields: ["*"]
      });
      map.add(featureLayer, 0);

      var graphicsLayer = new GraphicsLayer();
      map.add(graphicsLayer);

      view.when(function () {
        queryFeatureLayer(sql);
      });

      function addGraphics(result) {
        graphicsLayer.removeAll();
        result.features.forEach(function (feature) {
          // console.log(feature.attributes);
          var g = new Graphic({
            geometry: feature.geometry,
            attributes: feature.attributes,
            symbol: {
              type: "simple-fill",
              color: "white",
              style: "diagonal-cross",
              outline: {
                width: 2,
                color: [arrayOfColors[0], arrayOfColors[1], arrayOfColors[2], 1.0],
              }
            },
          });
          graphicsLayer.add(g);
          //Zooming is off!
          // var geo = view.center;
          // geo.x = g.geometry.extent.xmax;
          // console.log(geo.x);
          // geo.y = g.geometry.extent.ymax;
          // console.log(geo.y);          
          // view.goTo({
          //   geometry: g.geometry,
          //   zoom: 15
          // });
          view.goTo(g);
        });
      }

      function queryFeatureLayer(sqlExpression) {
        var query = featureLayer.createQuery();
        query.where = sqlExpression;
        query.outSpatialReference = view.spatialReference;
        // var query = {
        //   spatialReference: view.spatialReference,
        //   outFields: ["*"],
        //   returnGeometry: true,
        //   where: sqlExpression
        // };
        featureLayer.queryFeatures(query).then(function (result) {
          addGraphics(result, true);
        });
      }
    });
</script>
</head>

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

JakeErickson · ‎02-21-2020

That worked!!! Thank you very much Robert! I guess I just needed to add outFields to the feature layer rather than the query object, then only set the where clause and spatialReference on the the query. I really appreciate your help!