I have a JS API 4.x application that needs to load arbitrary layers provided by users and display popups for these layers. Several of these layers are tile layers. Part of the app is a custom TypeScript widget to add these layers to the map but in it I'm having trouble setting the popup template. I want to use the feature service sublayer of the tile layer to access feature info and display the popups (like in this post).
This code finds the fieldInfos for a layer (query the service for all its fields and returns them in an array of field objects with attributes of type, name and alias):
private async _getFieldInfo(layer: LayerRef): Promise<Array<{fieldName: string, label: string}>> {
...
const response = await request(fieldUrl, {query: {f: "json"}, responseType: "json"}).then(response => response.data);
const fields = response.fields;
...
const fieldInfos: {fieldName: string, label: string}[] = [];
response.type === "Feature Layer" ? fields.map((field: {name: string, type: string, alias: string}) =>
...
fieldInfos.push({fieldName: field.name, label: field.alias}) : null) : null;
return fieldInfos;
}
Then as part of my add layer function, I have:
const fieldInfos = await this._getFieldInfo(layerRef);
layer.when(function(layer: TileLayer){
const featsSublayer = layer.findSublayerById(0)
featsSublayer.load();
featsSublayer.popupEnabled = true;
featsSublayer.popupTemplate = {
title: layerRef.name,
content: [{
type: "fields",
fieldInfos: fieldInfos,
}],
outFields: ["*"]
}
});
I'm getting a type error that prevents me from compiling on the fieldInfos variable in the content object of the sublayer popup template:
Type '{ type: "fields"; fieldInfos: { fieldName: string; label: string; }[]; }' is not assignable to type 'Content'.
Object literal may only specify known properties, and 'fieldInfos' does not exist in type 'Content'.ts(2322)
Can anyone point me in the right direction to get my popup template working?