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

Determine when map tiles have been downloaded

yangwen

I need to overlay the map container with a loading spinner before the map is ready for view and interaction. To that end, the completion of basemap tiles download is necessary

Is there a property of Map, MapView, or Basemap that will provide that insight? When I watch the basemap.loaded property, it changes to true even before the requests for the pbf files.

Find more posts tagged with

Accepted answers

All comments

yangwen

'Done Updating' does not print for me. I'm also providing output below that intermixes output from a view.stationary watcher.

dcp-map.component.ts:188 view updating true basemap Status loaded
14:08:19.840 dcp-map.component.ts:202 view stationary now zoom 9 scale 577790.554289 center -11570638.932396324, 3836411.2886857823 extent {__accessor__: b}
14:08:20.133 dcp-map.component.ts:188 view updating false basemap Status loaded
14:08:24.835 dcp-map.component.ts:188 view updating true basemap Status loaded
14:08:25.149 dcp-map.component.ts:188 view updating false basemap Status loaded

Very obscure lifecycle behavior. None of this is documented huh, I couldn't find any? I wish they have implemented first class events.. would avoid a lot of this property watching spaghetti logic.

Edit: It also appears the updating property toggles when the map is panned and more basemap tiles are requests. This makes sense. However I also need to separate the post-initial load updating activities from the updating activities that's part of the initial load. The initial load is typically much slower, and thus requires some UI indicator. Subsequent tile downloads from pan or zoom actions are much quicker and no progress indicator is needed.

I can manage this manually outside of the arcgis instances, but are there flags or other properties to denote post initial loading?

rscheitlin

Yang,

See if this works for you:

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; view<SPAN class="punctuation token">.</SPAN><SPAN class="token function">when</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;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; watchUtils<SPAN class="punctuation token">.</SPAN><SPAN class="token function">whenFalse</SPAN><SPAN class="punctuation token">(</SPAN>view<SPAN class="punctuation token">.</SPAN>basemapView<SPAN class="punctuation token">.</SPAN>baseLayerViews<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getItemAt</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">'updating'</SPAN><SPAN class="punctuation token">,</SPAN> updating <SPAN class="operator token">=</SPAN><SPAN class="operator token">></SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">if</SPAN><SPAN class="punctuation token">(</SPAN>view<SPAN class="punctuation token">.</SPAN>stationary<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">log</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'Done Updating'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="keyword token">else</SPAN><SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; watchUtils<SPAN class="punctuation token">.</SPAN><SPAN class="token function">whenTrueOnce</SPAN><SPAN class="punctuation token">(</SPAN>view<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"stationary"</SPAN><SPAN class="punctuation token">,</SPAN> still <SPAN class="operator token">=</SPAN><SPAN class="operator token">></SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">log</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'Done Updating'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&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; <SPAN class="punctuation token">}</SPAN>
&nbsp;&nbsp;&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="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>

yangwen

Ok I'm watching that property.. Yes I can see that eventually the updating value changes to false once the pbfs are downloaded. However from page load to pbf download completion, the updating property toggles between true and false multiple times, making it difficult to figure out the exact toggle that I want to act on.

I've tried to also use it in combination with the basemap properties to identify the final toggle of updating. However they are none distinguishable.

My watcher function provides the following output between page load and completion of pbf requests.

mapView.watch('updating', view => {

console.log('view updating', view, 'basemap Status', this.map.basemap.loadStatus);

});

view updating false basemap Status loaded
view updating true basemap Status loaded
view updating false basemap Status loaded
view updating true basemap Status loaded
view updating false basemap Status loaded

The updating toggles occur in quick succession, so I could implement the spinner logic in a timer to capture the final state of the updating property but that seems a bit hackish. I'm thinking there has to be another property I can use in combination to precisely identify completed download of map tiles.

rscheitlin

Yang,

You need to put a watch on the views updating property.

https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html#updating

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.