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?

[BjornSvensson]

FYI: version 3.14 have several fixes regarding map resizing, I think that includes fixing the issue posted here.

[AndrewDavis2]

Hi..

I'm working with a sample

Mobile Web Map

in chrome (using the dev tools and emulator) when I change the orientation of the map back and forth the map either does not render, or renders only portions of the map and controls.

Have you seen this behavior?

Andy..

[RobertWinterbottom]

We are using 3.14 and have not seen this issue lately but used to all the time.  One trick we used was to not only set the autoResize to false, but also to not call map.resize or map.reposition directly in the controller on it's initial load, instead wrap them in a 100ms timeout using angular's timeout service.  When we just tried to resize the map at the bottom of the controller we frequently had the same issues that everyone else seems to be having. But when we did it like below at the end of our controller function everything started working.

$timeout(function () {
  // resize map here if the map is loaded, else, wait til map is loaded then resize
}, 100);

I normally don't like using timeouts but it seemed like in an angular app with several pages, occasionally the controller would fire things before the map ever loaded and we would get some strange issues.  Our app is a single-page app using Phonegap and Angular.js plus several other libraries.

[BjornSvensson]

Robert Winterbottom​ et al - we fixed a number of things in the 3.14 release so that no "tricks" would be needed any longer for this issue (if you're using 3.14 or later).

[RobertWinterbottom]

Thanks, good to know, next time I get some free time to work on that part of the mobile app again Ill have to try to remove our hacks and see how things work.

[AndrewDavis2]

Thanks..

Im seeing other jQuery apps having probs with the dynamic resize.. not

just the ESRI jsapi

Andrew

[ChrisSmith7]

Bjorn,

I'm still having problems in 3.14 when loading loading a map within an iframe that is within a collapsible container. If the container is rendered to the dom and displayed to the user, the map loads fine - I can collapse and expand without issue. If the container is collapsed on initial load, when I expand the container, I get a map that looks like this:

I have worked around this before by allowing the container to render, then, after page load, collapsing the map. I remember employing some resize logic in the past, but is there a better way to accomplish this in 3.14?

[ChrisSmith7]

Is there a resolution for this in v3.x yet? We are using v3.16 and still must work around by rendering and then collapsing, which is proving cumbersome for certain areas of our app.