Hello, I'm trying to detect when a map has been zoomed in or out, and when that is complete to execute a function. I have tried using watchUtils.watch on both the view.zoom and view.extent properties, but am finding that the callbacks get executed too many times. Here's the TypeScript code I'm using, where the console.log statements are getting executed too many times: constructor ( basemap : string = "streets" , container : string = "viewDiv" , center : number [ ] = [ - 104.61 , 50.45 ] , zoom : number = 12 ) { this . map = new Map ( { basemap : basemap } ) ; this . view = new MapView ( { container : container , map : this . map , center : center , zoom : zoom } ) ; watchUtils . watch ( this . view , "zoom" , function ( zoom ) { console . log ( `zoom is now ${ zoom } ` ) } ) ; watchUtils . watch ( this . view , "extent" , function ( extent ) { console . log ( `extent is now ${ extent } ` ) } ) ; } Here's what the output looks like in the console: Is there a way to detect the change only when the zoom is complete? Perhaps there's another approach for accomplishing this than watching these properties?

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

Detect change in zoom when complete

AlanMervitz

Hello,

I'm trying to detect when a map has been zoomed in or out, and when that is complete to execute a function. I have tried using watchUtils.watch on both the view.zoom and view.extent properties, but am finding that the callbacks get executed too many times.

Here's the TypeScript code I'm using, where the console.log statements are getting executed too many times:

