topic Re: Hiding the map: problems with building a mobile application with AngularJS in ArcGIS JavaScript Maps SDK Questions

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

ThomasCoopman — Mon, 15 Apr 2013 07:27:33 GMT

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:

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

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

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

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).

Other possibilities?

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

ThomasCoopman — Mon, 15 Apr 2013 13:14:00 GMT

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

The map goes blank after this exact sequence:

Open the map

Switch to an other view (map is not visible)

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

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

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?

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

ThomasCoopman — Mon, 15 Apr 2013 13:30:25 GMT

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

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

JeffJacobson — Mon, 15 Apr 2013 21:58:30 GMT

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.

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

ThomasCoopman — Tue, 16 Apr 2013 06:15:41 GMT

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.

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

MattLane — Sat, 11 Dec 2021 23:44:06 GMT

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.

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

EdwardRozum — Tue, 21 May 2013 17:42:28 GMT

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

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

KellyHutchins — Tue, 21 May 2013 21:13:39 GMT

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?

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

EdwardRozum — Wed, 22 May 2013 09:54:00 GMT

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

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

JeffJacobson — Wed, 22 May 2013 14:43:05 GMT

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.

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

EdwardRozum — Wed, 22 May 2013 16:15:29 GMT

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

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

EdwardRozum — Thu, 23 May 2013 12:26:02 GMT

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

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

AshishArora — Wed, 29 May 2013 08:44:01 GMT

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

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

AshishArora — Fri, 09 Aug 2013 11:26:31 GMT

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.

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

AshishArora — Thu, 15 Aug 2013 21:15:29 GMT

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

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

JorgeFiallega — Thu, 16 Jan 2014 19:19:45 GMT

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.

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

JorgeFiallega — Fri, 17 Jan 2014 16:24:15 GMT

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"

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

JorgeFiallega — Tue, 21 Jan 2014 03:04:02 GMT

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 ?

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

Anonymous User — Mon, 11 May 2015 18:16:45 GMT

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

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

ScottDickison — Thu, 21 May 2015 12:02:58 GMT

I'm also having the same problem in 3.13.