popupTemplate when loading WebMap

[MichelleJean]

Is it possible to use the Popup Template when loading a WebMap ?

The Popup Template sample code is built in the context of loading a feature layer, but not an entire WebMap.

The sample code when loading a feature layer is 

var featureLayer = new FeatureLayer({‍
  url: "..."
  popupTemplate: {
     mediaInfos: [{ ... }]
  }
})‍‍‍‍‍‍‍‍‍‍‍‍

but how do you use the popupTemplate when loading a WebMap with feature & tile layers ?

var webmap = new WebMap({
 portalItem: {id: "..."}
})‍‍‍‍‍‍

My WebApp is available on JS BIN.

Michelle.

[MichelleJean]

Hi Thomas Solow‌ ,

Is your Java 4.2 JS Bin - Collaborative JavaScript Debuggingalso available in a Java 3.20 JS Bin?

The two are identical but in different java versions. 

I don't know hot to use your 

// Added code
webmap.then((m)=>{‍‍‍

code since the webmap function is only available for Java 4.0.

Thank you, Michelle

[ThomasSolow]

In the 3.20 API I think you would access the map after the promise from arcgisUtils.createMap resolves, like this:

JS Bin - Collaborative JavaScript Debugging 

That example shows how you could access the layer as well, assuming you only have one layer.  If you want to edit the popup for that layer, you should play around with the infoTemplate property on the layer.  For more on how to add a graph instead of the attribute table, take a look here: Format info window content | Guide | ArcGIS API for JavaScript 3.20

Also, here: Customize popup | Guide | ArcGIS API for JavaScript 3.20 

[MichelleJean]

Thank you Thomas Solow‌ ,

I  edited the popup and accessed de feature layer but still not working JS Bin - Collaborative JavaScript Debugging 

// this is your map
 console.log(response.map)

 var template = new PopupTemplate({
 mediaInfos:[{ 
 title: "<b>EDIT TITLE</b>",
 type: "pie-chart",
 caption: "EDIT CAPTION",
 type:"piechart",
 value:{
 theme: "Julie",
 fields:["L1____","L5____"],
 }
 }]
 });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

 // this is your layer, assuming your map only has one feature layer
 var featureLayer = response.map.getLayer(response.map.graphicsLayerIds[0],{
 mode: FeatureLayer.MODE_ONDEMAND,
 outFields: ["*"],
 infoTemplate: template
 });
 
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[ThomasSolow]

Try this: JS Bin - Collaborative JavaScript Debugging 

In this situation, your layers are already baked into the web map that you'll pulling in.  You just have to find the layer in question and edit the infoTemplate property.

[MichelleJean]

Lovely  

Thank you, Thomas Solow