topic Zoom not working for 2nd set of query results, proxy working only once? in ArcGIS JavaScript Maps SDK Questions

Zoom not working for 2nd set of query results, proxy working only once?

RebeccaStrauch__GISP — Sun, 12 Dec 2021 07:26:19 GMT

I'm modifying some Javascript 3.x code written by previous staff member. I had to "fix" a cross-domain and proxy issue to get around the token timing out every year. To do that, I adding a ProxyRule that points to our common proxy on another machine.

Initiall, this all seems to be working as expected. I user fills out the query boxes and selects "Find Places", which returns a table of attributes. The user can than click on different items in the table and the map will zoom. The click-zoom can be done multiple times and it works.

However, I noticed that although the "click to zoom" works for the first set of results, if the user performs another query, the table gets populated correctly but "click to zoom" will draw but not zoom. I know it is drawing since I can zoom out and see the polygon change as I select different items in the table.

The "placename" query which returns a table of items to click, I believe, is c# code (that I would rather not touch,) and the query seems to be working just fine. My new esri.layers.FeatureLayer uses the MODE_SNAPSHOT. I have tried the other options thinking ONDEMAND might work better, but that seems to make it worse (i.e. the zoom after the 1st query is hit and miss).

I was developing in Firefox developer tools, but that provided no addition help I could interpret. So I took a look at the developer tools in Chrome, I'm starting to thing that my proxy is working with my secure service the first time, but not with the second placename query OR I am missing a line to retrieve a new set of data from the service. The error is

