JavaScript Data Grid - Zooming to Feature with a Single Click Issue

[IanPeebles]

I have a JavaScript application and add-in tool that allows an end user to zoom to a feature on the map with a single click.  However, when doing so, the user can repeat this a few times, then I get an error in console mode that states 'unable to complete operation'. Then zooming to the feature turns into a double click on the zoom icon.  This issue is very random.  I want the single click on the feature to work at all times.  Has anyone else experienced this issue?

This issue is so random and is not specific to any particular feature.  You can single click 10 times, then you run into a feature that requires a double click, another with a double click, then back to a single click.

Here is a link to my application:

Art in Public Places

I would appreciate any feedback.  Also, would there be a better solution to populate a grid and zoom to feature?

Thank you for any feedback.

Ian

[RickeyFight]

Ian,

I am sure you have put a lot of time into the application.

What about a story map?

Here is an example of public art story map

http://gis.ashland.or.us/publicart/

[IanPeebles]

Rickey,

Thank you for the feedback.  We reviewed the Story map, but it does not meet our needs.  We are currently looking to migrate to a WAB application with a custom list widget.

Here is a link to the test application:

Art in Public Places

We are trying to move to this application because it is more mobile friendly.

The problem is that there appears to be a bug with the zoom.  The following line of code works, but gets cranky at random:

          var publicArtExtent = features[0].geometry;

          this.map.centerAndZoom(publicArtExtent, .50);

I have ESRI looking into this issue.  I want the user to be able to center and zoom in on the feature.

I am using ArcGIS Server 10.1 SP1 and we are planning to migrate soon.  There is also a known bug, where you use this block of code for zooming to a feature with a single click in the datagrid:

        statesLayer.on("load", function(evt) {
          var query = new Query();
          query.where = "1=1";
          evt.layer.queryFeatures(query, function(featureSet) {
            var items = array.map(featureSet.features, function(feature) {
              return feature.attributes;
            });

            //idProperty must be set manually if value is something other than 'id'
            var memStore = new Memory({
              data: items,
              idProperty: "OBJECTID"
            });
            window.grid.set("store", memStore);
            window.grid.set("sort", "NAME");

            grid.on(".field-OBJECTID:click", function(e) {
              //retrieve the ObjectId when someone clicks on the magnifying glass
              if (e.target.alt) {
                zoomRow(e.target.alt);
              }
            });
          });
        });

The problem is where you use a query.where 1=1 then refresh the map, the data grid and feature layer does not display until you refresh again.  To remedy this problem, the following code was added in:

        this.publicartFL.on("load", lang.hitch(this, function () {

          var time = Math.floor(Math.random() * 1000);

          var requestUrl = "http://gis.edmondok.com/arcgis/rest/services/Parks/PublicArt/MapServer/0/query?where=1%3D1&outFields...=" + time;

          var request = new esriRequest({

            'url': requestUrl,

            'content': {

              'f': "json"

            },

            'callbackParamName': "callback"

          });

This works if you refresh the application and the data grid and feature layer always displays.

This seems to be a nasty bug. But it also seems to be a lose lose situation.

Ian

[RickeyFight]

I am surprised you cannot have it zoom to a certain scale.

[IanPeebles]

Rickey,

I can give it a shot.  Do you have the logic you can share?  I will try anything that will help get me past the issue.  Not sure if you tried the application, but you may be able to find out what I have been experiencing.

Again, thank you much for your responses.

Ian

[RickeyFight]

Ian,

I do not have a zoom too button on the grid in this Application  but when you click on a row after searching you can see that it zooms to a certain scale and no farther.

Here is the code I used to zoom to a point in a Dgrid

// zoom to point. The fuction does not work quite the same as zoom to polygon 
function onRowClickHandler(evt) {        
    selection.clear();    
     
  var clickedTaxLotId = evt.grid.getItem(evt.rowIndex).Longitude;                  
 var selectedTaxLot = arrayUtils.filter(queryLayer.graphics, function (graphic) {                      
  return ((graphic.attributes) && graphic.attributes.Longitude === clickedTaxLotId);  
  });                                                                             
                    
selection.add(new Graphic(new Point(selectedTaxLot[0].geometry.x, selectedTaxLot[0].geometry.y, map.spatialReference)));
                                      
//CREATE THE POINT WITH THE SELECTED ROW  
  var center2 = [selectedTaxLot[0].geometry.getLongitude(), selectedTaxLot[0].geometry.getLatitude()];  
//ZOOM LEVEL  -- the greater the zoom value the closer in the zoom with go when selected. 
  var zoom2 = 20;  
//CENTER AND ZOOM  
 map.centerAndZoom(center2, zoom2);                      
            }