How to use FeatureTable to display query results

LeiZhou1 — Sun, 26 Jun 2016 20:06:38 GMT

I am studying the following ESRI "Select with Feature layer" sample codes:

After that query is finished, I would like to create a FeatureTable and let all the query pink points within the 1 mile buffer go to the FeatureTable. Currently all the records go to the Feature Table, but I just need want to display data in table for the points inside the buffer. Below is my codes. Thanks a lot!

<!DOCTYPE html>

<html>

<head>

<title>Select with feature layer</title>

<style>

html, body, #mapDiv {

padding: 0;

margin: 0;

height: 100%;

}

#messages{

background-color: #fff;

box-shadow: 0 0 5px #888;

font-size: 1.1em;

max-width: 15em;

padding: 0.5em;

position: absolute;

right: 20px;

top: 20px;

z-index: 40;

}

</style>

var map;

require([

"esri/map", "esri/layers/FeatureLayer", "esri/dijit/FeatureTable",

"esri/tasks/query", "esri/geometry/Circle",

"esri/graphic", "esri/InfoTemplate", "esri/symbols/SimpleMarkerSymbol",

"esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleFillSymbol", "esri/renderers/SimpleRenderer",

"esri/config", "esri/Color", "dojo/dom", "dojo/domReady!"

], function(

Map, FeatureLayer,FeatureTable,

Query, Circle,

Graphic, InfoTemplate, SimpleMarkerSymbol,

SimpleLineSymbol, SimpleFillSymbol, SimpleRenderer,

esriConfig, Color, dom

) {

// use a proxy page if a URL generated by this page is greater than 2000 characters

// this should not be needed as nearly all query & select functions are performed on the client

esriConfig.defaults.io.proxyUrl = "/proxy/";

map = new Map("mapDiv", {

basemap: "streets",

center: [-95.249, 38.954],

zoom: 14,

slider: false

});

//add the census block points in on demand mode. Note that an info template has been defined so when

//selected features are clicked a popup window will appear displaying the content defined in the info template.

var featureLayer = new FeatureLayer("https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/0",{

//infoTemplate: new InfoTemplate("Block: ${BLOCK}", "${*}"),

outFields: ["*"]

});

// selection symbol used to draw the selected census block points within the buffer polygon

var symbol = new SimpleMarkerSymbol(

SimpleMarkerSymbol.STYLE_CIRCLE,

12,

new SimpleLineSymbol(

SimpleLineSymbol.STYLE_NULL,

new Color([247, 34, 101, 0.9]),

new Color([207, 34, 171, 0.5])

);

featureLayer.setSelectionSymbol(symbol);

//make unselected features invisible

var nullSymbol = new SimpleMarkerSymbol().setSize(0);

featureLayer.setRenderer(new SimpleRenderer(nullSymbol));

map.addLayer(featureLayer);

var circleSymb = new SimpleFillSymbol(

SimpleFillSymbol.STYLE_NULL,

new SimpleLineSymbol(

SimpleLineSymbol.STYLE_SHORTDASHDOTDOT,

new Color([105, 105, 105]),

), new Color([255, 255, 0, 0.25])

);

var circle;

//when the map is clicked create a buffer around the click point of the specified distance.

map.on("click", function(evt){

circle = new Circle({

center: evt.mapPoint,

geodesic: true,

radius: 1,

radiusUnit: "esriMiles"

});

map.graphics.clear();

map.infoWindow.hide();

var graphic = new Graphic(circle, circleSymb);

map.graphics.add(graphic);

var query = new Query();

query.geometry = circle.getExtent();

//use a fast bounding box query. will only go to the server if bounding box is outside of the visible map

featureLayer.queryFeatures(query, selectInBuffer);

});

function selectInBuffer(response){

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;

if(circle.contains(feature.geometry)){

inBuffer.push(feature.attributes[featureLayer.objectIdField]);

}

var query = new Query();

query.objectIds = inBuffer;

myFeatureTable.selectedRowIds = query.objectIds; // here is what I added

myFeatureTable._showSelectedRecords(); //

//use a fast objectIds selection query (should not need to go to the server)

featureLayer.selectFeatures(query, FeatureLayer.SELECTION_NEW, function(results){

var totalPopulation = sumPopulation(results);

var r = "";

r = "<b>The total Census Block population within the buffer is <i>" + totalPopulation + "</i>.</b>";

dom.byId("messages").innerHTML = r;

});

}

function sumPopulation(features) {

var popTotal = 0;

for (var x = 0; x < features.length; x++) {

popTotal = popTotal + features.attributes["POP2000"];

}

return popTotal;

}

myFeatureTable = new FeatureTable({

"featureLayer" : featureLayer,

"outFields": [

"POP2000"

fieldInfos: [

{

name: 'POP2000',

alias: 'POP2000',

{

name: 'HOUSEHOLDS',

alias: 'Household Name',

}

"map" : map

}, 'myTableNode');

myFeatureTable.startup();

});

</script>

</head>

<body>

<span id="messages">Click on the map to select census block points within 1 mile.</span>

</body>

</html>

Re: How to use FeatureTable to display query results

RobertScheitlin__GISP — Sun, 26 Jun 2016 20:24:21 GMT

Lei,

The FeatureTable did not respect the FeatureLayers selection in 3.16 or earlier but in 3.17 there is the myFeatureTable.filterSelectedRecords(true);.

FeatureTable | API Reference | ArcGIS API for JavaScript 3.17

Re: How to use FeatureTable to display query results

LeiZhou1 — Mon, 27 Jun 2016 17:13:29 GMT

I added the following change in the function: featureLayer.selectFeatures(query, FeatureLayer.SELECTION_NEW, function(results), it seems the table just can not get all the selected records, still displaying all of them. But it is strange if I click 'Options' -- 'clear selection', all the points in buffer will be removed. That means the table gets all the selected points information already, just canot display. Thanks!

myFeatureTable.selectedRowIds = objectIds;

myFeatureTable.filterSelectedRecords(true); // 3.17 new

Re: How to use FeatureTable to display query results

RobertScheitlin__GISP — Mon, 27 Jun 2016 22:36:03 GMT

Lei,

So are you saying that the filterSelectedRecords(true) did not work for you?

Re: How to use FeatureTable to display query results

PanagiotisPapadopoulos — Tue, 28 Jun 2016 12:27:27 GMT

An another option is to destroy the Feature Table

myFeatureTable.destroy();

run the query on Feature Layer or define a definition expression on Feature layer (the definition expression will have all objectids from the spatial query, example OBJECTID in (12,14,13,1116) )

myFeatureLayer = new FeatureLayer(relatedFeatureServiceTableUrl, {

mode: FeatureLayer.MODE_ONDEMAND,

visible: true,

definitionExpression:"objectid ="+oidparameter,

outFields: ["*"],

id: "fLayer"

});

and then load again the Feature Table for this Feature Layer

myFeatureTable = new FeatureTable({

"featureLayer" : myFeatureLayer,

"outFields": ["objectid","description","comments", "name","typeof"],

"map" : app.map,

"syncSelection": false,

"zoomToSelection":false,

"editable":bool

}, 'myTableNode');

myFeatureTable.startup();

Re: How to use FeatureTable to display query results

LeiZhou1 — Tue, 28 Jun 2016 20:18:28 GMT

No, the Feature Table still display all the records when first time open or after the query. Thanks!

topic Re: How to use FeatureTable to display query results in ArcGIS JavaScript Maps SDK Questions

How to use FeatureTable to display query results

Re: How to use FeatureTable to display query results

Re: How to use FeatureTable to display query results

Re: How to use FeatureTable to display query results

Re: How to use FeatureTable to display query results

Re: How to use FeatureTable to display query results