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.

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

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

<SPAN class="keyword token">var</SPAN> featureLayer <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">FeatureLayer</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>‍
&nbsp; url<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"..."</SPAN>
&nbsp; popupTemplate<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp; mediaInfos<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="punctuation token">.</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">]</SPAN>
&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>

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

var webmap <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">WebMap</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
 portalItem<SPAN class="operator token">:</SPAN> <SPAN class="punctuation token">{</SPAN>id<SPAN class="operator token">:</SPAN> <SPAN class="string 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>

My WebApp is available on JS BIN.

Michelle.

Find more posts tagged with

Accepted answers

ThomasSolow

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

All comments

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

<SPAN class="comment token">// Added code</SPAN>
webmap<SPAN class="punctuation token">.</SPAN><SPAN class="token function">then</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">(</SPAN>m<SPAN class="punctuation token">)</SPAN><SPAN class="operator token">=</SPAN><SPAN class="operator token">></SPAN><SPAN class="punctuation token">{</SPAN>‍<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

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

Thank you, Michelle

MichelleJean

Thank you rscheitlin‌

MichelleJean

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.

ThomasSolow

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

MichelleJean

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<SPAN class="operator token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp; mediaInfos<SPAN class="operator token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="punctuation token">{</SPAN> 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; value<SPAN class="operator token">:</SPAN><SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; theme<SPAN class="operator token">:</SPAN> <SPAN class="string token">"..."</SPAN> <SPAN class="punctuation token">}</SPAN>
&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">]</SPAN>
<SPAN class="punctuation token">}</SPAN>‍‍‍‍‍‍

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

Michelle.

rscheitlin

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.

ThomasSolow

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

MichelleJean

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.

rscheitlin

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

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.