dojo.io.script error
k {message: "Request canceled", response: Object, log: undefined, stack: "Error: Request canceled
at new k (https://js.a…is.com/3.7/js/esri/layers/SnapshotMode.js:20:263)"}
Uncaught TypeError: Cannot read property '_jsonpCallback' of undefined
proxy.ashx?https://<my Service URL>/MapServer/0/query?f=js…:1 Uncaught TypeError: Cannot read property '_jsonpCallback' of undefined
at proxy.ashx?https://<my Service URL>/MapServer/0/query?f=js…:1

Services are from ArcGIS Server 10.2.1 (will eventually to 10.5.1). This is an internal only site so can not provide a sample.

Edit: I will add that am seeing an error in Firefox when it fails

TypeError: dojo.io.script.jsonp_dojoIoScript_UCU_Codes00 is undefined

Any help would be appreciated. Thanks

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=7, IE=9, IE=10">
    <!--The viewport meta tag is used to improve the presentation and behavior
    of the samples on iOS devices-->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Internal UCU Mapper</title>

    <link rel="stylesheet" href="//js.arcgis.com/3.7/js/dojo/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="//js.arcgis.com/3.7/js/esri/css/esri.css">
    
    <style>
      html,body { height:100%; width:100%; margin:0; padding:0; } 
      body { 
        background:#dfe5d7;
        font-family:"Georgia,Verdana";
      }
      span{ font-weight:bold; color:#808080; text-align:left; }
      .inset{ 
        color: #d7decf;
        text-shadow: 0px 2px 2px #808080;
        font-weight:bold;
      } 
      #header {
         background: #fcfff4; /* old browsers */
        background: -moz-linear-gradient(left, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%); /* firefox */
        /* filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#b3bead',GradientType=1 ); */ /* ie */
        border:solid 1px #398235; 
        height:80px; 
          padding:0;
        margin:0;
       } 
       #map  {
      position:absolute;
       padding: 0;
      margin: 0;
      height: 100%;
       left:310px;
      
      } 
      .claro .dijitContentPane {
        padding: 0;
      }
      .maptitle{
        padding-left:15px; 
        font-size:32px;
      }
      .subtitle { 
        font-size:14px; 
        padding-left:40px;
        color:#462D44; 
      }
      #leftpane { 
       position:absolute;
        border:none;
       background:none;
       color:#462D44; 
       font-size:8pt;
       height:100px; 
       padding: 15px;
       text-align:left;
        width:300px;
        margin:0;
      }
    </style>

 
    <script src="//js.arcgis.com/3.7/"></script>
    <script> 
        var map, featureLayer;
        
        require([
          "dijit/layout/BorderContainer",
          "dijit/layout/ContentPane",
          "esri/map", 
          "esri/layers/FeatureLayer",
          "dijit/form/FilteringSelect",
          "dijit/form/ComboBox",
          "dojox/grid/DataGrid",
          "dojo/data/ItemFileReadStore",
          "esri/tasks/QueryTask",
          "esri/tasks/query",
          "esri/dijit/Scalebar",
          "esri/urlUtils",
          "dijit/registry", 
          "dojo/dom", 
          "dojo/on",
          "dojo/parser",
          "dojo/domReady!"
          ], 
          
          function(
          BorderContainer,
          ContentPane,
          Map,
          FeatureLayer,
          FilteringSelect,
          ComboBox, 
          DataGrid,
          ItemFileReadStore,
          QueryTask,
          query,
          Scalebar,
          urlUtils,
          registry, 
          dom, 
          on, 
          parser
          ) 
          
          {      
               parser.parse();
                
               //    function init() {  // using init() seems to cause issues with IE

               //  on(dom.byId("grid"), "onRowClick", onRowClickHandler);  //this had to be done in the function itself
               on(dom.byId("btnexecute"), "click", executeTask);
                                
               var initExtent = new esri.geometry.Extent({"xmin":-1025000,"ymin":520000,"xmax":1400000,"ymax":2400000,"spatialReference":{"wkid":3338}});
               map = new esri.Map("map",{extent:initExtent});
                    
               dojo.connect(window, 'resize', map, map.resize);
               
               //Add Scalebar
               var scalebar = new esri.dijit.Scalebar({
                    map: map,
                    scalebarUnit: "english",
                    attachTo: "bottom-left"
                    }); 
                    
               // Proxy and CORS set for secure services; 
               //     ... zoom working on 1st query set only....hmmm

               //     ......my proxy stuff
               urlUtils.addProxyRule({ urlPrefix: "https://<Service URL/webadaptor>", proxyUrl: "https://<Service URL and path to proxy>.ashx"});
               
               esriConfig.defaults.io.proxyUrl = "https://<Service URL and path to proxy>.ashx";
               esriConfig.defaults.io.alwaysUseProxy = false;
               esriConfig.defaults.io.corsDetection = false;
          
               var protocol = window.location.protocol;
            
               //Add adfg USAtopoArcOnline in alaska Albers as basemap
               var basemap = new esri.layers.ArcGISTiledMapServiceLayer("<myBaseMapURL>/MapServer");
               map.addLayer(basemap);
        
               //Add subunits
               var subs = new esri.layers.ArcGISDynamicMapServiceLayer("<mySubunitsURL>/MapServer");
               map.addLayer(subs);

               //Add ucu boundaries, will not show until zoomed in a bit
               var ucu = new esri.layers.ArcGISDynamicMapServiceLayer(protocol + "<mySecureServiceURL>/MapServer");
               map.addLayer(ucu);
               
               //Add ucu label layer that is used for queries and zooming
               //MODE_SNAPSHOT
               var ucu_label = new esri.layers.FeatureLayer(protocol + "<mySecureLServiceLabelsURL>/MapServer/0", {
                    mode: esri.layers.FeatureLayer.MODE_SNAPSHOT,
                    outFields: ["*"]
                    });
               ucu_label.setMinScale(0);

               var theucu = 'XXXXX';
               var layerdef = "ucu="+"'"+theucu+"'";

               ucu_label.setDefinitionExpression(layerdef);
               //since the label polygons are hollow we need to display selected polygon
               var symbol2 = new esri.symbol.SimpleFillSymbol(
                                 esri.symbol.SimpleFillSymbol.STYLE_SOLID,
                                 new esri.symbol.SimpleLineSymbol(
                                    esri.symbol.SimpleLineSymbol.STYLE_SOLID,
                                   new dojo.Color([0, 0, 0, .7]), 3
                                 ),
                                new dojo.Color([125, 125, 125, 0.35])
                               );
               ucu_label.setRenderer(new esri.renderer.SimpleRenderer(symbol2));
               
               //one way of zooming to layer
               //dojo.connect(ucu_label, "onUpdateEnd", ucu_zoom);
                    
               map.addLayer(ucu_label);
           
               //one way of zooming to layer
               dojo.connect(ucu_label, "onUpdateEnd", function () {
                    var zoomExtent = esri.graphicsExtent(ucu_label.graphics);
                    map.setExtent(zoomExtent.expand(1.25),true);
                    map.refresh();
                    map.setExtent(initExtent,true);
               }); // now the zoom won't happen until map is updated
          
               function onRowClickHandler(evt){
                    // alert("I am an alert box!");
                    var clickeducu = grid.getItem(evt.rowIndex).ucu;
                    layerdef = "ucu="+"'"+clickeducu+"'";
                    ucu_label.setDefinitionExpression(layerdef);
               }
        
               function executeTask(){
                    if (mySelect.value.length !=3 ){
                         return;
                    }     
                    if (mySelect.value.length == 3){
                         var querywhere = "gmu="+"'"+mySelect.value+"'";
                    }
                    if (mySelect.value.length ==3 && placetxt.value.length>0){
                         querywhere = "gmu="+"'"+mySelect.value+"'"+" and place like"+"'%"+placetxt.value+"%'";
                    }
               
                    // var querywhere = "gmu="+"'"+mySelect.value+"'"+" and regyear=2000";
                    var queryTask = new esri.tasks.QueryTask("/SpatialService/PlacenameService.ashx");
                    var query = new esri.tasks.Query();
                    query.returnGeometry=false;
                    query.outFields = ["placename_id","ucu","place", "gmu"];
                    query.where = querywhere;
                    // query.where = "gmu='01C' and place like '%creek%'";
                    dojo.connect(queryTask,"onComplete",function(featureSet){
                         //build an array of attributes
                         var items = dojo.map(featureSet.features,function(feature){
                              return feature.attributes;
                         });
                         var data = {identifier:"placename_id", items:items};
                         store = new dojo.data.ItemFileReadStore({data:data});
                         grid.setStore(store);
                         grid.setSortIndex(0,"true"); //sort on the place name
                         grid.on("click", onRowClickHandler);
                         // on(dom.byId("grid"), "onRowClick", onRowClickHandler);
                    });

                    queryTask.execute(query);
               }   
          });          
   
    </script>
  </head>
  
  <body class="claro">
    <div id="mainWindow" 
        data-dojo-type="dijit.layout.BorderContainer" 
        data-dojo-props="design:'headline', gutters:false" 
        style="width: 100%; height: 100%; margin: 0;">

          <div id="header" 
               data-dojo-type="dijit.layout.ContentPane" 
               data-dojo-props="region:'top'">
               <span class="inset maptitle">Alaska Fish and Game UCU Lookup</span>
               <br>
               <span class="subtitle">View the placenames associated with UCU's and view the UCU on a map</span>
          </div>

          <div id="leftpane" 
           data-dojo-type="dijit.layout.ContentPane" 
           data-dojo-props="region:'left'" >
        <div style="height:24px;padding-bottom 4px;text-align:left;">
          First select a GMU (required). 
            <br>
            <CFOUTPUT>
            <select id="mySelect" data-dojo-type="dijit.form.ComboBox" style="width:200px;font-size:16p;"
          value="Select a GMU"  >
             <CFLOOP query="GMUS">
                    <OPTION VALUE="#gmus.GMU#">#gmus.GMU#</option>
               </CFLOOP>
           </cfoutput>     
          </select>
         </div>           
     <br>
     Then type a place name string or leave blank
     <br>
         <input type="text" id="placetxt" value="" ></input> 
     <br> 
          
     Next hit the "Find places" button 
     <br>
        <!--- <input id="btnexecute" type="button" value="Find places" onclick="executeTask()"></input> --->
          <button id="btnexecute"  data-dojo-type="dijit/form/Button" type="button">Find places</button>
     <br>
     <br>
     Double click on a results row to view UCU on the map
     <br>
     Note: not all UCU's' are mappable, for example 0000 minors
     <br>
     <br>
    
     <table dojoType="dojox.grid.DataGrid" jsid="grid" id="grid" rowSelector="20px" height="100%" width="200px">
      <thead>
        <tr>
          <th field="place" width="140px">Place</th>
          <th field="ucu" width="80px">UCU</th>
                   
        </tr>
      </thead>
    </table>
      </div>
     
      <div id="map"
           data-dojo-type="dijit.layout.ContentPane"
           data-dojo-props="region:'center'" style="overflow:hidden;">
      </div>
     
    </div>
  </body>
