hello, I have a MapImageLayer (hosted on our portal), with several sublayers. I wish to display some other data in the popup by using a function to return the content (the function is getting called, and I can return what I want). However, the attribute data I need to create/query the other data (non-arcgis data) is not being passed to the content function. The only attribute being sent back is the 'Name' field, and I cannot find a way to set the outFields property for the query that gets run. Snippet this . map . layers . forEach ( ( layer ) = > { if ( layer . title === 'Some Title' ) { layer . outFields = [ "*" ] ; // layer . sublayers . forEach ( subLayer = > { subLayer . outFields = [ "*" ] ; // if ( subLayer . title === 'hidden layer' ) { subLayer . visible = false ; } else if ( subLayer . title === 'other layer' ) { this . otherLayer = subLayer ; } subLayer . popupTemplate = { title : subLayer . title , content : this . getData . bind ( this ) , actions : [ { id : subLayer . title , className : 'esri-icon-table' , title : 'Dashboard' } ] } ; } } ) ; } } ) ; Snippet getData ( evt ) { console . debug ( evt ) ; // console . debug ( this . view . popup . viewModel . selectedFeature ) ; // There are definitely more attributes on the layer, but only Name is being returned. Am I missing something somewhere in my code to set the outFields for a Portal hosted MapImageLayer? or is there something I need to have changed in the service to return all attributes? thanks!

The outFields example in the PopupTemplate sets that property outside of the popupTemplate property of the sublayer for some reason. USALayer = new MapImageLayer ( { url : "https://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer" , id : "USA" , sublayers : [ { id : 2 , visible : true , popupTemplate : { title : "{state_name} Population" , content : getInfo } , outFields : [ "*" ] } ] } ) outFields does work though, but I was in the same boat as Leo since I just blindly followed the example. After reading your answer I realized there was no reason to put it outside of the popupTemplate. Thanks!

nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

how do I access all attributes in a MapImageLayer SubLayer from PopupTemplate

Anonymous User

hello,

I have a MapImageLayer (hosted on our portal), with several sublayers. I wish to display some other data in the popup by using a function to return the content (the function is getting called, and I can return what I want). However, the attribute data I need to create/query the other data (non-arcgis data) is not being passed to the content function. The only attribute being sent back is the 'Name' field, and I cannot find a way to set the outFields property for the query that gets run.

Snippet

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>map<SPAN class="punctuation token">.</SPAN>layers<SPAN class="punctuation token">.</SPAN><SPAN class="token function">forEach</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">(</SPAN>layer<SPAN class="punctuation token">)</SPAN> <SPAN class="operator token">=</SPAN><SPAN class="operator token">></SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>layer<SPAN class="punctuation token">.</SPAN>title <SPAN class="operator token">===</SPAN> <SPAN class="string token">'Some Title'</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; layer<SPAN class="punctuation token">.</SPAN>outFields <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="string token">"*"</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="comment token">//<-- does nothing</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; layer<SPAN class="punctuation token">.</SPAN>sublayers<SPAN class="punctuation token">.</SPAN><SPAN class="token function">forEach</SPAN><SPAN class="punctuation token">(</SPAN>subLayer <SPAN class="operator token">=</SPAN><SPAN class="operator token">></SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; subLayer<SPAN class="punctuation token">.</SPAN>outFields <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="string token">"*"</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="comment token">//<-- also does nothing</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>subLayer<SPAN class="punctuation token">.</SPAN>title <SPAN class="operator token">===</SPAN> <SPAN class="string token">'hidden layer'</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; subLayer<SPAN class="punctuation token">.</SPAN>visible <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">false</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN> <SPAN class="keyword token">else</SPAN> <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>subLayer<SPAN class="punctuation token">.</SPAN>title <SPAN class="operator token">===</SPAN> <SPAN class="string token">'other layer'</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>otherLayer <SPAN class="operator token">=</SPAN> subLayer<SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; subLayer<SPAN class="punctuation token">.</SPAN>popupTemplate <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; title<SPAN class="punctuation token">:</SPAN> subLayer<SPAN class="punctuation token">.</SPAN>title<SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; content<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>getData<SPAN class="punctuation token">.</SPAN><SPAN class="token function">bind</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; actions<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; id<SPAN class="punctuation token">:</SPAN> subLayer<SPAN class="punctuation token">.</SPAN>title<SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; className<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">'esri-icon-table'</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; title<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">'Dashboard'</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">]</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

Snippet

<SPAN class="token function">getData</SPAN><SPAN class="punctuation token">(</SPAN>evt<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp; console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">debug</SPAN><SPAN class="punctuation token">(</SPAN>evt<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="comment token">//<-- only attribute is 'Name'</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp; console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">debug</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>view<SPAN class="punctuation token">.</SPAN>popup<SPAN class="punctuation token">.</SPAN>viewModel<SPAN class="punctuation token">.</SPAN>selectedFeature<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="comment token">//<-- same</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

There are definitely more attributes on the layer, but only Name is being returned. Am I missing something somewhere in my code to set the outFields for a Portal hosted MapImageLayer? or is there something I need to have changed in the service to return all attributes? thanks!

Find more posts tagged with

Accepted answers

All comments

s.schuette_ct

@HeatherGonzago Is it possible by now to use defaultPopupTemplateEnabled for MapImageLayers? If so, could you provide a sample? All the samples I can find define their own PopupTemplate or use FeatureLayers.

Jose_LuisParra_Ocampo

The outFields example in the PopupTemplate sets that property outside of the popupTemplate property of the sublayer for some reason.

USALayer <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">MapImageLayer</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
  url<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"https://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer"</SPAN><SPAN class="punctuation token">,</SPAN>
  id<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"USA"</SPAN><SPAN class="punctuation token">,</SPAN>
  sublayers<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="punctuation token">{</SPAN>
    id<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">2</SPAN><SPAN class="punctuation token">,</SPAN>
    visible<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">,</SPAN>
    popupTemplate<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
      title<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"{state_name} Population"</SPAN><SPAN class="punctuation token">,</SPAN>
      content<SPAN class="punctuation token">:</SPAN> getInfo
    <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
    outFields<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="string token">"*"</SPAN><SPAN class="punctuation token">]</SPAN>
  <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">]</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

outFields does work though, but I was in the same boat as Leo since I just blindly followed the example. After reading your answer I realized there was no reason to put it outside of the popupTemplate. Thanks!

HeatherGonzago

Glad you got it working. 🙂

hoogw

Exactly solved my problem!!!!!!!! This bug bother me 8 hours, you help me made it. Thanks!!!!!!!

HeatherGonzago

Another thing, the code you pasted above

const _dynamic_image_layer = new MapImageLayer({
  // url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer",
  url: ___url_string,
   
  /*by default, sublayers not define, will show all layers.
    * if sublayers defined as [....],  only show what you put in [].    
    */  

  sublayers: [{
    id: 13,
    title: "xyz",
    outFields: ["*"],
    popupTemplate : {
    // autocasts as new PopupTemplate()
    title: "jjjjjj",
    content: getInfo,
    },
  outFields: ["*"]
  },
  {
    id: 8,
    title: "yyyyyyyy" 
  }]
});

You have the outFields set outside of the PopupTemplate. It is not supported on the subLayer.
Also, remove the comma after getInfo. What happens when you update with these changes?
As for my other response with the provided workaround, this still applies to instances where
you are using a MapImageLayer with multiple sublayers and want to populate all fields.

format-all.gif

HeatherGonzago

We made some updates to how popups work when fetching all field data in the latest release (4.12). The original response of setting the `popupTemplate.outFields` to include everything still holds true but setting the popupTemplate's content to {"*"} is no longer supported. Instead, we suggest setting view.popup.defaultPopupTemplateEnabled = true. Unfortunately, this is not implemented on the MapImagelayer. As a workaround for now, you can add this bit of code to get this to work,

sublayer.createFeatureLayer()
.then((featureLayer) => featureLayer.load())
.then((featureLayer) => {
   sublayer.popupTemplate = featureLayer.createPopupTemplate();
 })

hoogw

ESRI staff,

outFields: ["*"] ------------ does nothing, it not work

hoogw

I get nothing on popupTemplate.

const _dynamic_image_layer = new MapImageLayer({
// url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer",
url: ___url_string,

/*by default, sublayers not define, will show all layers.
* if sublayers defined as [....], only show what you put in [].
*/
sublayers: [{
id: 13,
title: "xyz",
outFields: ["*"],
popupTemplate : {
// autocasts as new PopupTemplate()
title: "jjjjjj",
content: getInfo,

},
outFields: ["*"]
},

{
id: 8,
title: "yyyyyyyy"
}]

});

HeatherGonzago

Thanks Tory,

Setting the `outFields` should work with the MapImageLayer. If you come across this again or have any problems, just let us know.

Thanks,

Heather

Anonymous User

Thanks for the update Heather!

I actually solved this by using each layer as a FeatureLayer instead of the default SubLayer type from the webmap item, then settings started working as originally planned. If I get a chance, I will try to cycle back to this and see if the PopupTemplate.outFields option works for my use case.

HeatherGonzago

This is a little late in a response. In case someone else comes across this, make sure that you set the PopupTemplate.outFields property. This property returns the fields needed to render the popup properly.

Anonymous User

ok. I double checked the WebMap that the portal item is referencing, the popups are fully configured there with all the desired attribute fields. I tried adding the fieldInfos array to the popupTemplate for the sublayer(s) and still no go. it looks like a limitation of the 4.x branch?

Thanks for the info. I'll keep digging to see if I can solve this!

RobertScheitlin__GISP

Troy,

I have never had a workflow using a Portal item and then trying to define the sublayers popup. I would imagine that you need to define the popups fields in the webmap that the portal item references.

Anonymous User

Thanks Robert,

No, the MapImageLayer (and sublayers) are created/added when I create the map from a portal item:

this.map = new WebMap({ portalItem: {id: "PortalItemID" } });

I did forget to mention that the Name field is indeed the Display Field for the layer(s), so that would explain why it is being returned

how do I define other fields on the PopupTemplate if I'm using a function call to create/return the required HTML? is it the fieldInfos array?

like such (sorry, at lunch and can't test at the moment):

subLayer.popupTemplate = {
 title: subLayer.title,
 content: this.getData.bind(this),
 fieldInfos: [{
    fieldName:'CS_ID' //<-- desired field
 }]
 actions: [{
 id: subLayer.title,
 className: 'esri-icon-table',
 title: 'Dashboard'
 }]
};

Thanks again!

RobertScheitlin__GISP

Troy,

Do you define the sublayers for this MapImageLayer when you add it to the map? Sublayer will default to only include the ObjectId and Display Field for performance reasons (not documented that I know of). If you define other fields in the sublayers popup template when constructing the MapImageLayer then those fields will be included when accessing the sublayer.

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.