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

Display a popupTemplate on Multipoint (JavaScript 4.4)

MichaelLodes2

Hello together,

I already managed to display a single Point (from client side) including a popupTemplate. But how can I display a popupTemplate on a big amount of Points (a few thousand) efficiently?

I tried to do this by adding single Points to a MultiPoint object, but failed. The points are displayed in the map, but without the popup by clicking on the point.

You can see a code snippet below. If I put the single Point into the Graphic object, the popupTemplate is displayed in the map. But when I put the Point into the MultiPoint object, and that MultiPoint into the Graphic, that doesn't work.

Could you tell me the best practice for this case please?

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">var</SPAN> multipoint <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Multipoint</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; spatialReference<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN> wkid<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">4326</SPAN> <SPAN class="punctuation token">}</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">var</SPAN> point <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Point</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; longitude<SPAN class="punctuation token">:</SPAN> <SPAN class="operator token">-</SPAN><SPAN class="number token">49.97</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; latitude<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">41.73</SPAN>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; multipoint<SPAN class="punctuation token">.</SPAN><SPAN class="token function">addPoint</SPAN><SPAN class="punctuation token">(</SPAN>point<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">var</SPAN> markerSymbol <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">SimpleMarkerSymbol</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; color<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="number token">226</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">119</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">40</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; outline<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN> 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; color<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="number token">255</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">255</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">255</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; width<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">2</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>


&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">var</SPAN> pointGraphic <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Graphic</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; geometry<SPAN class="punctuation token">:</SPAN> multipoint<SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; symbol<SPAN class="punctuation token">:</SPAN> markerSymbol<SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; popupTemplate<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; title<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Point 1"</SPAN><SPAN class="punctuation token">,</SPAN>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; content<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Content"</SPAN>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;view<SPAN class="punctuation token">.</SPAN>graphics<SPAN class="punctuation token">.</SPAN><SPAN class="token function">addMany</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN>pointGraphic<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>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

Thank you very much!

Michael

Find more posts tagged with

Accepted answers

ThomasSolow

Try using a graphics layer instead of view.graphics. Your popup should work if you do that. This is a longstanding bug.

As far having different attributes for each point in a multipoint, there's no built-in way to do this that I'm aware of. I would suggest using many point graphics instead of a multipoint if you need this. Instantiating many different geometries and graphics can be expensive but only if there are a relatively large number of graphics. For most users this isn't an issue.

If it is an issue for you, one solution would be to have a dictionary that maps [x, y] to popup templates and at some point in the opening popup process that occurs on click, you could do a lookup in this map and change the content/title of the popup template.

All comments

MichailMarinakis1

Hi @ThomasSolow ,

I have noticed that we have the same issue with a multipoint feature layer and the popup for version 4.21 of the ArcGIS JS API.

We create a feature layer based on a feature service with feature access. We set the popuptemplate for this service in the code. We load the layer in a mapview. When we click on one of the multipoint features to open the popup, then it doesn't open.

In the same feature service we have more layers with polygons and lines. We load these layers too in the mapview and the popup works perfectly.

We have also noticed that when we create a new feature from the multipoint feature layer, using the Editor widget, then the popup appears until we refresh the page. I guess there is a temporary graphic created?

Can you please confirm if the popup for multipoint feature services works fine with the latest version of the API (4.21) ?

Thanks!

ThomasSolow

Try using a graphics layer instead of view.graphics. Your popup should work if you do that. This is a longstanding bug.

MichaelLodes2

I additionally want to show point specific attributes in that popupTemplate 🙂

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.