Select to view content in your preferred language

Displaying all attributes on click for features in Map Image Layers (JS 4.24)

1159
3
10-20-2022 04:55 PM
moremeowbell
New Contributor III

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

 

 
However, I am getting no content in my pop-up at the moment. Here's what I'm looking at currently:
moremeowbell_0-1666309966806.png

 

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: ["*"],                   
        }
    });
});

 

0 Kudos
3 Replies
Noah-Sager
Esri Regular Contributor

Hi @moremeowbell, unfortunately, MapImageLayer does not support defaultPopupTemplateEnabled.

https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Popup.html#defaultPopupTe...

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.

https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-support-Sublayer.html#crea...

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. 

moremeowbell
New Contributor III

@Noah-Sager 

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
0 Kudos
JayakumarPD
Occasional Contributor

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