AnsweredAssumed Answered

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

Question asked by tcoopman on Apr 15, 2013
Latest reply on May 25, 2016 by csgeosol1

I've got a question about building a mobile application with the ArcGIS JS API (3.4 compact) and AngularJS ( - 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:

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 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 (expensive to set all the state again - so I don't like this solution)

  2. Is it possible to update the div (element 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?