Return Attributes to HTML DIV

[jaykapalczynski]

Ideas on how to modify this example to return at least one attribute from the layers into an html DIV instead of the length or Count of selected features.

ArcGIS API for JavaScript Sandbox 

Preferable I would like:

1. To return attributes values for each record into an HTML Div Tag.

2. Be able to select the graphic and highlight the table record

3. Be able to click the table record and highlight the feature in the map

Anyone have a basic example of this?  

Click Map, Create Buffer for selection, Return results into controlled DIV tag, Have interaction between the map and the table of results.

[RobertScheitlin__GISP]

Jay,

   Yes your line symbol constructor is all jacked up.

   // Selection symbol used to draw the selected lines
   var symbol = new SimpleLineSymbol(
     SimpleLineSymbol.STYLE_Solid,
     new Color([247, 34, 101, 0.9]), 3);
‍‍‍‍

A SimpleLineSymbols constructor has (style, color, width). Looks line you just took the SimpleFillSymbol constructor and change the name to SimpleLineSymbol.

[jaykapalczynski]

Yea I had that before.....I added your example and still nothing renders....hmmmm

I can click and select the records.  Return them to the dgrid.  Select in the dGrid and highlight the feature.

They just dont show up purple after the map click to initially select them light the points did....

[jaykapalczynski]

If I uncomment this and draw all of them without being selecting

• You can see the point below were selected and are purple
• The lines were not set to purple but were selected and populated the right dgrid below.

// Make unselected features invisible
var nullSymbol = new SimpleLineSymbol().setWidth(0);
WMALines.setRenderer(new SimpleRenderer(nullSymbol));‍‍‍

[RobertScheitlin__GISP]

Jay,

   I guess I am confused on your new workflow in this app then. In the original sample I provided you clicked on the map and the click was buffered and the intersecting Census block points were selected on the map and shown in the grid. So what is the new workflow and how are the lines used?

[jaykapalczynski]

No new workflow....just changed from points geometry to a line geometry

In the image above I am querying and returning data on a Point and Line Geometry...Except the line geometry is not being show as selected.  Only the points are.

The image shows 2 grids...on the left is the Points and on the right are the lines.

I left on the roads (line layer) to shwo there is geometry.....they should be selected in purple like the points but they are not...thats my trouble.

[RobertScheitlin__GISP]

Jay,

   So the lines are getting added to the grid but not the map? This code looks off:

// Use an objectIds selection query (should not need to go to the server)
        linefl.selectFeatures(query, FeatureLayer.SELECTION_NEW, function(features2){
          var data = array.map(features, function(feature) {‍‍‍

You have the function returning a var of features2 then in line 3 you are using features instead.

[jaykapalczynski]

I have two functions to select each of the feature types...

If I change it to Features2 in each of the lines it stops returning the WMA Lines but still returns the points.

// Use an objectIds selection query (should not need to go to the server)
WMALines.selectFeatures(queryWMALn, FeatureLayer.SELECTION_NEW, function(features2){
var data = array.map(features2, function(feature) {‍‍‍

If I leave it as Features in both it also does not return the line features to the grid but returns for the points.

// Use an objectIds selection query (should not need to go to the server)
WMALines.selectFeatures(queryWMALn, FeatureLayer.SELECTION_NEW, function(features){
var data = array.map(features, function(feature) {‍‍‍

Is this getting mixed up because of the two separate calls to select features?

     // WMA POINT GRID       
      function selectInBuffer(response){
        var feature1;
        var features1 = response.features;
        var inBuffer1 = [];
        // Filter out features that are not actually in buffer, since we got all points in the buffer's bounding box
        for (var i = 0; i < features1.length; i++) {
          feature1 = features1[i];
          if(circle.contains(feature1.geometry)){
            inBuffer1.push(feature1.attributes[WMAPoints.objectIdField]);
          }
        }
        var queryWMAPt = new Query();
        queryWMAPt.objectIds = inBuffer1;
        // Use an objectIds selection query (should not need to go to the server)
        WMAPoints.selectFeatures(queryWMAPt, FeatureLayer.SELECTION_NEW, function(features){
          var data = array.map(features, function(feature) {
            return {
              // property names used here match those used when creating the dgrid
              "id": feature.attributes[PointoutFields[0]],
              "TYPE": feature.attributes[PointoutFields[2]],
              "WMA": feature.attributes[PointoutFields[3]],
              "Rotate_Val": feature.attributes[PointoutFields[4]],
              "FG_Symbol": feature.attributes[PointoutFields[5]]
                 };
          });
            alert(JSON.stringify(data));
          var memStore1 = new Memory({
            data: data
          });
          gridWMAPoint.set("store", memStore1);
        });
      }

     // WMA LINE GRID       
       function selectInBufferLines(response){
       alert("SelectInBufferLines");
        var feature;
        var features = response.features;
        var inBuffer = [];
        // Filter out features that are not actually in buffer, since we got all points in the buffer's bounding box
        for (var i = 0; i < features.length; i++) {
          feature = features[i];
          if(circle.contains(feature.geometry)){
            inBuffer.push(feature.attributes[WMALines.objectIdField]);
          }
        }
        var queryWMALn = new Query();
        queryWMALn.objectIds = inBuffer;
        // Use an objectIds selection query (should not need to go to the server)
        WMALines.selectFeatures(queryWMALn, FeatureLayer.SELECTION_NEW, function(features2){
          var data = array.map(features2, function(feature) {
            return {
              // property names used here match those used when creating the dgrid
              "id": feature.attributes[LineoutFields[0]],
              "TYPE": feature.attributes[LineoutFields[2]],
              "WMA": feature.attributes[LineoutFields[3]],
              "Label": feature.attributes[LineoutFields[4]],
              "Name": feature.attributes[LineoutFields[5]]
                 };
          });
            alert(JSON.stringify(data));
          var memStore2 = new Memory({
            data: data
          });
          gridWMALine.set("store", memStore2);
        });
      }‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[RobertScheitlin__GISP]

Jay,

   OK, I see the issue now. the circle.contains method is expecting a point geometry not a polyline. So you have to get a point from the line to test it in the contains method.

[jaykapalczynski]

Im confused. 

I thought there was a map click creating a point geometry.  

That geometry is used to create the circle

that circle is used to select the features in the map

Both lines and points are selected and returned to their corresponding grids.

[RobertScheitlin__GISP]

Jay,

   No. You not following the codes workflow and understanding what it is doing. The circles extent (bounding box) is used for the initial query to the featureLayers and then the features that intersect the circles extent are tested against the Circles contains method (which expects points) to see it they are actually inside the circle and those that are are added to an objectid list to actually be selected from the FL.