Highlighting selected features interfering with population of arcade expressions in popup.
1044
5
10-09-2019 11:43 AM
by
In my web app I'm loading all services as MapImageLayers from an Enterprise server (10.6). Each MapImageLayer has a set of sublayers, each of them with its own popupTemplate. Some of the popupTemplates have arcade expression utilized through expressionInfos. With this setup I'm able to click on the map and get a popup populated with each intersected feature and all of the associated data formatted properly.
My issue shows up when I attempt to add a highlight graphic to the view. If the first feature returned is one with a popupTemplate utilizing arcade expressions, the first attribute table in the popup is blank for all attributes with arcade expressions (labels show up but no data), but attributes with no arcade expression show up fine. For each subsequent feature in the popup everything is populated fine whether it has arcade expressions or not. I think this might be related to something happening before a promise has been returned, but I can't figure it out.
The whole app is fairly large, so I am including what I think is the relevant code, but I did have to remove the URL to the specific server I'm using.
This is the error message that shows up in chrome console.
require([
"esri/Map",
"esri/request",
"esri/views/MapView",
"esri/widgets/Home",
"esri/layers/GroupLayer",
"esri/layers/MapImageLayer",
"esri/widgets/BasemapGallery",
"esri/widgets/LayerList",
"esri/widgets/Legend",
"esri/widgets/Expand",
"esri/widgets/Popup",
"esri/widgets/ScaleBar",
"esri/widgets/Search",
"esri/widgets/DistanceMeasurement2D",
"esri/widgets/AreaMeasurement2D"
], function (Map, esriRequest, MapView, Home, GroupLayer, MapImageLayer, BasemapGallery, LayerList, Legend, Expand, Popup, Search, ScaleBar, DistanceMeasurement2D, AreaMeasurement2D) {
var activeWidget = null;
var map = new Map({
basemap: "topo-vector"
});
//CREATE VIEW//
var view = new MapView({
container: "viewDiv",
map: map,
center: [-122.1148, 37.6888],
zoom: 10
});
//POPUP TEMPLATES
var BlockGroupDemographicspopup = {
title: "Block Group Demographics",
outFields: ["*"],
content: [{
type: "fields", // Autocasts as new FieldsContent()
// Autocasts as new FieldInfo[]
fieldInfos: [{
fieldName: "Map_Label",
label: "Block Group"
}, {
fieldName: "Total_Population",
label: "Population",
format: {
digitSeparator: true,
places: 0
}
},
{
fieldName: "expression/Growth"
}, {
fieldName: "expression/Poverty"
}, {
fieldName: "expression/Minority"
}, {
fieldName: "expression/Unemployed"
}, {
fieldName: "expression/75"
}, {
fieldName: "expression/HS"
}, {
fieldName: "expression/esl"
}, {
fieldName: "expression/Renting"
}, {
fieldName: "expression/Vacancy"
}, {
fieldName: "expression/vehicle"
}, {
fieldName: "expression/commuters"
}
]
}],
// autocasts to ExpressionInfo class
expressionInfos: [{
name: "Growth",
title: "Growth Since 2010",
expression: "Round(($feature.Growth_Since_2010)*100,2) + '%'"
}, {
name: "Poverty",
title: "Below Poverty Level",
expression: "Round(($feature.Pct_Below_Pvty)*100,2) + '%'"
}, {
name: "Minority",
title: "Percent Minority",
expression: "Round(($feature.Pct_Minority)*100,2) + '%'"
}, {
name: "Unemployed",
title: "Unemployed",
expression: "Round(($feature.Pct_Unemployed)*100,2) + '%'"
}, {
name: "75",
title: "Over 75",
expression: "Round(($feature.Pct_Over75)*100,2) + '%'"
}, {
name: "HS",
title: "Less than a HS Diploma",
expression: "Round(($feature.Pct_LessThanHS)*100,2) + '%'"
}, {
name: "esl",
title: "Limited English Proficiency",
expression: "Round(($feature.Pct_LEP)*100,2) + '%'"
}, {
name: "Renting",
title: "Renting",
expression: "Round(($feature.Pct_Renting)*100,2) + '%'"
}, {
name: "Vacancy",
title: "Housing Vacancy Rate",
expression: "Round(($feature.Vacancy_Rate)*100,2) + '%'"
}, {
name: "vehicle",
title: "Zero Vehicle Households",
expression: "Round(($feature.Pct_ZeroVehicle)*100,2) + '%'"
}, {
name: "commuters",
title: "Share of Commuters who take Transit",
expression: "Round(($feature.Pct_Transit)*100,2)"
}]
};
var communityConcernedPopup = {
title: "Communities of Concern",
outFields: ["*"],
content: [{
type: "fields", // Autocasts as new FieldsContent()
// Autocasts as new FieldInfo[]
fieldInfos: [{
fieldName: "Map_Label",
label: "Block Group"
}, {
fieldName: "tot_pop_ci",
label: "Population",
format: {
digitSeparator: true,
places: 0
}
}, {
fieldName: "tot_hh",
label: "Households",
format: {
digitSeparator: true,
places: 0
}
}, {
fieldName: "expression/college"
}, {
fieldName: "expression/nocollege"
}, {
fieldName: "expression/75"
}, {
fieldName: "expression/singleparent"
}, {
fieldName: "expression/esl"
}, {
fieldName: "expression/disabled"
}, {
fieldName: "expression/nocars"
}]
}],
// autocasts to ExpressionInfo class
expressionInfos: [{
name: "college",
title: "Below 200% of Poverty Level",
expression: "Round(($feature.pct_below2)*100,2) + '%'"
}, {
name: "nocollege",
title: "Percent Minority",
expression: "Round(($feature.pct_minori)*100,2) + '%'"
}, {
name: "75",
title: "Over 75",
expression: "Round(($feature.pct_over75)*100,2) + '%'"
}, {
name: "singleparent",
title: "Single-Parent Families",
expression: "Round(($feature.pct_spfam)*100,2) + '%'"
}, {
name: "esl",
title: "Limited English Proficiency",
expression: "Round(($feature.pct_lep)*100,2) + '%'"
}, {
name: "disabled",
title: "Disabled Population",
expression: "Round(($feature.pct_disab)*100,2) + '%'"
}, {
name: "nocars",
title: "Zero Vehicle Households",
expression: "Round(($feature.pct_zvhhs)*100,2) + '%'"
}]
};
var projPopGrowth2040 = {
title: "Projected Population Growth 2040",
outFields: ["*"],
content: [{
type: "fields",
fieldInfos: [
{ fieldName: "expression/popGrowth" }
]
}],
expressionInfos: [
{
name: "popGrowth",
title: "Forecasted Percent Growth to 2040",
expression: "Round(($feature.MTC_PopGrowth)*100,2) + '%'"
}
]
};
//FIRST TWO MAPIMAGELAYERS SHOWN FOR REFERENCE ONLY
//var employment = new MapImageLayer...
//var landuse = new MapImageLayer...
//ONE OF THE LAYERS EXPERIENCING ISSUES
var demographics = new MapImageLayer({
url: "removed",
title: "Demographics",
visible: false,
opacity: 0.6,
sublayers: [
{ id: 2, title: "Projected Population Growth 2040", popupTemplate: projPopGrowth2040 },
{ id: 1, title: "Communities of Concern", popupTemplate: communityConcernedPopup },
{ id: 0, title: "Census Block Group Demographics", popupTemplate: BlockGroupDemographicspopup }
]
});
var LandUseAndDemo = new GroupLayer({
title: "Land Use And Demographics",
visible: false,
visibilityMode: "independent",
layers: [/*employment, landuse,*/ demographics]
})
map.add(LandUseAndDemo)
view.popup.watch('selectedFeature', function (gra) {
if (gra && gra.geometry) {
view.graphics.removeAll();
if (gra.geometry.type === "point") {
gra.symbol = {
type: "simple-marker",
color: [0, 255, 255, 1],
outline: {
color: [0, 255, 255, 1],
width: 2
}
};
} else if (gra.geometry.type === "polyline") {
gra.symbol = {
type: "simple-line",
color: [0, 255, 255, 0.8],
width: 2
};
} else if (gra.geometry.type === "polygon") {
gra.symbol = {
type: "simple-fill",
//color: [0,255,255,0.4],
outline: {
color: [0, 255, 255, 1],
width: 2
}
};
} else {
console.log(gra.sourceLayer.title + " is a " + gra.geometry.type)
}
view.graphics.add(gra);
} else {
view.graphics.removeAll();
}
});
