GoTo zoom to specific LOD not working JS API 4.4

Anonymous User — Sat, 11 Dec 2021 23:00:55 GMT

Hi all,

I am trying to zoom to a parcel so I am using the "goTo" function. It works great. However when I input my target (AOI) and the zoom level (LOD). It does not work. Any idea why?

code to zoom:

function zoomparcel(result){
              var AOI = result.features;
              view.goTo({target: AOI, zoom:15});}
      });‍‍‍‍

code:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  <title>Print widget - 4.4</title>
  <!-- Latest compiled and minified CSS -->
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <link rel="stylesheet" href="https://js.arcgis.com/4.4/esri/css/main.css">

  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
      overflow: hidden;
    }
    #search {
        width: 400px;
        z-index: 1;
        position: absolute;
        left: 80px;
        top: 15px;
    }
  </style>
  <script src="http://code.jquery.com/jquery-3.2.1.min.js"integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
  <!-- Latest compiled and minified JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  <script src="https://js.arcgis.com/4.4/"></script>
  <script>
    require([
        "esri/Map",
        "esri/views/MapView",
        "esri/widgets/Print",
        "esri/tasks/QueryTask", "esri/tasks/support/Query",
        "esri/layers/FeatureLayer",
        "esri/layers/GraphicsLayer",
        "esri/geometry/geometryEngine",
        "esri/Graphic",
        "esri/widgets/BasemapGallery",
        "esri/symbols/SimpleFillSymbol",
        "esri/symbols/SimpleMarkerSymbol",
        "esri/layers/MapImageLayer",

        "dojo/on",
        "dojo/dom",
        "dojo/dom-construct",
        "dojo/domReady!"
      ],
      function(
        Map, MapView, Print, QueryTask, Query, FeatureLayer, GraphicsLayer,
        geometryEngine,
        Graphic,
        BasemapGallery,
        SimpleFillSymbol,
        SimpleMarkerSymbol,
        MapImageLayer,
        on, dom, domConstruct
      ) {
        var map = new Map({basemap: 'topo'});
        //Layers to add
        
        
        var lakes = new FeatureLayer({
            url: "http://gem.edcgov.us/arcgis/rest/services/water/water2SQL_WAB/MapServer/1"
        });

        var rivers = new FeatureLayer({
            url: "http://gem.edcgov.us/arcgis/rest/services/water/water2SQL_WAB/MapServer/0"
        });

        var roads = new MapImageLayer({
            url: "http://gem.edcgov.us/arcgis/rest/services/transpt/Roads/MapServer"
        });

        var Parcels = new MapImageLayer({
    url: "http://gem.edcgov.us/arcgis/rest/services/Sheriff/Parcels/MapServer"
  });
  var image = new MapImageLayer({
    url: "http://gem.edcgov.us/arcgis/rest/services/surface/Aerials_2011_mercator_WAB/MapServer"
  });
  

  var contours = new FeatureLayer({
    url: "http://gem.edcgov.us/arcgis/rest/services/mixed/surface2SQL_WAB/MapServer/16"
  });
  
        
        
        $("#execute").click(function (){
            var value = $( "#searchtext" ).val();
            $(".esri-print__input-text").val("APN " + value).trigger("input");
            console.log(value);
            var queryparcelTask  = new QueryTask({url: "http://gem.edcgov.us/arcgis/rest/services/Sheriff/Parcels/MapServer/0"});
            var query = new Query();
            query.returnGeometry = true;
            query.outFields = ["*"];
            query.where = "PRCL_ID = '" +   value + "'";
           queryparcelTask.execute(query).then(zoomparcel)
           ;
        });

        map.addMany([Parcels, lakes, rivers ]);
        var opts = {
          duration: 5000  // Duration of animation will be 5 seconds
        };
        var view = new MapView({
          container: "viewDiv",
          map: map,
          extent: { // autocasts as new Extent()
            "xmin": -121.11087086999999, "ymin": 38.517479534000074, "xmax": -119.95226375799996, "ymax": 39.068026806000034,
            "spatialReference": { "wkid": 4326 }
          }
        });

        view.then(function() {
          var print = new Print({
            view: view,
            // specify your own print service
            printServiceUrl: "http://gem.edcgov.us/arcgis/rest/services/Alex_test/ExportWebMapAlex6/GPServer/Export%20Web%20Map"
          });

          // Add widget to the top right corner of the view
          view.ui.add(print, "top-right");
        });

        function zoomparcel(result){
              var AOI = result.features;
              view.goTo({target: AOI, zoom:15});}
      });
  </script>
</head>

<body class="calcite">
 <div class="row">
    <div class="col-lg-6">
    <div class="input-group" id="search">
      <input type="text" id="searchtext" class="form-control" placeholder="Enter APN">
      <span class="input-group-btn">
        <button class="btn btn-secondary" type="button" id="execute"><i class="fa fa-search" aria-hidden="true"></i></button>
      </span>
    </div>
  </div>
</div>

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

Re: GoTo zoom to specific LOD not working JS API 4.4

ReneRubalcava — Sun, 06 Aug 2017 00:27:07 GMT

Your map is in spatial reference 4326, but your query results are in 2226.

You need to set the outSpatialReference of the Query to match the map.

query.outSpatialReference = { wkid: 4326 }‍‍‍

I think that will work, I don't know a parcel number to properly test against.

topic Re: GoTo zoom to specific LOD not working JS API 4.4 in ArcGIS JavaScript Maps SDK Questions

GoTo zoom to specific LOD not working JS API 4.4

Re: GoTo zoom to specific LOD not working JS API 4.4