nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Can't zoom to feature from Datagrid

RyanSellman

I have a find task in my application that returns features that are points, lines and polygons. I can get the search to populate the datagrid but I am having problems with my onRowClickHandler function and zooming to those features from the datagrid. I've been searching through the forums and see that zooming to a point from the datagrid has been an issue for others, but I can't find a solution that works for me. Here is some code that shows the findtask and what I have for the onRowClickHandler function.

I get the error: "Uncaught TypeError: Cannot read property 'getExtent' of undefined" when the onRowClickHandler function is fired.

findDistrictTask = new FindTask("http://summitgis.summitoh.net:6080/arcgis/rest/services/DOES/MapServer/");          map.on("load", function () {             findDistrictParams = new FindParameters();             findDistrictParams.returnGeometry = true;             findDistrictParams.layerIds = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];             findDistrictParams.searchFields = ["NAME, UNAME, PUMPID, PIPEID, PlantID, Name"];             findDistrictParams.outSpatialReference = map.spatialReference;         });          function doDoesDistrictFind() {             findDistrictParams.searchText = dom.byId("doesDistrictText").value;             findDistrictTask.execute(findDistrictParams, showResults);         }           function showResults(results) {             var markerSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_SQUARE, 10, new SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255, 0, 0]), 1), new dojo.Color([0, 255, 0, 0.25]));             var lineSymbol = new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASH, new dojo.Color([255, 0, 0]), 1);             var polygonSymbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_NONE, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASHDOT, new dojo.Color([255, 0, 0]), 2), new dojo.Color([255, 255, 0, 0.25]));             map.graphics.clear();             var dataForGrid = [];             arrayUtils.map(results, function (result) {                 var graphic = result.feature;                 dataForGrid.push([result.layerName, result.foundFieldName, result.value]);                 switch (graphic.geometry.type) {                 case "point":                     graphic.setSymbol(markerSymbol);                     break;                 case "polyline":                     graphic.setSymbol(lineSymbol);                     break;                 case "polygon":                     graphic.setSymbol(polygonSymbol);                     break;                 }                 map.graphics.add(graphic);             });             var data = {                 items: dataForGrid             };             var store = new ItemFileReadStore({                 data: data             });              var grid = registry.byId("grid");              grid.setStore(store);             grid.on("rowclick", onRowClickHandler);              map.centerAndZoom(center, zoom);         }          function onRowClickHandler(evt) {             var clickedFeature = evt.grid.getItem(evt.rowIndex).OBJECTID;             var selectedFeature = arrayUtils.filter(map.graphics.graphics, function (graphic) {        return ((graphic.attributes) && graphic.attributes.OBJECTID === clickedFeature);       });        var featureExtent = selectedFeature.geometry.getExtent();    var screenpoint = map.toScreen(selectedFeature.geometry.getExtent().getCenter());    var mappoint = map.toMap(screenpoint);        map.centerAt(mappoint);                 if (selectedFeature.geometry.declaredClass == 'esri.geometry.Point') {                 map.centerAt(selectedFeature.geometry);             } else {                 var featureExtent = selectedFeature.geometry.getExtent();                 var screenpoint = map.toScreen(selectedFeature.geometry.getExtent().getCenter());                 var mappoint = map.toMap(screenpoint);                 map.centerAt(mappoint);             }       }

Does anyone have any idea what I am doing wrong or a way to zoom to all feature types from a datagrid? Thanks in advance!!!

タグ付けされた投稿をもっと見る

Accepted answers

RyanSellman

Okay so I think I got it working...part of the problem was that my onRowClickHandler function couldn't handle point features, but as indicated above, the suggestions for this function still didn't get things working. The showResults function was the larger part of the problem. Initially, the info being pushed to the datagrid was the resulting layer name, found field name and found value. I wanted to employ this method since I am searching a service with multiple layers and returning all records to one datagrid - so a search could potentially return results from multiple layers if the criteria isn't specific enough. For some reason, the onRowClickHandler function couldn't get at the geometry of each feature returned. Here is the code that had been giving me issues:

