AnsweredAssumed Answered

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

Question asked by rastrauch Champion on Jul 6, 2017
Latest reply on Jul 6, 2017 by rastrauch

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.

Outcomes