Hiding the map: problems with building a mobile application with AngularJS

[ThomasCoopman]

Hi,

I've got a question about building a mobile application with the ArcGIS JS API (3.4 compact) and AngularJS (http://angularjs.org/ - a javascript framework for building web applications).

The application we are developping is a single page app where you can switch between views. A very simple sample can be found here: http://plnkr.co/edit/LKAyLwV69EQqgLl5LzEx?p=preview.

The problem we are experiencing is that after switching between views the ArcGIS Map doesn't always render again correctly (goes blank - sometimes the zoomSlider is not visible also).

As far as we have found the problems

• Open the map


• Switch to an other view (map is not visible)


• Open the mobile keyboard (div resize)


• Switch back to the map (map is reattached to the div) -> the map doesn't render.

By catching the updateExtent event, I can see that the extent gets set to NaN, but manually calling setExtent with a correct extent doesn't work either.

The current solution use Angular ngView (like in the example). As far as I can tell this completely removes the div from the DOM. The div is still available through esri.map.container and I use this div to reattach the existing div to the DOM. I've also tried to hide the map by setting display:none to the map div but this results in simular problems.

How do I solve this problem?

Possible solutions:

1. Add a new map every time with new esri.map (expensive to set all the state again - so I don't like this solution)


2. Is it possible to update the div (element esri.map.id) after switching tabs?


3. Is it possible to do something like esri.dijit.OverviewMap.hide and .show?


4. Can I pause the map, so that I pause the map before switching away from the map, and enable it again after I have switched back (pausing would be to stop all events from propagating to the map).


5. Other possibilities?

[ThomasCoopman]

I've done some more debugging and found the following things.

The map goes blank after this exact sequence:

1. Open the map


2. Switch to an other view (map is not visible)


3. Resize the div (map gets onResize event that gets 0 as its size)


4. Switch back to the map (the map is still there).


5. Zoom on the map. The map disappears.

At the moment we switch back to the map and the height of the map changes from 0 (it was not visible) to xxx (visible again) the map extent gets set to Nan for all x and y.
Calling reposition or resize does not fix this, instead it does something weird. After these methods are called, the map stays blank, but the extent is valid again. However, as soon as I pan or zoom the map, the extent goes back to Nan for all x and y.

Calling setExtent does seem to solve the problem.

Is this a bug?

[ThomasCoopman]

I'm going to fix it by setting autoResize to false.

[JeffJacobson]

I experienced problems of this sort when I tried to use the ArcGIS API with jQuery Mobile. I never found a fix for it, though.

I made a forum post about it.

[ThomasCoopman]

This is indeed the same problem. For people wanting to test this issue, use the Plunker example I provided (here: http://plnkr.co/edit/LKAyLwV69EQqgLl5LzEx?p=preview).

First go to the map, then back to main. Now resize the window so you don't see the title anymore and then size it up again. Now switch back to the map. Play around with the map (zoom, pan) and you will see the strange behaviour.

[MattLane]

I also had to tackle this with a 'single-page' jQuery mobile app. If you resize the map when it isn't visible, it breaks. I used the following code for jquery mobile.

 //Create map or resize it.
  $('#mapPage').bind('pageshow', function (event, ui) {
    if (!map) {//If this is the first time the page is loaded we need to create the map
      createMap();
    }
    resizeMap(); //Always resize in case the window resized while on another page
  });

//Run this whenever the window resizes. We can't resize when the map isn't visible because then it goes crazy when the map is shown
  $(window).resize(function () {
    if ($('#mapPage:visible').length) {
      resizeMap();
    }
  });

Now that they have baked in the resize function to the api automatically, like was previously mentioned, you'll need to disable autoresize and handle it all yourself.

[EdwardRozum]

Hey guys,

I hate to drag this thread up from the dead, but I cannot get this solution to work. I was hoping someone could provide me with greater detail. The first thing I did was try to set autoResize to false, which does not seem to do anything at all. The map still re-sizes regardless of the setting. Does anyone happen to have a full example, or is anyone able to better explain this to me? Any help would be greatly appreciated.

Thanks

Eddie

[KellyHutchins]

The underlying problem is something we'll provide a solution for at the next release. To fix this issue for now - as others have noted- you should be able to workaround this by setting autoResize to false when you create the map. Once you do this you'll have to do the work of resizing the map when the browser resizes.

You mentioned that you've set autoResize to false and it's still doing the automatic resize. Can you post a test page that shows the issue?

[Anonymous User]

I'm at version 3.13 and am still encountering this problem. Has a fix been released?

[ScottDickison]

I'm also having the same problem in 3.13.