function showResults(results) {
              if (results.length > 0) {
                  map.graphics.clear();
                  var markerSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_SQUARE, 10, new SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255, 0, 0]), 1), new dojo.Color([0, 255, 0, 0.25]));
                  var lineSymbol = new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASH, new dojo.Color([255, 0, 0]), 1);
                  var polygonSymbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_NONE, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASHDOT, new dojo.Color([255, 0, 0]), 2), new dojo.Color([255, 255, 0, 0.25]));

                  var dataForGrid = [];

                  arrayUtils.map(results, function (result) {
                      var graphic = result.feature;
                      dataForGrid.push([result.layerName, result.foundFieldName, result.value]);
                      switch (graphic.geometry.type) {
                      case "point":
                          graphic.setSymbol(markerSymbol);
                          break;
                      case "polyline":
                          graphic.setSymbol(lineSymbol);
                          break;
                      case "polygon":
                          graphic.setSymbol(polygonSymbol);
                          break;
                      }
                      map.graphics.add(graphic);
                      return result.feature.attributes;
                  });
                  var data = {
                      items: dataForGrid
                  };
                  var store = new ItemFileReadStore({
                      data: data
                  });

                  var grid = registry.byId("grid");

                  grid.setStore(store);
                  grid.on("rowclick", onRowClickHandler);

                  map.centerAndZoom(center, zoom);
              } else {
                  alert("No Utility Feature found!  Please enter a valid UNAME, PIPEID, Plant ID, PUMPID or Name.");
              }
          }

I adjusted it with the below code, and now the onRowClickHandler routine (provided to me by Luci) is working for all feature types.

function showResults(results) {
              if (results.length > 0) {
                  map.graphics.clear();
                  var markerSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_SQUARE, 10, new SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255, 0, 0]), 1), new dojo.Color([0, 255, 0, 0.25]));
                  var lineSymbol = new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASH, new dojo.Color([255, 0, 0]), 1);
                  var polygonSymbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_NONE, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASHDOT, new dojo.Color([255, 0, 0]), 2), new dojo.Color([255, 255, 0, 0.25]));

                var items = arrayUtils.map(results, function (result) {
                      var graphic = result.feature;
                      
                      switch (graphic.geometry.type) {
                      case "point":
                          graphic.setSymbol(markerSymbol);
                          break;
                      case "polyline":
                          graphic.setSymbol(lineSymbol);
                          break;
                      case "polygon":
                          graphic.setSymbol(polygonSymbol);
                          break;
                      }
                      map.graphics.add(graphic);
                      return result.feature.attributes;
                  });
                  var data = {
        identifier: "OBJECTID",
        label: "OBJECTID",
                      items: items
                  };
                  var store = new ItemFileReadStore({
                      data: data
                  });

                  var grid = registry.byId("grid");

                  grid.setStore(store);
                  grid.on("rowclick", onRowClickHandler);

                  map.centerAndZoom(center, zoom);
              } else {
                  alert("No Utility Feature found!  Please enter a valid UNAME, PIPEID, Plant ID, PUMPID or Name.");
              }
          }

Now, displaying attributes in a useful way in the datagrid will be the next challenge.

Thanks to all for helping me tackle this! It is much appreciated!

Ryan

All comments

kenbuja

Glad to hear you got it working.

You should click the check mark on the post that best answered your question (even if it's yours) to help those who may be searching on this topic later.

RyanSellman

function showResults(results) {
              if (results.length > 0) {
                  map.graphics.clear();
                  var markerSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_SQUARE, 10, new SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255, 0, 0]), 1), new dojo.Color([0, 255, 0, 0.25]));
                  var lineSymbol = new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASH, new dojo.Color([255, 0, 0]), 1);
                  var polygonSymbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_NONE, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASHDOT, new dojo.Color([255, 0, 0]), 2), new dojo.Color([255, 255, 0, 0.25]));

                  var dataForGrid = [];

                  arrayUtils.map(results, function (result) {
                      var graphic = result.feature;
                      dataForGrid.push([result.layerName, result.foundFieldName, result.value]);
                      switch (graphic.geometry.type) {
                      case "point":
                          graphic.setSymbol(markerSymbol);
                          break;
                      case "polyline":
                          graphic.setSymbol(lineSymbol);
                          break;
                      case "polygon":
                          graphic.setSymbol(polygonSymbol);
                          break;
                      }
                      map.graphics.add(graphic);
                      return result.feature.attributes;
                  });
                  var data = {
                      items: dataForGrid
                  };
                  var store = new ItemFileReadStore({
                      data: data
                  });

                  var grid = registry.byId("grid");

                  grid.setStore(store);
                  grid.on("rowclick", onRowClickHandler);

                  map.centerAndZoom(center, zoom);
              } else {
                  alert("No Utility Feature found!  Please enter a valid UNAME, PIPEID, Plant ID, PUMPID or Name.");
              }
          }

