I'm working with JSAPI 4.7 I really like Popup Templates for what they do out of the box - attribute substitution/functions/promises/actions. However, I would really like to place my popup contents somewhere else on my page (not on map). Like I do with LayerList and Legend widgets. However, when I set the container property for my popups, instead of putting my contents in it, it removes that element from it's parent node, and still floats it over the map. Not what I was expecting. var view = new MapView ( { container : "viewDiv" , // Reference to the DOM node that will contain the view map : map , // References the map object created in step 3 center : [ - 90 , 50 ] , zoom : 5 , popup : "queryResults" } ) ; And later in my view.on click event view . popup . open ( { title : "Results" , content : "This is some content" } ) ; So my question is - am I doing this wrong? I am assuming this behaviour is as designed, and I'm asking too much. However, I'd like to be pleasantly surprised. Alternatively, is there a way to obtain the rendered content without the popup popping up, so I can insert it in the DOM myself? I'm hoping to use the popup templates for identify query task results. 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; } } }

Custom Popup container or how do I put content elsewhere?

LizEidsness

I'm working with JSAPI 4.7

I really like Popup Templates for what they do out of the box - attribute substitution/functions/promises/actions. However, I would really like to place my popup contents somewhere else on my page (not on map). Like I do with LayerList and Legend widgets. However, when I set the container property for my popups, instead of putting my contents in it, it removes that element from it's parent node, and still floats it over the map. Not what I was expecting.

<SPAN class="keyword token">var</SPAN> view <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">MapView</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
 container<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"viewDiv"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="comment token">// Reference to the DOM node that will contain the view</SPAN>
 map<SPAN class="punctuation token">:</SPAN> map<SPAN class="punctuation token">,</SPAN> <SPAN class="comment token">// References the map object created in step 3</SPAN>
 center<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="operator token">-</SPAN><SPAN class="number token">90</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="number token">50</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
 zoom<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">5</SPAN><SPAN class="punctuation token">,</SPAN>
 popup<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"queryResults"</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>‍‍‍‍‍‍‍

And later in my view.on click event

view<SPAN class="punctuation token">.</SPAN>popup<SPAN class="punctuation token">.</SPAN><SPAN class="token function">open</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
 title<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Results"</SPAN><SPAN class="punctuation token">,</SPAN>
 content<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"This is some content"</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>‍‍‍‍

So my question is - am I doing this wrong? I am assuming this behaviour is as designed, and I'm asking too much. However, I'd like to be pleasantly surprised.

Alternatively, is there a way to obtain the rendered content without the popup popping up, so I can insert it in the DOM myself? I'm hoping to use the popup templates for identify query task results.

Thanks

Find more posts tagged with

Accepted answers

khutchins

I don't see the issue with the div being placed in the view. Did you disable the popup for the layer so the default behavior doesn't occur? Here's a test case:

JS Bin - Collaborative JavaScript Debugging

All comments

LizEidsness

Your second case works for me. The problem I was originally having, and also with your first example, is the popup/feature was attached to the view. I wasn't realizing it could be "opened" on it's own merits. I think when it's attached to the view, the view takes it over and moves it. The ESRI support example I have used a popup, but also on it's own, so that's why it worked. I like your Feature example though because it has less Popup-y formatting.

Oh and thanks!!

khutchins

I don't see the issue with the div being placed in the view. Did you disable the popup for the layer so the default behavior doesn't occur? Here's a test case:

JS Bin - Collaborative JavaScript Debugging

LizEidsness

This widget presents the same problem I am having. If I put the DIV target outside of the view (say add a block beneath the map), it's taken by the widget (removed from the DOM) and placed in the view. I think I am missing a step somewhere else. I was given some esri support using Popup and it works. But I don't know why. Yet.

khutchins

Liz,

One option might be to use the Feature widget to display the popup content. You'd need to build in support for multiple features and displaying the title but it does allow you to display the popup content in another container. Here's a sample app:

JS Bin - Collaborative JavaScript Debugging

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.