AnsweredAssumed Answered

featureLayer click event - lang.hitch might help?

Question asked by schlot on Jun 15, 2015
Latest reply on Jun 15, 2015 by schlot

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
}

Outcomes