I adjusted it with the below code, and now the onRowClickHandler routine (provided to me by Luci) is working for all feature types.

function showResults(results) {
              if (results.length > 0) {
                  map.graphics.clear();
                  var markerSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_SQUARE, 10, new SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255, 0, 0]), 1), new dojo.Color([0, 255, 0, 0.25]));
                  var lineSymbol = new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASH, new dojo.Color([255, 0, 0]), 1);
                  var polygonSymbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_NONE, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASHDOT, new dojo.Color([255, 0, 0]), 2), new dojo.Color([255, 255, 0, 0.25]));

                var items = arrayUtils.map(results, function (result) {
                      var graphic = result.feature;
                      
                      switch (graphic.geometry.type) {
                      case "point":
                          graphic.setSymbol(markerSymbol);
                          break;
                      case "polyline":
                          graphic.setSymbol(lineSymbol);
                          break;
                      case "polygon":
                          graphic.setSymbol(polygonSymbol);
                          break;
                      }
                      map.graphics.add(graphic);
                      return result.feature.attributes;
                  });
                  var data = {
        identifier: "OBJECTID",
        label: "OBJECTID",
                      items: items
                  };
                  var store = new ItemFileReadStore({
                      data: data
                  });

                  var grid = registry.byId("grid");

                  grid.setStore(store);
                  grid.on("rowclick", onRowClickHandler);

                  map.centerAndZoom(center, zoom);
              } else {
                  alert("No Utility Feature found!  Please enter a valid UNAME, PIPEID, Plant ID, PUMPID or Name.");
              }
          }

Now, displaying attributes in a useful way in the datagrid will be the next challenge.

Thanks to all for helping me tackle this! It is much appreciated!

Ryan

RyanSellman

Hi Luci,

Thanks for the note! I made the changes throughout the function but I still can't get it to work correctly. I have the following code in my app and it says it can't read the property 'geometry' of undefined.

function onRowClickHandler(evt) {
var clickedObjectf = grid.getItem(evt.rowIndex).OBJECTID;
var selectedObjectf;
var distance = 50;
dojo.forEach(map.graphics.graphics, function(graphicf) {
if ((graphicf.attributes) && graphicf.attributes.OBJECTID === clickedObjectf) {
selectedObjectf = graphicf;
return;
}
});
if (selectedObjectf.geometry.declaredClass == 'esri.geometry.Point'){
var PointExtent = new esri.geometry.Extent({
"xmin" : selectedObjectf.geometry.x - distance,
"ymin" : selectedObjectf.geometry.y - distance,
"xmax" : selectedObjectf.geometry.x + distance,
"ymax" : selectedObjectf.geometry.y + distance,
"spatialReference" : {
"wkid" : 102100
}
});
map.setExtent(PointExtent);
}
else if (selectedObjectf.geometry.declaredClass == 'esri.geometry.Polygon'){
var selectedParcel = selectedObjectf.geometry.getExtent();
map.setExtent(selectedParcel);
}
}

From one of the samples on the API site, I tweaked it a little. Still not working but I get a new error that says it can't read the property declaredClass of undefined.

function onRowClickHandler(evt) {
        var clickedObjectf = evt.grid.getItem(evt.rowIndex).OBJECTID;
 var selectedObjectf = arrayUtils.filter(map.graphics.graphics, function (graphicf){
  return ((graphicf.attributes) && graphicf.attributes.OBJECTID === clickedObjectf);
 });
 var distance = 50;
 if (selectedObjectf.geometry.declaredClass == 'esri.geometry.Point') {
  var PointExtent = new esri.geometry.Extent({
   "xmin": selectedObjectf.geometry.x - distance,
   "ymin": selectedObjectf.geometry.y - distance,
   "xmax": selectedObjectf.geometry.x + distance,
   "ymax": selectedObjectf.geometry.y + distance,
   "spatialReference": {
    "wkid": 102100
   }
  });
  map.setExtent(PointExtent);
 } else if (selectedObjectf.geometry.declaredClass == 'esri.geometry.Polygon') {
  var selectedParcel = selectedObjectf.geometry.getExtent();
  map.setExtent(selectedParcel);
 }
}

I really don't know what I am doing wrong, but I will continue to plug away in hopes of a solution.

Thanks again for your suggestion and help!

