What event can I tap into to wait for the view to finish drawing after basemap toggle?

Question

I am trying to wait for the view's basemap to update and finish drawing after a basemap toggle event.  Is there a good consistent way to wait for the complete rendering of the map before trying the screenshot?  I was thinking of watching the "updating" property on the basemap layerviews, but this seems cumbersome.  Also, if I have many feature layers, would I have to watch the "updating" property on all layers before safely using the take screenshot function?

Here is a JSBIN showing a quick example of what I am talking about.  Click the basemap toggle to see what I am referring to.

UndralBatsukh · Answer

Hi there, I am able to reproduce the issue you described. It appears that `view.updating` value changes several time during basemap swapping. So the `view.takeScreenshot()` is called several times and the images sometimes get returned out of order. I created an issue for this. In meantime, please add a setTimeout before you call takeScreenshot and this will ensure you get the right image. view.watch("updating", async (val) => { if (!val) { setTimeout(function(){ view.takeScreenshot().then(function(screenshot){ screenshotDiv.src = screenshot.dataUrl; }); }, 500); } });‍‍‍‍‍‍‍‍‍ -Undral

Noah Sager · Answer

I downloaded and ran the app locally, and it seemed to work consistently. Perhaps there's some network or synchronicity issue at play.

JackFairfield · Answer

I've tried this and it seems to only work sometimes.

Here is a sample updated JSBIN

In this example, after toggling a few times, the screenshot is sometimes black.  Am I doing something wrong?

Thanks for your response.