I am using a FeatureLayer to show Zip Code tabulation areas on a map using the JS api. For my popup template I am using functions which accept the feature as a parameter and then make use of an attribute on the feature to create the content. Here is a relevant code sample with the guts of those function taken out for simplicity.
var usaZipCodes = new FeatureLayer({
url: "https://thisisaplaceholderurl.com",
renderer: {
type: "simple",
symbol: {
type: "simple-fill",
color: utilityColorArray.concat([0.3]),
style: "forward-diagonal",
outline: {
color: utilityColor,
width: 1
}
}
},
visible: false,
outFields: [ "ZIP" ],
popupTemplate: {
title: function (feature) {
if (!feature.graphic.attributes.ZIP) return "";
// Code using the ZIP attribute
return "";
},
content: function (feature) {
if (!feature.graphic.attributes.ZIP) return "";
// Code using the ZIP attribute
return "";
}
}
});
This works perfectly for popups when I click and there is only one feature. But if I click in a place where features overlap (i.e close to a border between two zip codes) the ZIP attribute is empty on the "extra" features so I end up with empty popups for all but one of the features that are clicked. See the attached images for a demonstration of this.
I am having this issue as well. Were you able to solve this?
Unfortunately I didn't really get it working with this method. I ended up doing something of a workaround.
I basically ended up with a solution where there was only ever one graphic with a popup template at a time. I used the pointer-move and pointer-leave events on the view to add and remove graphics as my cursor moved over a new postal code and left an old one. So by the time I clicked I was clicking on the newly added graphic for the postal code I was hovering over. This also let me darken the fill of the postal code on hover which was another requirement for my case. So I removed the popup templates from the feature layer entirely and added popup templates on my "temporary" graphics that I added whenever the cursor entered a new postal code. This has done the job so far.