I am integrating Esri maps into an Angular app and utilizing Angular components to render popups by passing data from the PopupTemplate's content method:
layer.popupTemplate = new PopupTemplate({
content: (feature: { graphic: __esri.Graphic }) => {
this.publishPopupData(layer, feature.graphic.attributes);
return popupComponent.viewContainerRef.element.nativeElement;
},
// other properties...
});
While this setup works effectively, a challenge arises when multiple features exist at a particular point. If a user cycles through features and revisits one that was previously displayed, the content method does not re-execute, leading to unprocessed popup data.
Although I can access the currently selected feature on the MapView's popup, determining its originating layer is essential for accurate data publication (each layer has distinct requirements for processing ArcGIS data into popup models).
mapView.popup.watch('selectedFeature', (graphic: __esri.Graphic) => {
const layer = ???;
this.publishPopupData(layer, graphic.attributes);
});
In theory, graphic.layer should provide the layer reference, but in my case, it consistently returns null.
Is there a way to enforce the call of the content method for every feature, regardless of previous execution? Alternatively, is there a method to determine a feature's layer from MapView.popup or explore other potential solutions?
For context, the popups are associated with sublayers of MapImageLayer.