Zoom hangs when going from high level to low

[DanielGarcia]

When I execute centerAndZoom method or other method that change zoom level from high level like 19 to low level like 2, application hangs taking a lot of memory (up to 1,5 Gb).

You can test it with this simple jsfiddle... https://jsfiddle.net/dgarcrom/1dbvjqyx/

This not happend with IE, it's happend with Chrome 46.0.2490.71.

Any ideas??

Thank you.

[ChristopherTotty]

Alright!  I'm back and this time with a real workaround!

I have traced the problem down to the dojo module that handles the animation for the zoom.  Why not just skip that?  Esri provides configurable values for zoomDuration and zoomRate that are handed to the animation function.  If we set both of these to 0, then the animation is skipped and no memory leak occurs.

See updated fiddle: ESRI JS API 3.13 - JSFiddle

See Esri help topic about the animation properties: Customize zoom animation | ArcGIS API for JavaScript

[BhavinSanghani]

I experienced the similar issue yesterday that Daniel reported here. I thought it could be due to Chrome bug in 46.0.2490.71 (which I still believe). So, I submitted the bug https://code.google.com/p/chromium/issues/detail?id=545158 and it looked related to out of memory. I initially thought it's related to CORS because when I see network traffic in Chrome then request status of exportMap call remains 'pending' (see attached) and after few seconds Chrome tab is crashed. 

Most surprising thing to me is - the code was working for me last Friday. But stopped working Monday morning. I suspect Chrome update would have been made silently on my machine.

Christopher - do you have more details on the issue? e.g. dojo module bug, chrome bug or something else. I am not sure you work with ESRI. If you have not submitted bug with ESRI then I can submit the bug. I am concerned on this workaround because it was working before and stopped working mostly due to chrome update. Also, it works with Chrome on Windows 2008 Server R2 standard edition. It did not work for me on Chrome on Windows 7.

[ChristopherTotty]

Hi Bhavin!

Sorry, no I am not an ESRI employee, just a concerned citizen.

I believe the zoom issue is occurring somewhere inside the dojo/_base/fx module included in the ESRI init.js file.

I am not able to view the bug you submitted, for some reason.  I have not filed a bug with Google/Chrome or ESRI, but it looks like we now have an ESRI employee on the case!

[BhavinSanghani]

I think, due to some permission issue you are not able to see the bug.

[MichaelSnook]

The was the trick for us...after a lot of messing around with the navigation mode items this was the workaround.  Thanks Christopher!  Who needs animation?

[YannCabon]

Hi,

The issue is logged in the API. I'm looking into it.

Unfortunately, it's not the first time Chrome introduces those problems.

[BhavinSanghani]

Hi Yann,

Can you please share some more details about the issue and your knowledge related to this one? In which version of the API this issue has been reported? It would be great to understand other issues that Chrome introduced in past from architectural point of view?

The reason I am asking, we are approaching product release and past code complete. So, I wanted to make sure the workaround rolls out to the no. of customers with exact information. No wonder if customers consider this workaround as our product bug. 

[NathanaelVaughan]

I have experienced the issue in separate applications running API v. 3.5 and 3.12. Based upon this, I would expect the issue to be present in all releases of the API >v 3.5 (if not all). 

I wrote a zoomThrottle function to limit the amount of zooming that could be generated in a single action - I set the zoom scale threshold at 100x and everything is working appropriately. I did not experiment extensively to see how much I could "push" the threshold prior to failure, although the zoom appears to be close to breaking at my current threshold (it pauses just long enough to make me think it has failed and then completes).

The function is fairly unique to my setup, otherwise I would share it. If you are concerned about the speed of an official fix, I suggest adopting a similar approach.

[ChristopherTotty]

I know you said your function is unique to your app, but could you give some more detail on how this might be accomplished?  I'm not sure how one would go about throttling the zoom using a function.

[NathanaelVaughan]

I apologize in advance - I don't post code much (also note that it is an old application and thus is not written with AMD-style references).

The premise for my fix is that the built-in zoom functions work well - the problem manifests when using a secondary function to zoom by a large degree. In my case, zooming to a selected feature/graphic.

This function is an intermediate tool that uses map.centerAndZoom to zoom to the indicated extent, but only if the extent is within a zoom threshold, otherwise, it will still center the extent, but only take the level down 3 more levels (I know this part is arbitrary). If you wanted to do a REALLY good job, you would put an interval object in to zoom partially, wait a second, and then zoom again until reaching the full-zoom. My application didn't require that much zooming though.

function zoomThrottle (myFeatureExtent) {

  // limits the change in level to prevent zoom animation menory leak problems

  var zoomFactorX = (map.extent.xmax - map.extent.xmin)/(myFeatureExtent.xmax - myFeatureExtent.xmin);

  var zoomFactorY = (map.extent.ymax - map.extent.ymin)/(myFeatureExtent.ymax - myFeatureExtent.ymin);

  var newCenterPoint = new esri.geometry.Point((myFeatureExtent.xmin + myFeatureExtent.xmax)/2, (myFeatureExtent.ymin + myFeatureExtent.ymax)/2, new esri.SpatialReference({wkid: myFeatureExtent.spatialReference.wkid}))

  var newScaleFactor = 0;

  if (zoomFactorX > zoomFactorY) {

  newScaleFactor = map.getScale()/zoomFactorX;

  } else {

  newScaleFactor = map.getScale()/zoomFactorY;

  }

  var newLevel = lods[lods.length-1].level;

  for (var ii = 0; ii < boundingLods.length; ii ++) {

  if (newScaleFactor < boundingLods[ii].ceiling && newScaleFactor > boundingLods[ii].floor) {

  newLevel = boundingLods[ii].level;

  break;

  }

  }

  // lookup level

  var scaleFactorCeiling = 100;

  if (lods[map.getLevel()].scale/lods[newLevel].scale > scaleFactorCeiling) {

  newLevel = map.getLevel() + 3;

  }

  map.centerAndZoom(newCenterPoint, newLevel);

   }