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

API for JS: How to know when a graphicsLayer's drawing is done?

JackyCai

Hey guys,

What I am trying to do is to keep the loading icon until the drawing on the map is done, and I am using GraphicsLayer to display the features. I have tried to use map and layer events including "load", "update", "update-start", "update-end", during the process I clear all the graphics and add new graphics, but none of these events above is triggered.

Does anyone have a solution for this? Thanks!

Najděte více příspěvků označených jako

Accepted answers

FC_Basson

Have you defined the "load" event listener before adding the layer to the map (GraphicsLayer | API Reference | ArcGIS API for JavaScript 3.18 )? As for update event listeners, they only fire when the viewport changes. Otherwise, if it an issue of waiting for the API to draw a lot of features and the browser "hangs", have a look at the graphic-add event (GraphicsLayer | API Reference | ArcGIS API for JavaScript 3.18 ) - you could set a timeout handler after a graphic has been added and then just hide the loading icon after all the graphics have been added.

All comments

JackyCai

Surely I will, thank you!

FC_Basson

As long as you clear the timeout handler before setting it again it should be fine.

JackyCai

Thanks for the advice, Ken, I have tried this method, but as fcbassongis‌ mentioned, the update events fire only when the viewport changes, so it is not working for my case.

JackyCai

Thanks! It solves my problem perfectly. I thought of this method, but was thinking that the drawing time after the graphic is added might vary when there are too many graphics, but the fact is that it works pretty well!

kenbuja

This is how I turn on and off the loading icon ("loadingImg") when a layer is updating.

loading <SPAN class="operator token">=</SPAN> dom<SPAN class="punctuation token">.</SPAN><SPAN class="token function">byId</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"loadingImg"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

myLayer<SPAN class="punctuation token">.</SPAN><SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"update-start"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp; domUtils<SPAN class="punctuation token">.</SPAN><SPAN class="token function">show</SPAN><SPAN class="punctuation token">(</SPAN>loading<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>

myLayer<SPAN class="punctuation token">.</SPAN><SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"update-end"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>event<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp; domUtils<SPAN class="punctuation token">.</SPAN><SPAN class="token function">hide</SPAN><SPAN class="punctuation token">(</SPAN>loading<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp; <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>event<SPAN class="punctuation token">.</SPAN>error <SPAN class="operator token">!==</SPAN> undefined<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp; console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">log</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"Update complete with error: "</SPAN> <SPAN class="operator token">+</SPAN> event<SPAN class="punctuation token">.</SPAN>error<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="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>

FC_Basson

Připojte se k diskusi

Přihlášení členové mohou přispívat, sledovat aktualizace a další. Jste tu noví? Zaregistrujte si bezplatný účet.

Rychlé odkazy

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.