Help with MapView.goTo not zooming to graphic

2487
1
Jump to solution
02-19-2020 01:54 PM
JakeErickson
New Contributor II

I have a feature layer that I query against to return an outline for a parcel and I want to zoom to the outline of the parcel. I can get the parcel outline to draw on the map using a GraphicLayer, but I cannot for the life of me get it to zoom into the graphic.I am starting to suspect it is because the geometry units are in esriFeet? My code is very simple! I would really appreciate some 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",
    "esri/geometry/support/webMercatorUtils"
    ],
    function(Map, MapView,FeatureLayer,Graphic,GraphicsLayer,webMercatorUtils) {

    var map = new Map({
        basemap: "streets"
      });
    
    var layerUrl = getParcelLayerUrl();
    var parcelName = getParcelName();
    var parcelNumber = getParcelNum();

     var view = new MapView({
       container: "viewDiv",
       map: map
     });
      
      var featureLayer = new FeatureLayer({
          url: layerUrl
        });
      

      //add the feature layer as the base layer
      map.add(featureLayer,0);

       var graphicsLayer2 = new GraphicsLayer();
      map.add(graphicsLayer2);
      
      //start the query for the county boundary
       var queryParcel = featureLayer.createQuery();
       queryParcel.where = parcelName + " = '" + parcelNumber + "'";
       queryParcel.outSpatialReference = view.spatialReference;
       queryParcel.outFields = ['*'];

       view.when(function(){
      view.whenLayerView(featureLayer).then(function(featureLayerView) {
          console.log("nope");
          if (featureLayerView.updating) {
            
            var handle = featureLayerView.watch("updating", function(isUpdating){
              if (!isUpdating) {
                  featureLayer.queryFeatures(queryParcel).then(function(result) {
                    addGraphicsParcelOutline(result)
                });
                handle.remove();
              }
            });            
          } else {
              featureLayer.queryFeatures(queryParcel).then(function(result) {
                addGraphicsParcelOutline(result);
            });
          }
        });
    });

      function addGraphicsParcelOutline(result) {
        graphicsLayer2.removeAll();
        result.features.forEach(function(featured){
        console.log(featured.geometry);
          var outline = new Graphic({
            geometry: featured.geometry,
            attributes: featured.attributes,
            symbol: {
             type: "simple-fill",
             //only want the outline
            style: "none",
              outline: {
               width: 2,
               color: "purple",
             },
              size: "20px"
            },
          });
          console.log("yo");
          console.log(outline.geometry.extent.xmax);
          console.log(outline.geometry.extent.ymax);
          console.log(webMercatorUtils.xyToLngLat(outline.geometry.extent.xmax, outline.geometry.extent.ymax));
         
          graphicsLayer2.add(outline);
      // MapView.goTo sends the map to a location. Reference the API documentation for all the different types of objects you can go to. You can also pass in an Options object to give this functionality an animation.
      
      view.goTo(outline);
      
        });
      }

    });
  </script>
</head>

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

</html>

Tags (2)
0 Kudos
1 Solution

Accepted Solutions
JakeErickson
New Contributor II

I made a bit more progress on this and re-asked this question, then it got answered. https://community.esri.com/thread/248711-mapview-goto-zooming-units-are-off-issues-with-zooming 

View solution in original post

0 Kudos
1 Reply
JakeErickson
New Contributor II

I made a bit more progress on this and re-asked this question, then it got answered. https://community.esri.com/thread/248711-mapview-goto-zooming-units-are-off-issues-with-zooming 

0 Kudos