I am using the ESRI JS 4.24 API to create a mapping application that pulls in a Map Image Layer that is hosted on ArcE Portal. I am having trouble getting attributes to show in my pop-up. I would like to display all attributes in the pop-up, not just a select few.
According to documentation the
outFields: ["*"]
has been replaced with
defaultPopupTemplateEnabled: true
Here is my code currently, any suggestions are welcome!
require([
"esri/config",
"esri/WebMap",
"esri/views/MapView",
"esri/widgets/AreaMeasurement2D",
"esri/widgets/Compass",
"esri/widgets/Home",
"esri/widgets/LayerList",
"esri/widgets/ScaleBar",
"esri/widgets/Search",
"esri/widgets/BasemapToggle",
"esri/widgets/Legend",
"esri/widgets/Expand",
"esri/core/reactiveUtils",
"esri/widgets/Popup",
"esri/Map",
"esri/layers/MapImageLayer",
"esri/PopupTemplate",
], function (esriConfig, WebMap, MapView, AreaMeasurement2D,
Compass, Home, LayerList, ScaleBar, Search, BasemapToggle,
Legend, Expand, reactiveUtils, Popup, Map, MapImageLayer,
PopupTemplate) {
esriConfig.portalUrl = "PORTAL_URL";
const map = new Map({
basemap: "gray-vector"
});
const view = new MapView({
map: map,
container: "viewDiv",
center: [-95, 40],
zoom: 4,
});
let layer = new MapImageLayer({
portalItem: {
id: "1acc2c72f17f44b0bd47ca31f63c9a95",
},
});
map.add(layer);
layer.when(() => {
layer.allSublayers.forEach((sublayer) => {
sublayer.popupEnabled = true;
sublayer.popupTemplate = {
defaultPopupTemplateEnabled: true,
outFields: ["*"],
}
});
});
Hi @moremeowbell, unfortunately, MapImageLayer does not support defaultPopupTemplateEnabled.
We have this on our roadmap for a future release, but currently, the workaround would be to create a FeatureLayer from each Sublayer to use defaultPopupTemplateEnabled.
I suppose the other option would be to loop through all the fields for each Sublayer once you're using the flattened collection with allSublayers and add those to the popup.
I've been able to iterate and flatten the collection, however, when I try calling Fields I'm getting a "null" and "undefined." For proof on concept, I've just been trying to call fields[0] to populate a pop-up. Do you know why it wouldn't be grabbing the field attributes? Here is the documentation I am currently following:
// print the first Sublayer's first field to the console
console.log(mapImageLayer.sublayers.items[0].fields[0]);
// OUTPUT:
alias: "OBJECTID"
defaultValue: undefined
description: "the objectid"
domain: null
editable: false
length: -1
name: "objectid"
nullable: false
type: "oid"
valueType: null
I had the same challenge but with one map service layer, I applied like this
in the feature layer constructed from client side features, I have added the bellow code
outFields: ["*"],
// these are the fields, which i got from client side features
fields:[{name:"KGISDistrictCode", alias:"KGISDistrictCode", type:"string"},
{name:"KGISDistrictName", alias:"KGISDistrictName", type:"string"},
{name:"MalePopulation", alias:"MalePopulation", type:"integer"},
{name:"FemalePopulation", alias:"FemalePopulation", type:"integer"},
{name:"TotalPopulation", alias:"TotalPopulation", type:"integer"}
],
// I have assigned the above to objectIdField
objectIdField: "fields",
renderer: districtRenderer5,
popupTemplate: popupDistrict1,
// in popup template, called this like this
const popupDistrict1 = {
title: "The Stats",
content: `<b>DisstrictCode:</b> {KGISDistrictCode} <br>
<b>DistrictName: </b> {KGISDistrictName} <br>`
};
Will it be helpful