</html>

‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

BTW, not that this should matter, but this still does use some ColdFusion code.

Re: Zoom not working for 2nd set of query results, proxy working only once?

RobertScheitlin__GISP — Sun, 12 Dec 2021 07:26:22 GMT

Rebecca,

This code logic seems to be pretty suspect:

               //one way of zooming to layer
               dojo.connect(ucu_label, "onUpdateEnd", function () {
                    var zoomExtent = esri.graphicsExtent(ucu_label.graphics);
                    map.setExtent(zoomExtent.expand(1.25),true);
                    map.refresh();
                    map.setExtent(initExtent,true);
               }); // now the zoom won't happen until map is updated‍‍‍‍‍‍‍

Basically you are saying every time the ucu_label layer has finished drawing you zoom to the layers graphics extent, refresh, and then you try and set the extent back to the initial extent... The one setExtent is canceling the second, and why is this being called every time the layer finishes drawing?..

Re: Zoom not working for 2nd set of query results, proxy working only once?

RebeccaStrauch__GISP — Thu, 06 Jul 2017 22:25:07 GMT

Thanks for the response Robert. I had noticed that right after posting and played around with commenting out for line 6 and line 5/6, but no change in behavior. There are some comments in the code that makes me think he tried a different way of getting the initial site to work, and this seems to make it work...but commenting it out doesn't seem to hurt either. I am not sure if my issue is something new because of the proxy, of if it was always that way. It is not a page I use often (but other staff do).

