I'm using ArcGIS API for JavaScript 4.8. My goal is to get the Census tract ID value of the clicked Feature in a FeatureLayer and display the ID value in an alert box. I got stuck when trying to use Query/QueryTask to fetch the value. My code goes here:
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/FeatureLayer",
"esri/layers/GroupLayer",
"esri/widgets/LayerList",
"esri/tasks/support/Query",
"esri/tasks/QueryTask",
"dojo/on",
"dojo/domReady!"
],
function(
Map, MapView, FeatureLayer, GroupLayer, LayerList, Query, QueryTask, on
) {
var map = new Map({
basemap: "topo"
});
var view = new MapView({
center: [-91.05, 30.5161109],
zoom: 11,
container: "viewDiv",
map: map,
});
// Generate link to Census tract details
view.when(function() {
on(view, "click", displayTractID);
});
function displayTractID(event) {
// TODO
}
// Define popup template and get feature layers
var census2000Template = {
title: "Census 2000",
content: [{
type: "fields",
fieldInfos: [{
fieldName: "TRACT",
label: "Tract",
visible: true
}, {
fieldName: "POPULATION",
label: "Population",
visible: true,
format: {
digitSeparator: true,
places: 0
}
}]
}]
};
var census2000Layer = new FeatureLayer({
url: "http://services.arcgis.com/KYvXadMcgf0K1EzK/ArcGIS/rest/services/Census_2000/FeatureServer/0",
outFields: ["*"],
popupTemplate: census2000Template
});
// Add feature layers to a group layer
var censusGroupLayer = new GroupLayer({
title: "Historic Census",
visible: true,
visibilityMode: "exclusive",
layers: [census2000Layer]
});
map.add(censusGroupLayer);
});
Could someone help me to fill out the TODO part or show me some sandbox examples?
Solved! Go to Solution.
Xuan,
Here is how you do that using view.hitTest.
// Get the screen point from the view's click event
view.on("click", function (event) {
var screenPoint = {
x: event.x,
y: event.y
};
// Search for graphics at the clicked location
view.hitTest(screenPoint).then(function (response) {
if (response.results.length) {
var graphic = response.results.filter(function (result) {
// check if the graphic belongs to the layer of interest
return result.graphic.layer === myLayer;
})[0].graphic;
// do something with the result graphic
console.log(graphic.attributes);
}
});
});
Xuan,
Here is how you do that using view.hitTest.
// Get the screen point from the view's click event
view.on("click", function (event) {
var screenPoint = {
x: event.x,
y: event.y
};
// Search for graphics at the clicked location
view.hitTest(screenPoint).then(function (response) {
if (response.results.length) {
var graphic = response.results.filter(function (result) {
// check if the graphic belongs to the layer of interest
return result.graphic.layer === myLayer;
})[0].graphic;
// do something with the result graphic
console.log(graphic.attributes);
}
});
});
I think that's a pretty smart workaround. What exactly should I put in place of myLayer at your line 13? Should it be the layer name displayed in the title of the REST page of the layer?
No it would be the actual layer object.
var featureLayer = new FeatureLayer({
url: "https://services6.arcgis.com/qqlm5mJY5vXAZxEC/arcgis/rest/services/LalyerListWithHRBuild/FeatureServer",
});
Can i pass this object "featureLayer " in place of my layer?
return result.graphic.layer === myLayer;
yes
I do understand the docs correctly that from 4.6 onwards the attributes will only contain the ID and layer name? I am getting an object from graphics.attribute of {FID:int} only, do I have to then do a query based on this FID on the feature layer and get the attributes or is there another way for that?
In this example the attributes is still returning when I switch the api to 4.20, so I am guess I must have done something wrong?
Thanks for your help!
Using the following code:
view.on("click", (event)=> {
view.hitTest(event.screenPoint,{include: allSchoolLayer})
.then(function (response) {
if (response.results.length > 0) {
console.log(response);
var graphic = response.results.filter(function(result) { // check if the graphic belongs to the layer of interest
return result.graphic.layer === allSchoolLayerCluster;
})[0].graphic; // do something with the result graphic
console.log(graphic.attributes);
}
});
})
The reason I was only getting the FID was because the outFields needs to be included in the featureLayer definition. Use outFields:["*"] to include all the feature.
Thank!!!
Robert Scheitlin
you saved my time.