topic popupTemplate when loading WebMap in ArcGIS JavaScript Maps SDK Questions

popupTemplate when loading WebMap

MichelleJean — Sat, 11 Dec 2021 07:14:11 GMT

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.

Re: Popup Template

RobertScheitlin__GISP — Tue, 07 Mar 2017 22:27:46 GMT

Michelle,

From the docs:

You can configure pop-ups in ArcGIS Server service layers, hosted feature layers, hosted tile layers, layers from files, and OGC WMS and WFS layers. If you are configuring pop-ups for an ArcGIS Server feature layer, you can also set which fields are editable. If your layers contain related data, you can configure pop-ups to show the related data within the pop-up or in a table.

Configure pop-ups—ArcGIS Online Help | ArcGIS

Re: popupTemplate when loading WebMap

MichelleJean — Wed, 08 Mar 2017 08:19:56 GMT

Hi Robert Scheitlin, GISP

From the documentation it is my understanding that you can use the popupTemplate when loading a WebMap. But I can not seem to find a sample code.

I updated my question to make it a little more precise.

Re: popupTemplate when loading WebMap

ThomasSolow — Wed, 08 Mar 2017 14:33:23 GMT

What do you mean by "use the popup template?" In other words, what's your goal here?

You can set the popup template per layer using the popupTemplate property, as in the sample you linked. You can also set the popup template on a MapView or a SceneView using the popup property. In the case of your app, it would be a MapView: MapView | API Reference | ArcGIS API for JavaScript 4.3

Re: popupTemplate when loading WebMap

RobertScheitlin__GISP — Wed, 08 Mar 2017 16:06:19 GMT

Michelle,

If you are configuring your popups in the web map using the AGOL map viewer, then you do not have to worry about the popup template stuff. You configure the popup using the map viewer GUI, which allows and the options like charts and images.

Re: popupTemplate when loading WebMap

MichelleJean — Sat, 11 Dec 2021 07:14:13 GMT

Hi Thomas,

My goal is to load a WebMap and then customize it's feature layer popup in order to set up a certain dojox charting theme.

The code above is available on JS BIN.

Can I do that using the popupTemplate?

popupTemplate: {
  mediaInfos: [{ 
      value:{
         theme: "..." }
  }]
}‍‍‍‍‍‍

If so, could you provide me a sample code? I can't seem to get this code working in my JS BIN.

Michelle.

Re: popupTemplate when loading WebMap

ThomasSolow — Wed, 08 Mar 2017 18:35:27 GMT

I think your best bet would be to edit the popup theme elsewhere, as Robert mentioned. I don't know a lot about what goes into setting up these kinds of popups, but you're probably better off editing it in the application that was used to create the web map and define the pie chart in the first place.

Edit: this turns out to simpler than I thought.

You can change the chart theme like this: JS Bin - Collaborative JavaScript Debugging

You can totally remake the chart, which includes redefining which fields get charted like this: JS Bin - Collaborative JavaScript Debugging

Re: popupTemplate when loading WebMap

MichelleJean — Wed, 08 Mar 2017 23:04:42 GMT

Thomas Solow‌ this is really beautiful, works like a charm

Is there something I should be doing regarding the tooltipField ?

The chart doesn't seem to be responsive on hover.

Michelle.

Re: popupTemplate when loading WebMap

ThomasSolow — Thu, 09 Mar 2017 15:27:55 GMT

The API documentation says tooltipField is "Used for chart values. Defines the tooltip display field that displays when hovering over the chart."

I'm not sure what it actually does though. I couldn't get anything to happen when hovering my mouse over the chart while changing that value. I think it should be set to the name of one of the fields being used to construct the pie graph but I tried this and didn't notice a change.

Re: popupTemplate when loading WebMap

MichelleJean — Thu, 09 Mar 2017 21:02:20 GMT

Thank you rscheitlin‌

Re: popupTemplate when loading WebMap

MichelleJean — Sat, 11 Dec 2021 07:14:16 GMT

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

Re: popupTemplate when loading WebMap

ThomasSolow — Tue, 21 Mar 2017 20:59:42 GMT

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

Re: popupTemplate when loading WebMap

MichelleJean — Sat, 11 Dec 2021 07:14:19 GMT

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
 });
 
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: popupTemplate when loading WebMap

ThomasSolow — Wed, 22 Mar 2017 12:54:11 GMT

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.

Re: popupTemplate when loading WebMap

MichelleJean — Wed, 22 Mar 2017 17:19:05 GMT

Lovely

Thank you, Thomas Solow