topic Re: Samples not filling in display on orientationchange in ArcGIS JavaScript Maps SDK Questions

Samples not filling in display on orientationchange

GlennGoodrich — Fri, 18 Mar 2011 14:39:12 GMT

So, I am looking at this sample:

http://help.arcgis.com/en/webapi/javascript/arcgis/demos/widget/widget_mobilegallery.html

Select a map and in portrait, once the map loads, rotate the phone to landscape. There is a big gap off to the right. This also happens in very simple map web app I have locally.

Is this a jQuery Mobile issue? Why isn't the map filling in the gap when map.reposition() and map.resize() are called.

(see attached photo)

We've reproduced this behavior on an iPhone4 and iPhone 3GS

Thanks,
Glenn

Re: Samples not filling in display on orientationchange

JustinGreco — Tue, 12 Apr 2011 14:40:06 GMT

I tried it on my Android, but the sample doesn't even work on it. But if you look at the code for that sample, it is not doing anything in the orientationChanged function:
      function orientationChanged() {

      }

In the other samples, they have this:
      function orientationChanged() {
        if(map){
          map.reposition();
          map.resize();
        }
      }

Re: Samples not filling in display on orientationchange

SteveClarke — Tue, 28 Jun 2011 15:09:17 GMT

I think this is an iOS bug.

http://filamentgroup.com/examples/iosScaleBug/

I played around with this trying to find a workaround but the scaling was too big, as the bug states, when the orientation changed. I don't think this problem will be resolved until Apple addresses the bug and I haven't found a decent workaround for it.

Also, check out the following blog post from the jQuery Mobile team about Pinch-to-zoom: Now Restored. They make reference to this bug in their post.

http://jquerymobile.com/blog/2011/05/20/jquery-mobile-team-update-%E2%80%93-week-of-may-16th/

Re: Samples not filling in display on orientationchange

SteveClarke — Tue, 28 Jun 2011 15:27:29 GMT

Please note that I'm not an esri employee even though the esri logo is showing up beneath my name on the left of the forum posting. I've requested the forum administrator to remove it so as not to cause confusion.

Re: Samples not filling in display on orientationchange

SteveClarke — Wed, 29 Jun 2011 14:24:52 GMT

A user on the jQuery Mobile forum suggested the following:

var changeViewport = function () {
          if (window.orientation == 90 || window.orientation == 270)
            $('meta[name="viewport"]').attr('content', 'height=device-width,width=device-height,initial-scale=1.0,maximum-scale=1.0');
          else
            $('meta[name="viewport"]').attr('content', 'height=device-height,width=device-width,initial-scale=1.0,maximum-scale=1.0');
          }
          window.addEventListener('orientationchange', changeViewport, true);
          try { changeViewport(); } catch (err) { }

I tried this with moderate success, at least it's the best solution I've seen so far to this problem. But it only seems to work if I execute a task first against the map. For example, I have to execute a task in my app that will find a feature and zoom to it on the map. Then when I rotate my iOS device to landscape the map will fill the entire screen but my toolbars at the top of the map are hidden. I have to tap the iOS bar at the top of the screen (that shows the time and the wifi connection strength) and then I can see my toolbar at the top of the app. Of course, the browser's url bar also appears, but you can tap and hold the toolbar and scroll up until the url bar disappears. The good news is that the app didn't scale too large like in my previous attempts. And now when I rotate back to portrait the app displays normally and the map fills the entire screen as expected. So this code is at least a step in the right direction. Hopefully this will give you something to go on for a workaround until Apple fixes the bug.

Re: Samples not filling in display on orientationchange

AaronDrake — Fri, 20 Jan 2012 17:09:00 GMT

Steve,

I just tried your code snippet in an app I am working on, and so far so good. Tested it on my LG G2x (Android), and my co-workers iPhone and it works great!

Thanks for sharing!