featureLayer click event - lang.hitch might help?

TracySchloss — Sat, 11 Dec 2021 09:51:25 GMT

I have a featureLayer with a lot of points that's based on an XY event from a external database. I also have a definition expression that's rather long and an extent change handler that's populating a dGrid.

All of these are performance issues, I know. This is working well in general except for the click event I have on my dgrid. It's locking up regularly and I think's it's because it's not finishing the query/drawing. I can see I have several lines in my debugger that are 'pending'.

I don't the hang of using lang.hitch yet and I think it might help me. I'd like to have it zoom to the feature when it's clicked if it's zoomed out pretty far. If it's zoomed already, then I only want to pan to the point before I display the info tag.

I haven't had it lock up on me at all when I'm not also trying to pan or zoom. I'm using a bootstrap-map and the info tags for it don't have the same 'Zoom To' link at the bottom that the standard popups do. Maybe an alternative is to introduce that into my popup instead. I'm not sure how to go about that.

Here's the relevant code:

//functions for populating the grids, limited to features in current extent 
 function updateGrid(){
   showLoading();  //shows spinning loading image
   var query = new Query();
   query.where = '1=1';//note:  featureLayer already has a definition expression defined
   query.geometry = app.currentExtent;  //currentExtent set by map extent-change handler
   app.featureLayer.on("selection-complete", featureLayerQueryHandler);
   app.featureLayer.selectFeatures(query);
 }

  function featureLayerQueryHandler(response){
    var data = [];
    if (app.datagrid){
      app.datagrid.refresh();
    }
    if (response.features.length == 0) {
      dom.byId('gridHeader').innerHTML = "No "+searchType + " providers available in this area."
    }else{
      if (searchType.length > 0){
        dom.byId('gridHeader').innerHTML = searchType+ " providers in this area:"
      }else{
        dom.byId('gridHeader').innerHTML = "Providers in this area:"
      }
    }
      data = arrayUtils.map(response.features, function(feature){
        var provTest = findProvCode(feature.attributes.ID_PROV_TYPE_FK);
          if (!provTest){  //if a code isn't found in the provider table,just show the code
            provTest = feature.attributes.ID_PROV_TYPE_FK;
          }  
        var specTest = findSpecCode(feature.attributes.ID_SPECIALTY_FK);
          if (!specTest){ //if a code isn't found in the speciality table, just show the code
            specTest = feature.attributes.ID_SPECIALTY_FK;
          }
          return {
              'id': feature.attributes.ESRI_OID,
              'facility': feature.attributes.NA_PROVIDER,
              'address': feature.attributes.AD_LINE1,
              'address2':feature.attributes.AD_LINE2,
              'city': feature.attributes.AD_CITY,
              'state': feature.attributes.AD_STATE,
              'phone':phoneFormatter(feature.attributes.PH_NUMBER),
              'zip':feature.attributes.AD_ZIP_CODE,
              'provider':provTest,
              'specialty':specTest
          };
      });
      var currentMemory = new Memory({
          data: data,
          idProperty: 'id'
      });
      app.datagrid.set('store', currentMemory);
      app.datagrid.sort('facility');


      app.datagrid.on('.dgrid-row:click', function(event){
        var row = app.datagrid.row(event);
        var gridQuery = new Query();
        gridQuery.objectIds = [row.data.id];
        app.featureLayer.queryFeatures(gridQuery, function(results){
            if (results.features.length > 0) {
              var feature = results.features[0];
              feature.setInfoTemplate(app.infoTemplate);
              var resultGeometry = results.features[0].geometry;
              app.map.infoWindow.setFeatures(results.features);
              app.map.infoWindow.show(resultGeometry);
              var currentZoom = app.map.getZoom();

//this is where I attempted to show the information tag after the map has zoomed or panned
           /*   if (currentZoom > 12) {
                app.map.centerAt(resultGeometry, 12)
.then(lang.hitch(this, function(){
                  app.map.infoWindow.setFeatures(results.features);
                  app.map.infoWindow.show(resultGeometry);                 
                }));
*/
          /*    }
              else {
                app.map.centerAndZoom(resultGeometry, 12)
.then(lang.hitch(this, function(){
                  app.map.infoWindow.setFeatures(results.features);
                  app.map.infoWindow.show(resultGeometry);
                  
                }));


              }*/
                  app.map.infoWindow.setFeatures(results.features);
                  app.map.infoWindow.show(resultGeometry);  
            }
            else {
              console.log("error in grid.on click function");
            }
         }); //end queryFeatures
      });  //end grid click
hideLoading();// turns off spinning load image
}

Re: featureLayer click event - lang.hitch might help?

thejuskambi — Mon, 15 Jun 2015 14:43:26 GMT

lang.hitch is used to change the context of the method. for example, you have method in side your widget/ module and you want to use those methods within the event execution/ or arrayUtils.forEach. such methods or events change the context of the function, you may not be able to get access to your method or variable.

In your case I don't see the need for lang.hitch as you are not using any object/function which is not accessible globally.

About your problem, what exactly do you mean by "locking"?

Re: featureLayer click event - lang.hitch might help?

TracySchloss — Mon, 15 Jun 2015 14:59:42 GMT

I only tried the lang.hitch because it was a solution to a problem I had just the other day. I tried it first w/o it. It would work for 2-3 grid clicks and then decide not to. When I say 'locking up', I mean my entire browser session acts like it's not working. If you wait a long time (at least 30 seconds) often the info tag will eventually draw. That's way too long for a user to wait. If you click the record enough times, eventually the browser (Chrome) becomes non-responsive and I've had to go into Task Manager and kill it.

I'm also seeing graphic drawing time out errors in the console that I was told relate to drawing of featureLayers that start before the map is done panning/zooming. The lang.hitch was supposed to help with that.

Here's a link to where I'm testing this. I took out the lang.hitch lines.

My Third Bootstrap

topic featureLayer click event - lang.hitch might help? in ArcGIS JavaScript Maps SDK Questions

featureLayer click event - lang.hitch might help?

Re: featureLayer click event - lang.hitch might help?

Re: featureLayer click event - lang.hitch might help?