Ryan

LuciHawkins

Hey Ryan,

In my app I use the variable "graphicf". In your routine, you use the variable "graphic". Ken was onto something. Change graphicf to graphic (in all places in the onRowClickHandler) and see if that works.

Thanks,

Luci

RyanSellman

Ken,

I appreciate your help with this as well as the resource you have given me. I will definitely watch it and continue to plug away at this.

Best,
Ryan

kenbuja

Are you sure you're assigning a value to selectedObjectf in this section of your code?

dojo.forEach(map.graphics.graphics, function (graphicf) {
    if ((graphicf.attributes) && graphicf.attributes.OBJECTID === clickedObjectf) {
        selectedObjectf = graphicf;
        return;
    }
});

I would suggest you start learning how to debug your code using some of the build-in developer tools in the different browsers. There's a video of the session "Tips and Tricks for Debugging Apps Built with ArcGIS API for JavaScript" here that you can watch.

RyanSellman

I have tried that with no luck, but with a different error:

This:

function onRowClickHandler(evt) {
     var grid = registry.byId("grid");
              var clickedObjectf = evt.grid.getItem(evt.rowIndex).OBJECTID;
              var selectedObjectf;
              var distance = 50;
              dojo.forEach(map.graphics.graphics, function (graphicf) {
                  if ((graphicf.attributes) && graphicf.attributes.OBJECTID === clickedObjectf) {
                      selectedObjectf = graphicf;
                      return;
                  }
              });
              if (selectedObjectf.geometry.declaredClass == 'esri.geometry.Point') {
                  var PointExtent = new esri.geometry.Extent({
                      "xmin": selectedObjectf.geometry.x - distance,
                      "ymin": selectedObjectf.geometry.y - distance,
                      "xmax": selectedObjectf.geometry.x + distance,
                      "ymax": selectedObjectf.geometry.y + distance,
                      "spatialReference": {
                          "wkid": 102100
                      }
                  });
                  map.setExtent(PointExtent);
              } else if (selectedObjectf.geometry.declaredClass == 'esri.geometry.Polygon') {
                  var selectedParcel = selectedObjectf.geometry.getExtent();
                  map.setExtent(selectedParcel);
              }
          }

returns this error:

"Uncaught TypeError: Cannot read property 'geometry' of undefined"

at this line of code:

