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...";
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