topic Re: MapView goTo Zooming Units are Off? Issues with Zooming in ArcGIS JavaScript Maps SDK Questions

MapView goTo Zooming Units are Off? Issues with Zooming

JakeErickson — Fri, 21 Feb 2020 21:41:14 GMT

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>

Re: MapView goTo Zooming Units are Off? Issues with Zooming

RobertScheitlin__GISP — Fri, 10 Dec 2021 22:03:45 GMT

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>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: MapView goTo Zooming Units are Off? Issues with Zooming

JakeErickson — Fri, 21 Feb 2020 23:02:32 GMT

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!