if (selectedObjectf.geometry.declaredClass == 'esri.geometry.Point') {

kenbuja

You may not notice, but there is a difference between those two functions in the way the grid is referenced. The one from the sample gets the grid from the evt passed into it

function onRowClickHandler(evt) {
    var clickedTaxLotId = evt.grid.getItem(evt.rowIndex).PARCELID;

Have you tried that with your version?

function onRowClickHandler(evt) {
    //var grid = registry.byId("grid");
    var clickedObjectf = evt.grid.getItem(evt.rowIndex).OBJECTID;

RyanSellman

Ken,

Thanks very much for the comment and insight. It is appreciated as I continue to learn.

So, I made the adjustment to the onROwClickHandler function as shown here:

function onRowClickHandler(evt) {
     var grid = registry.byId("grid");
              var clickedObjectf = grid.getItem(evt.rowIndex).OBJECTID;
              var selectedObjectf;
              var distance = 50;
              dojo.forEach(map.graphics.graphics, function (graphicf) {
                  if ((graphicf.attributes) && graphicf.attributes.OBJECTID === clickedObjectf) {
                      selectedObjectf = graphicf;
                      return;
                  }
              });
              if (selectedObjectf.geometry.declaredClass == 'esri.geometry.Point') {
                  var PointExtent = new esri.geometry.Extent({
                      "xmin": selectedObjectf.geometry.x - distance,
                      "ymin": selectedObjectf.geometry.y - distance,
                      "xmax": selectedObjectf.geometry.x + distance,
                      "ymax": selectedObjectf.geometry.y + distance,
                      "spatialReference": {
                          "wkid": 102100
                      }
                  });
                  map.setExtent(PointExtent);
              } else if (selectedObjectf.geometry.declaredClass == 'esri.geometry.Polygon') {
                  var selectedParcel = selectedObjectf.geometry.getExtent();
                  map.setExtent(selectedParcel);
              }
          }

Still getting the same issue with 'getItem'

What's odd to me, is when I add the function from this sample on the API site, it works.

function onRowClickHandler(evt) {
          var clickedTaxLotId = evt.grid.getItem(evt.rowIndex).PARCELID;
          var selectedTaxLot = arrayUtils.filter(map.graphics.graphics, function (graphic) {
            return ((graphic.attributes) && graphic.attributes.PARCELID === clickedTaxLotId);
          });
          if ( selectedTaxLot.length ) {
            map.setExtent(selectedTaxLot[0].geometry.getExtent(), true);
          }
        }

When just a polygon is returned to the grid it works, just a line, it works. But when there is a combination of features (a point and a polygon/a point and a line) returned to the grid, nothing works at all. The presence of a point feature disables the function from working at all.

kenbuja

It looks like a matter of scope. You declare the variable grid in the function "showResults"

 var grid = registry.byId("grid");

Since this is declared locally within that function, it isn't visible to other functions (like "onRowClickHandler")

You'll have to either declare the variable globally, or declare it again within "onRowClickHandler"

RyanSellman

I am sorry to pester but I am still getting an error. I have no clue whats going on. I defined point, polyline and polygon and added the onRowClickHandler function you use but get the following message in Chome Dev Tools:

Uncaught TypeError: Cannot read property 'getItem' of undefined

Here is the find task I am using along with the code you suggested:

findDistrictTask = new FindTask("http://summitgis.summitoh.net:6080/arcgis/rest/services/DOES/MapServer/");

          map.on("load", function () {
              findDistrictParams = new FindParameters();
              findDistrictParams.returnGeometry = true;
              findDistrictParams.layerIds = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
              findDistrictParams.searchFields = ["NAME, UNAME, PUMPID, PIPEID, PlantID, Name"];
              findDistrictParams.outSpatialReference = map.spatialReference;
          });

          function doDoesDistrictFind() {
              findDistrictParams.searchText = dom.byId("doesDistrictText").value;
              findDistrictTask.execute(findDistrictParams, showResults);
          }


          function showResults(results) {
              if (results.length > 0) {
                  map.graphics.clear();
                  var markerSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_SQUARE, 10, new SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255, 0, 0]), 1), new dojo.Color([0, 255, 0, 0.25]));
                  var lineSymbol = new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASH, new dojo.Color([255, 0, 0]), 1);
                  var polygonSymbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_NONE, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASHDOT, new dojo.Color([255, 0, 0]), 2), new dojo.Color([255, 255, 0, 0.25]));

                  var dataForGrid = [];

                  arrayUtils.map(results, function (result) {
                      var graphic = result.feature;
                      dataForGrid.push([result.layerName, result.foundFieldName, result.value]);
                      switch (graphic.geometry.type) {
                      case "point":
                          graphic.setSymbol(markerSymbol);
                          break;
                      case "polyline":
                          graphic.setSymbol(lineSymbol);
                          break;
                      case "polygon":
                          graphic.setSymbol(polygonSymbol);
                          break;
                      }
                      map.graphics.add(graphic);
                      return result.feature.attributes;
                  });
                  var data = {
                      items: dataForGrid
                  };
                  var store = new ItemFileReadStore({
                      data: data
                  });

                  var grid = registry.byId("grid");

                  grid.setStore(store);
                  grid.on("rowclick", onRowClickHandler);

                  map.centerAndZoom(center, zoom);
              } else {
                  alert("No Utility Feature found!  Please enter a valid UNAME, PIPEID, Plant ID, PUMPID or Name.");
              }
          }

          //end does district search

          function onRowClickHandler(evt) {
              var clickedObjectf = grid.getItem(evt.rowIndex).OBJECTID;
              var selectedObjectf;
              var distance = 50;
              dojo.forEach(map.graphics.graphics, function (graphicf) {
                  if ((graphicf.attributes) && graphicf.attributes.OBJECTID === clickedObjectf) {
                      selectedObjectf = graphicf;
                      return;
                  }
              });
              if (selectedObjectf.geometry.declaredClass == 'esri.geometry.Point') {
                  var PointExtent = new esri.geometry.Extent({
                      "xmin": selectedObjectf.geometry.x - distance,
                      "ymin": selectedObjectf.geometry.y - distance,
                      "xmax": selectedObjectf.geometry.x + distance,
                      "ymax": selectedObjectf.geometry.y + distance,
                      "spatialReference": {
                          "wkid": 102100
                      }
                  });
                  map.setExtent(PointExtent);
              } else if (selectedObjectf.geometry.declaredClass == 'esri.geometry.Polygon') {
                  var selectedParcel = selectedObjectf.geometry.getExtent();
                  map.setExtent(selectedParcel);
              }
          }

