AnsweredAssumed Answered

How do you access the attribute of a feature layer in arcgis javascript api 3.2?

Question asked by caramayo on Apr 20, 2018
Latest reply on Apr 24, 2018 by caramayo

I feel like I should be able to find the answer to this question, but I haven't been successful so far so I thought I would reach out for some help... I am making a web map similar in style to the Shortlist story map. There is a map with a layer that contains the locations of projects around the US (polygons) and a sidebar of cards. Each card is supposed to correspond to a project on the map. The map also has a filter tool that allows you to query the feature layer for a couple attributes. 

 

I want to connect my cards to their corresponding feature on the map so that when a person queries the map, they see only the polygons and corresponding cards. If a polygon is hidden due to the filter request, its corresponding card should hide too. Each card's id is the project's Project Number and each project has a ProjectNum field that contains the project number. The problem is, I can't figure out how to access the Project Number of each feature. How do you do this?

Thank you!

 

Below is the code I have so far:

 

require([
"esri/map",
"esri/layers/FeatureLayer",
"esri/dijit/PopupTemplate",
"esri/dijit/Legend",
"dojo/domReady!"
], function(
Map,
FeatureLayer,
PopupTemplate,
Legend
) {

var map = new Map("viewDiv", {
basemap: "gray-vector",
center: [ -85.20127, 35.12355 ],
zoom: 1
});

// Add layer to the map

var serviceUrl = "https://services2.arcgis.com/C8EMgrsFcRFL6LrL/arcgis/rest/services/HISAProjects_WFL1/FeatureServer/0?token=YpbF4nsIB3GuSbWIhgwXbWczDf8K5hPtyHvhd9tOsM2DH_H5h6XtKDa-QnCwSgFbuRM9Ys49M5u3Q6kxshkFwT3b1piPsaqqYDliPnZ3iHXmT6mt0vul77BFD2TtdU-K_11qvpDFZ8nrt4dSKnD_q1D-G7aV97yTAsYdcD4-iUiMhEZqc8IAErCkuf86rXdOZXXeOdZuHNP8Yr0S5KY-gf3k7LIt6XalyiZPyZ2439c";
var layer = new FeatureLayer(serviceUrl, {
outFields: [ "FY", "HISAProjects_final_1262017_cs_2", "HISAProjects_final_1262017_csv1", "HISAProjects_final_1262017_cs_4", "HISAProjects_final_1262017_cs_5", "HISAProjects_final_1262017_csv_", "HISAProjects_final_1262017_cs_3", "HISAProjects_final_1262017_cs_1", "HabitatData12_4_17_ProjectNum"],



infoTemplate: new PopupTemplate({
title: "{HISAProjects_final_1262017_cs_4}",
description: "<br />Lead PI: {HISAProjects_final_1262017_cs_5}"
+ "<br />Region: {HISAProjects_final_1262017_csv_}"
+ "<br />Year: {FY}"
+ "<br />Primary Habitat Type: {HISAProjects_final_1262017_cs_2}"
+ "<br />Secondary Habitat Type: {HISAProjects_final_1262017_cs_3}"
+ "<br />Distance from shore: {HISAProjects_final_1262017_csv1}"
+ "<br />Secondary Distance from shore: {HISAProjects_final_1262017_cs_1}"

//
// "Learn more.." link connected to individual main-areaCard info windows

})
});


map.addLayer(layer);
var legend = new Legend({
map: map,
layerInfos: [{
layer: layer,
title: "Habitat Type"
}]
}, "legendDiv");

 

// "Global" Variables
var filter1 = document.getElementById("filterhabitat");
var filter2 = document.getElementById("filterlocation");
var filter3 = document.getElementById("filteryear");
var button = document.getElementById("button");

map.on("load", function(evt){
legend.startup();
button.addEventListener("click", function(e){
// console.log(filter1.options[filter1.selectedIndex].value);
// console.log(filter2.options[filter2.selectedIndex].value);
// console.log(filter3.options[filter3.selectedIndex].value);
habitatValue = filter1.options[filter1.selectedIndex].value;
distanceValue = filter2.options[filter2.selectedIndex].value;
yearValue = filter3.options[filter3.selectedIndex].value;
pushValues(habitatValue, distanceValue, yearValue);

});
}); //end of map event function

function pushValues (habitatValue, distanceValue, yearValue){
var expressionArray = [];

if (habitatValue) {
var str = `HISAProjects_final_1262017_cs_2 = '${habitatValue}'`;
expressionArray.push(str);
}

if (distanceValue) {
var str = `HISAProjects_final_1262017_csv1 = '${distanceValue}'`;
expressionArray.push(str);
}

if (yearValue) {
var str = `FY = '${yearValue}'`;
expressionArray.push(str);
}

console.log(expressionArray);

var definitionExpression = expressionArray.join(' AND ');

updateDefinitionExpression(definitionExpression);
}

function updateDefinitionExpression(definitionExpression){
//var definitionExpression = "HISAProjects_final_1262017_cs_2 = 'PELAGIC' AND FY = '2010'";
layer.setDefinitionExpression(definitionExpression);
console.log(definitionExpression);
map.infoWindow.hide();

function connectIds(){

projectNum = $('.clickable').attr('id');
console.log(projectNum);
//retrieve ProjectNum for feature

}

} //end updateDefinitionExpression function


});// end Function

Attachments

Outcomes