I did a few other searched and found ArcGIS Javascript API - Proxy Page which got me to look at my proxy.log. But I'm also going to try the suggested addition to the web.config file for the proxy. Not sure if that will help, but can't hurt to try.

I also came across another thread https://community.esri.com/thread/96899 that mentioned adding a javascript timeout value of 10ms when dealing with a refresh(). I know I have to do this occasionally for Python scripts since it returns before the OS has had time to catch up. But I haven't quite figure out how to add a timeout, and where I would add a time out. As you know, my JS skills are a very small fraction compared to yours.

Re: Zoom not working for 2nd set of query results, proxy working only once?

RobertScheitlin__GISP — Thu, 06 Jul 2017 23:41:58 GMT

Rebecca,

So before you added the proxy you did not have this issue, but you have a token timeout once a year?

Re: Zoom not working for 2nd set of query results, proxy working only once?

RebeccaStrauch__GISP — Sun, 12 Dec 2021 07:26:25 GMT

I'm not sure if there was an issue before or not. As mentioned, I don't use it much, and I just called the person that first reported the issue caused by the proxy token timeout, and she doesn't remember either.

So, as a band-aid (since it will draw the graphic), I've change the dojo.connect around a little to set the zoom to the initial/full extent so at least the user will see the graphic draw and can manually zoom. Not ideal, but better than nothing. They can also reload the whole page and get it to work as it is meant to, with the first query anyway.

dojo.connect(ucu_label, "onUpdateEnd", function () {
                    map.setExtent(initExtent,true);
                    var zoomExtent = esri.graphicsExtent(ucu_label.graphics);
                    map.setExtent(zoomExtent.expand(1.25),true);
                    map.refresh();
                    //map.setExtent(initExtent,true);
               }); ‍‍‍‍‍‍‍‍‍‍‍‍‍‍

I still think I am just missing something in the code to get lines 3/4 to update the extent correctly after the 2nd query. My thought is that after the initial query, the next query maybe is filtering what is return for the ucu_label.graphics based on the extent of the first query???? I have no idea if that would make sense or not, and there is the blackbox of the

var queryTask = new esri.tasks.QueryTask("/SpatialService/PlacenameService.ashx");

which refers to a compiled .cs file. BTW - the Placenames is an external table which is basically a a many to one (UCU) polygon. Probably should have mentioned that, but since the Placenames query seems to work just fine, and the user only clicks on one of the returned records for it to zoom to the UCU, I don't think that would be the issue. (sorry that I left that that out, if it might make a difference).

Although I would love to figure this out, and I'm learning a lot messing with this, it's getting to the point that they may just have to live with it (Spent most the day on it). Getting the token to not time out each year was really the priority since (remembering and) getting the tokens setup for this server every year is a headache. Having it managed on our side (GIS) vs. on a different groups (non-GIS) server makes it easier in the long run.

I'll leave this open until Monday (off Friday) and may try tech support if no resolved before then. But after that I'll probably just give it up. Just a pain if they need it for more than one query in a session.