<SPAN class="token function">constructor</SPAN><SPAN class="punctuation token">(</SPAN>basemap<SPAN class="punctuation token">:</SPAN> string <SPAN class="operator token">=</SPAN> <SPAN class="string token">"streets"</SPAN><SPAN class="punctuation token">,</SPAN> container<SPAN class="punctuation token">:</SPAN> string <SPAN class="operator token">=</SPAN> <SPAN class="string token">"viewDiv"</SPAN><SPAN class="punctuation token">,</SPAN> center<SPAN class="punctuation token">:</SPAN> number<SPAN class="punctuation token">[</SPAN><SPAN class="punctuation token">]</SPAN> <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="operator token">-</SPAN><SPAN class="number token">104.61</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">50.45</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN> zoom<SPAN class="punctuation token">:</SPAN> number <SPAN class="operator token">=</SPAN> <SPAN class="number token">12</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>map <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Map</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; basemap<SPAN class="punctuation token">:</SPAN> basemap
&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>view <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">MapView</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; container<SPAN class="punctuation token">:</SPAN> container<SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; map<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>map<SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; center<SPAN class="punctuation token">:</SPAN> center<SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; zoom<SPAN class="punctuation token">:</SPAN> zoom
&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

&nbsp;&nbsp;&nbsp; watchUtils<SPAN class="punctuation token">.</SPAN><SPAN class="token function">watch</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>view<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"zoom"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>zoom<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">log</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="template-string token"><SPAN class="string token">`zoom is now </SPAN><SPAN class="interpolation token"><SPAN class="interpolation-punctuation punctuation token">${</SPAN>zoom<SPAN class="interpolation-punctuation punctuation token">}</SPAN></SPAN><SPAN class="string token">`</SPAN></SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; watchUtils<SPAN class="punctuation token">.</SPAN><SPAN class="token function">watch</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>view<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"extent"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>extent<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">log</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="template-string token"><SPAN class="string token">`extent is now </SPAN><SPAN class="interpolation token"><SPAN class="interpolation-punctuation punctuation token">${</SPAN>extent<SPAN class="interpolation-punctuation punctuation token">}</SPAN></SPAN><SPAN class="string token">`</SPAN></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>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

Here's what the output looks like in the console:

Is there a way to detect the change only when the zoom is complete? Perhaps there's another approach for accomplishing this than watching these properties?

Find more posts tagged with

Accepted answers

ThomasSolow

Interesting solution, if it works I'd go with it.

Another option would be to use a debounce function. So each time the zoom changes that function would be called but the actual logic would be delayed until the function hasn't been called in some user defined amount of time (maybe 200 ms would be good for something like this).

I always copy the underscore.js debounce function when I need this: underscore.js

All comments

RomanKönig

I found it more useful to check the stationary attribute of the view than updating, as updating waits for export, etc. responses.

AbdulKhan

Alan,

I'm looking to do that same thing and was wondering - did you have any lag issues when using the denounce approach? Was there a delay between when the map is actually zoomed and when the zoom event is done?

AlanMervitz

The debounce approach is working beautifully, thanks!

AlanMervitz

I've tried that but the whenFalseOnce callback is getting triggered multiple times. This would have been ideal if it had worked.

ThomasSolow

Interesting solution, if it works I'd go with it.

I always copy the underscore.js debounce function when I need this: underscore.js

RobertScheitlin__GISP

Alan,

Something more like this:

watchUtils<SPAN class="punctuation token">.</SPAN><SPAN class="token function">watch</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>view<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"zoom"</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; watchUtils<SPAN class="punctuation token">.</SPAN><SPAN class="token function">whenFalseOnce</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>view<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"updating"</SPAN><SPAN class="punctuation token">,</SPAN> yourFunction<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>

AlanMervitz

Hi Robert,

Thanks for the suggestion, I've given that a quick try but it doesn't seem to be working reliably. The updating status seems to be changing multiple times throughout the zooming process.

<SPAN class="token function">constructor</SPAN><SPAN class="punctuation token">(</SPAN>basemap<SPAN class="punctuation token">:</SPAN> string <SPAN class="operator token">=</SPAN> <SPAN class="string token">"streets"</SPAN><SPAN class="punctuation token">,</SPAN> container<SPAN class="punctuation token">:</SPAN> string <SPAN class="operator token">=</SPAN> <SPAN class="string token">"viewDiv"</SPAN><SPAN class="punctuation token">,</SPAN> center<SPAN class="punctuation token">:</SPAN> number<SPAN class="punctuation token">[</SPAN><SPAN class="punctuation token">]</SPAN> <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="operator token">-</SPAN><SPAN class="number token">104.61</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">50.45</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN> zoom<SPAN class="punctuation token">:</SPAN> number <SPAN class="operator token">=</SPAN> <SPAN class="number token">12</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>
&nbsp;&nbsp;&nbsp; watchUtils<SPAN class="punctuation token">.</SPAN><SPAN class="token function">watch</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>view<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"zoom"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>onZoomChange<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN>

<SPAN class="token function">onZoomChange</SPAN><SPAN class="punctuation token">(</SPAN>newValue<SPAN class="punctuation token">:</SPAN> number<SPAN class="punctuation token">,</SPAN> oldValue<SPAN class="punctuation token">:</SPAN> number<SPAN class="punctuation token">,</SPAN> propertyName<SPAN class="punctuation token">:</SPAN> string<SPAN class="punctuation token">,</SPAN> target<SPAN class="punctuation token">:</SPAN> MapView<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="template-string token"><SPAN class="string token">`zoom is </SPAN><SPAN class="interpolation token"><SPAN class="interpolation-punctuation punctuation token">${</SPAN>newValue<SPAN class="interpolation-punctuation punctuation token">}</SPAN></SPAN><SPAN class="string token">`</SPAN></SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>target<SPAN class="punctuation token">.</SPAN>updating<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
&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">"zoom in progress"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">else</SPAN> <SPAN class="punctuation token">{</SPAN>
&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">"finished zoom"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; <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>

Here's a working approach I've found, any feedback?

<SPAN class="token function">onZoomChange</SPAN><SPAN class="punctuation token">(</SPAN>newValue<SPAN class="punctuation token">:</SPAN> number<SPAN class="punctuation token">,</SPAN> oldValue<SPAN class="punctuation token">:</SPAN> number<SPAN class="punctuation token">,</SPAN> propertyName<SPAN class="punctuation token">:</SPAN> string<SPAN class="punctuation token">,</SPAN> target<SPAN class="punctuation token">:</SPAN> MapView<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="template-string token"><SPAN class="string token">`zoom is </SPAN><SPAN class="interpolation token"><SPAN class="interpolation-punctuation punctuation token">${</SPAN>newValue<SPAN class="interpolation-punctuation punctuation token">}</SPAN></SPAN><SPAN class="string token">`</SPAN></SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>newValue <SPAN class="operator token">%</SPAN> <SPAN class="number token">1</SPAN> <SPAN class="operator token">!==</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
&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">"zoom in progress"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">else</SPAN> <SPAN class="punctuation token">{</SPAN>
&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">"finished zoom"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; <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>

Thanks,

Alan

RobertScheitlin__GISP

Alan,

You should watch the updating property of the view for a false condition after the zoom property changes.

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.