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?

[EdwardRozum]

Its going to be tough to post the exact example, because I am using a jquery mobile to do a page transition for mobile popup. So I had to make a minor modification to PopupMobile.js

I did get the autoResize property to work. I believe it was a caching issue. Unfortunately even when autoResize is set to false, the map fails when it is hidden, the window is resized, and I browse back to the map. I am using the following:

//map setup
map = new esri.Map("map", {
        infoWindow: popup,
        zoom: zoomLevel,
        slider: true,
        sliderPosition: "bottom-left",
        extent: initExtent,
        autoResize: false
    })

//using bind maps
bingMapServiceLayer = new esri.virtualearth.VETiledLayer({
        bingMapsKey: bingMapKey, // trial (90 days) from https://www.bingmapsportal.com
        mapStyle: esri.virtualearth.VETiledLayer.MAP_STYLE_ROAD // can also use MAP_STYLE_AERIAL & MAP_STYLE_AERIAL_WITH_LABELS
    });


//I resize the map on initial load and on orientation change when visible with this
function resizeMap() {
    $('#map').height($(window).height() - $('[data-role=header]').height());
    map.resize();
}

//The map fails when I return to the page with this in the console
Unexpected value NaN parsing x attribute.
Unexpected value NaN parsing y attribute.
Unexpected value matrix(1.00000000,0.00000000,0.00000000,1.00000000,NaN,NaN) parsing transform attribute.


Am I missing a step. Perhaps there is a better way to to resize that I am not using. Again, I appreciate all the help guys. I'm new to the map world

[JeffJacobson]

I was able to get this to work with jQuery Mobile.  I posted this code on GitHub. You can test it out here.

Let me know if you find any problems, as it hasn't been tested extensively. The best way to report an issue would be to create an issue on the GitHub page.

[EdwardRozum]

Thanks for taking a look at this. I used your exact code, only with the compact framework, and am getting the same svg error. Could it be because I have a esri.Graphic on the map at the time the page changes. I have a mapped point with a Mobile Popup info template attached to it. I am trying to edit your example to include a mapped point. Unfortunately, I don't really understand how to include esri.symbol.PictureMarkerSymbol in the manner you are doing it. I will work on it and try to get an example working. Thanks again.

Note: One quick addition.
I attached this event to your map dojo.connect(map, "onResize", resizeTest); and had it alert the width and height on resize. Your map does not alert a width and height on your non map page. If I attach the same event to my map object, the onRisize event does fire and re-size the map to 0 0, regardless if I have the autoResize: false property set. I am using a different api then you though. I'm using esricompact 3.3, if that makes a difference

[EdwardRozum]

hey guys,

I did find my issue. I had an event attached to orientationchanged that was messing up the method that Jeff provided in his example. All is working fine now. I appreciate your patience and help. I changed the resize function up a bit with the same affect.

function resizeMap() {
    if ($('#map-page:visible').length) {
        $('#map').height($(window).height() - $('#header').height());
        map.resize();
        map.reposition();
    }
}

Thanks again

Eddie

[AshishArora]

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?

Hello Kelly,

when we can expect the next release of Javascript API with this bug fixed?

Thanks

[AshishArora]

Hello Kelly,

when we can expect the next release of Javascript API with this bug fixed?

Thanks

I just saw a new version of ArcGIS Javascript API 3.6 but unfortunately the release notes does not talk anything about the bug we discussed in this thread.

[AshishArora]

I just saw a new version of ArcGIS Javascript API 3.6 but unfortunately the release notes does not talk anything about the bug we discussed in this thread.

Any update if ESRI has fixed this issue in it's recent release of ArcGIS Javascript API 3.6

[JorgeFiallega]

I have the same issue. Battling with angular and esri for a month now.
I just tried 3.8 version and the problem persist.
I would like to know what the known issue mentioned in the thread is.
Thanks a lot.

[JorgeFiallega]

I tried to see if starting with a hidden map with ng-show="false", and then putting ng-show="true", I could see the map, but I get the following errors
Error: Invalid negative value for <svg> attribute width="-2.222222328186035"
Error: Invalid negative value for <svg> attribute height="-2.222222328186035"

[JorgeFiallega]

I believe the behavior I am experiencing is related to this thread.
Basically when I show other divs dynamically given certain state that move the div of the map up or down, the pointer on the map still thinks it is in the old location.
To ilustrate the current problem i have created the plunk
rubberband example
(I used as a base the plunk created on this thread)
To reproduce the problem:
1. click on map link
2. click on Zoom By rubber button
3. create a box in the map
4. Click "Show Message"
5. click on Zoom By rubber button
6. You will see that when you try to create the box in the map, it is displaced by the height of the message.

Calling a map.resize every time I show the message will solve the problem, but this was just an example. My application will show and hide different pieces of the page depending on state that will make the map div move up or down.

I also tried the suggestions http://forums.arcgis.com/threads/5011-Map-Resizing-across-browsers and I was able to create the listener, but it only fires when resizing the window, besides this is not so much a resize of the div but changing the position.

This must be a fairly common usecase,
What am i missing ?