nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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:

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?

Finde mehr Beiträge mit dem Tag

Accepted answers

All comments

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.

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?

AndrewDavis2

Thanks..

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

just the ESRI jsapi

Andrew

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.

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

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.

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

BjornSvensson

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

ScottDickison

I'm also having the same problem in 3.13.

Anonymous User

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

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 ?

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

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

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

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

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

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

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

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

khutchins

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?

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

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.

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.

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

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

ThomasCoopman

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 xyz (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?

Nimm an der Unterhaltung teil

Angemeldete Mitglieder können Beiträge verfassen, Updates folgen und mehr. Neu hier? Registriere ein kostenloses Konto.

Schnellzugriffe

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.