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

Popup vs PopupMobile

IanBridger

I have a GraphicsLayer, and want the user to click on shapes in that layer to display information that I only hold locally. I am using the Map.infoWindow object for the popup so that it is identical to the ESRI standard infoWindow.

When the size of the map is bigger than the "mobileBreakPoint" URL parameter (default 600px) then Map.infoWIndow is an instance of Popup, and when it's below that threshold then it's a PopupMobile, but the documentation says they share a common API and should therefore be interchangeable as far as my code is concerned.

However the Popup displays my HTML content flawlessly, but the PopupMobile opens with no content, it's empty. This is true even if the content is a simple string, ie "test".

Here's my code:

myLayer<SPAN class="punctuation token">.</SPAN><SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"click"</SPAN><SPAN class="punctuation token">,</SPAN> lang<SPAN class="punctuation token">.</SPAN><SPAN class="token function">hitch</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>evt<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
  evt<SPAN class="punctuation token">.</SPAN><SPAN class="token function">stopPropagation</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
  <SPAN class="keyword token">var</SPAN> iw <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>Map<SPAN class="punctuation token">.</SPAN>infoWindow<SPAN class="punctuation token">;</SPAN>
  iw<SPAN class="punctuation token">.</SPAN><SPAN class="token function">setFeatures</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN>evt<SPAN class="punctuation token">.</SPAN>graphic<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
  iw<SPAN class="punctuation token">.</SPAN><SPAN class="token function">setContent</SPAN><SPAN class="punctuation token">(</SPAN>myHTMLContent<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
  iw<SPAN class="punctuation token">.</SPAN><SPAN class="token function">show</SPAN><SPAN class="punctuation token">(</SPAN>evt<SPAN class="punctuation token">.</SPAN>mapPoint<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="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

I've attached a couple of images, infoWindow01 shows Popup working with "test" for content, and infoWIndow02 shows PopupMobile not working, all I did was shrink the map window between snapshots.

Many thanks!

infoWindow01.png

infoWindow02.png

IMGIS 2023 - Industry Water Flyer_Digital1032023.pdf

ArcGIS Earth Certificate.JPG

Michele_Hosking_0-1759885153519.png

headshot_1.jpg

Find more posts tagged with

Accepted answers

RobertScheitlin__GISP

Ian,

Here is what works for both popups:

      myLayer<SPAN class="punctuation token">.</SPAN><SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"click"</SPAN><SPAN class="punctuation token">,</SPAN> lang<SPAN class="punctuation token">.</SPAN><SPAN class="token function">hitch</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>evt<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
        evt<SPAN class="punctuation token">.</SPAN><SPAN class="token function">stopPropagation</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
        <SPAN class="keyword token">var</SPAN> iw <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>map<SPAN class="punctuation token">.</SPAN>infoWindow<SPAN class="punctuation token">;</SPAN>
        <SPAN class="keyword token">var</SPAN> infoTemplate <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">InfoTemplate</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
        infoTemplate<SPAN class="punctuation token">.</SPAN><SPAN class="token function">setTitle</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"Hello World"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
        infoTemplate<SPAN class="punctuation token">.</SPAN><SPAN class="token function">setContent</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"Test"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
        evt<SPAN class="punctuation token">.</SPAN>graphic<SPAN class="punctuation token">.</SPAN><SPAN class="token function">setInfoTemplate</SPAN><SPAN class="punctuation token">(</SPAN>infoTemplate<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
        iw<SPAN class="punctuation token">.</SPAN><SPAN class="token function">setFeatures</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN>evt<SPAN class="punctuation token">.</SPAN>graphic<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
        iw<SPAN class="punctuation token">.</SPAN><SPAN class="token function">show</SPAN><SPAN class="punctuation token">(</SPAN>evt<SPAN class="punctuation token">.</SPAN>mapPoint<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="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

for some reason the mobile popup wants the graphic to have an InfoTemplate.

All comments

IanBridger

Thanks Robert - I did try that, and found that setFeatures connects the popup and layer/features, and then controls highlighting them while it's on the screen, and so on. But I also need to use setContent because the values I need to display inside the popup which are not attributes of the shape or held in the Portal yet, they're local in the browser. In fact, the shapes themselves are local too, someone has drawn them but nothing has been saved yet. If I leave out setContent, the Popup is empty as well as the PopupMobile.

RobertScheitlin__GISP

Ian,

Hmm. Normally you do one or the other. setFeatures or setContent, not both. Set features uses the features (graphics) infoTemplate or popupTemplate to define the content of the popup, where as the setContent does not even need a feature associated with the popup it is just showing some info based on the content provided.

IanBridger

Hi Robert

Yes, I forgot to say, it's Web App Builder. It's an ArcGIS Portal Web App, 10.6.1 with JS 3.27.

Thanks!

Ian

RobertScheitlin__GISP

Ian,

Is this a Web App Builder application?

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.