The graphics for all 3 feature types are drawing in the correct place and attributes are populating the grid, I just can't get the zoom to work.

Any idea why is doesn't like "getItem"

Ryan

RyanSellman

That may be my issue. I am using AMD and have defined "esri/geometry/point" but not polyline or polygon. Going to make the change now - hopefully that's it!

Thank you!!

LuciHawkins

Are you using Legacy or AMD? Did you define point, polygon, and polyline.

AMD Style:

require(["...whatever else you are defining, "esri/geometry/Point", "esri/geometry/Polyline", "esri/geometry/Polygon",....end of your define"], function(....etc..., Point, Polyline, Polygon, ....etc..){

Legacy Style:

dojo.require("esri.geometry.Point");
dojo.require("esri.geometry.Polyline");
dojo.require("esri.geometry.Polygon");

Thanks,

Luci

RyanSellman

Luci,

Thank you for your response! I tried implementing something very similar before but kept getting the error:
Uncaught TypeError: Cannot read property 'geometry' of undefined".

When I use the code you suggested, I get the same exact error in Chrome.

In firebug, I get:
"TypeError: selectedObjectf is undefined".

I have to be missing something small. Any thoughts??

Thank you!

LuciHawkins

Hey,

This is the onRowClickHandler that I use:

function onRowClickHandler(evt) {
var clickedObjectf = grid.getItem(evt.rowIndex).OBJECTID;
var selectedObjectf;
var distance = 50;
dojo.forEach(map.graphics.graphics, function(graphicf) {
if ((graphicf.attributes) && graphicf.attributes.OBJECTID === clickedObjectf) {
   selectedObjectf = graphicf;
   return;
}
});
if (selectedObjectf.geometry.declaredClass == 'esri.geometry.Point'){
   var PointExtent = new esri.geometry.Extent({
   "xmin" : selectedObjectf.geometry.x - distance,
   "ymin" : selectedObjectf.geometry.y - distance,
   "xmax" : selectedObjectf.geometry.x + distance,
   "ymax" : selectedObjectf.geometry.y + distance,
   "spatialReference" : {
    "wkid" : 102100
    }
   });
   map.setExtent(PointExtent);
}
else if (selectedObjectf.geometry.declaredClass == 'esri.geometry.Polygon'){
   var selectedParcel = selectedObjectf.geometry.getExtent();
   map.setExtent(selectedParcel);
}
}

It sets a different extent based upon whether the selected object in the row is a point or a polygon. You can add another "else if" for polyline similar to:

else if (selectedObjectf.geometry.declaredClass == 'esri.geometry.Polyline'){
var selectedStreet = selectedObjectf.geometry.getExtent();
map.setExtent(selectedStreetl);
}

Thanks,

Luci

RyanSellman

Yes, the found points and lines are highlighted on the map with the correct assigned symbology.

Thanks again for helping me with this!

TimWitt

When it finds lines or points does it highlight them?

RyanSellman

Tim,

After copying and pasting your onRowClickHandler() function shown here,

function onRowClickHandler(evt) {
          var clickedStreet = evt.grid.getItem(evt.rowIndex).ADD_LBL;
          var selectedStreet = arrayUtils.filter(map.graphics.graphics, function (graphic) {
            return ((graphic.attributes) && graphic.attributes.ADD_LBL === clickedStreet);
          });
          if ( selectedStreet.length ) {
            map.setExtent(selectedStreet[0].geometry.getExtent(), true);
          }
        }

I can now zoom to polygon features but not lines or points. I must have made a typo when I first implemented your suggestions earlier.

Now, when I click on a feature that's either a line or a point, I get the following error:

"Uncaught TypeError: Cannot read property 'toJson' of null "

Attached is the updated app.

Thanks!

index2.zip

latlong.jpg

RyanSellman

Yes, that is correct. In the application, there are two findtasks, one searching for parcels, the other searches many utility layers in one map service. Each task successfully pushes data to one datagrid. In the current state of the application (with the code you suggested), when I click on a row nothing happens and I get no errors in firebug or google dev tools

TimWitt

Does your application find something and populates the grid, but when you click on the grid it won't zoom?

RyanSellman

Absolutely, but beware - I am super new to JavaScript and the API. This is my first app.

Thanks again!

index.zip

XAML-Icons.zip

TimWitt

Ryan,

can you post your full code?

RyanSellman

Lixian,

Thanks for your response and note. I am aware that Point does not have a .getExtent and thought I handled it in the code I initially posted:

function onRowClickHandler(evt) {
            var clickedFeature = evt.grid.getItem(evt.rowIndex).OBJECTID;
            var selectedFeature = arrayUtils.filter(map.graphics.graphics, function (graphic) {
   
   return ((graphic.attributes) && graphic.attributes.OBJECTID === clickedFeature);
   
  });
   
   var featureExtent = selectedFeature.geometry.getExtent();
   var screenpoint = map.toScreen(selectedFeature.geometry.getExtent().getCenter());
   var mappoint = map.toMap(screenpoint);
   
   map.centerAt(mappoint);
   
            if (selectedFeature.geometry.declaredClass == 'esri.geometry.Point') {
                map.centerAt(selectedFeature.geometry);
            } else {
                var featureExtent = selectedFeature.geometry.getExtent();
                var screenpoint = map.toScreen(selectedFeature.geometry.getExtent().getCenter());
                var mappoint = map.toMap(screenpoint);
                map.centerAt(mappoint);
            }
   
  }

Do you see a reason why the above code wouldn't work?

Thanks!!!

RyanSellman

Tim,

Many thanks for your quick response and help. I made changes where I saw fit to my code per your example. I no longer get the, "Uncaught TypeError: Cannot read property 'getExtent' of undefined" that I was seeing before. However, when I click on a row nothing happens. Moreover, I see no errors in the console when firing the onRowClickHandler function. Any ideas? I am sorry to pester!

Here is my updated code:

findDistrictTask = new FindTask("http://summitgis.summitoh.net:6080/arcgis/rest/services/DOES/MapServer/");

        map.on("load", function () {
            findDistrictParams = new FindParameters();
            findDistrictParams.returnGeometry = true;
            findDistrictParams.layerIds = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
            findDistrictParams.searchFields = ["NAME, UNAME, PUMPID, PIPEID, PlantID, Name"];
            findDistrictParams.outSpatialReference = map.spatialReference;
        });

        function doDoesDistrictFind() {
            findDistrictParams.searchText = dom.byId("doesDistrictText").value;
            findDistrictTask.execute(findDistrictParams, showResults);
        }


        function showResults(results) {
   if (results.length > 0) {
   map.graphics.clear();
            var markerSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_SQUARE, 10, new SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255, 0, 0]), 1), new dojo.Color([0, 255, 0, 0.25]));
            var lineSymbol = new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASH, new dojo.Color([255, 0, 0]), 1);
            var polygonSymbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_NONE, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASHDOT, new dojo.Color([255, 0, 0]), 2), new dojo.Color([255, 255, 0, 0.25]));
            
            var dataForGrid = [];
   
            arrayUtils.map(results, function (result) {
                var graphic = result.feature;
                dataForGrid.push([result.layerName, result.foundFieldName, result.value]);
                switch (graphic.geometry.type) {
                case "point":
                    graphic.setSymbol(markerSymbol);
                    break;
                case "polyline":
                    graphic.setSymbol(lineSymbol);
                    break;
                case "polygon":
                    graphic.setSymbol(polygonSymbol);
                    break;
                }
                map.graphics.add(graphic);
    return result.feature.attributes;
            });
            var data = {
                items: dataForGrid
            };
            var store = new ItemFileReadStore({
                data: data
            });

            var grid = registry.byId("grid");

            grid.setStore(store);
            grid.on("rowclick", onRowClickHandler);

            map.centerAndZoom(center, zoom);
   } else {
   alert("No feature found");
   }
        }

        function onRowClickHandler(evt) {
            var clickedFeature = evt.grid.getItem(evt.rowIndex).OBJECTID;
            var selectedFeature = arrayUtils.filter(map.graphics.graphics, function (graphic) {
   
   return ((graphic.attributes) && graphic.attributes.OBJECTID === clickedFeature);
   
  });
  
   if (selectedFeature.length) {
    map.setExtent(selectedFeature[0].geometry.getExtent(), true);
    }
   }

LixianDai

Point does not have a .getExtent; try to separate different geometry type when you want to zoom.

TimWitt

Ryan,

maybe this example can help?

Tim

会話に参加する

サインインしたメンバーは投稿、更新のフォローなどができます。初めてですか？無料アカウントを登録してください。

クイックリンク

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.