topic Re: Resize in a different mobile view in ArcGIS JavaScript Maps SDK Questions

Resize in a different mobile view

SantoPfingsten — Wed, 16 Apr 2014 12:44:25 GMT

Hi,

I have the following situation:
A mobile view contains an esri javascript map.
Another mobile view contains a search input field.

When I change to the search input field and the soft keyboard shows up, the map gets a resize event, making it zoom to a huge scale, essentially breaking the map display. When I switch back to the map, it shows nothing.

You can even reproduce this without a tablet:
1. Fire up: http://developers.arcgis.com/javascript/samples/mobile_template/index.html
2. Go to the about tab.
3. Resize the view (bigger or smaller doesn't matter)
(If you want you can even change back to the original size before going back)
4. Go back to the map.
5. The map is gone, replaced with a gray background.

Any idea how to fix this ?

Thanks.

Re: Resize in a different mobile view

TracySchloss — Sat, 11 Dec 2021 17:21:56 GMT

There are several threads that discuss various resize issues with the map objects. One of the recommendations is to have the autoResize parameter on the map constructor set to false. Then you have add a listener to manually execute map.resize and map.reposition. To me that's a very clunky solution and it would be better if there was something changed with the map object to handle this better. It helped me to have a listener on the transition between views. The functions for the mapHeight are something I got from an ESRI blog on designing for mobile, which included a sample to download.

I still don't have all the kinks worked out. I think I have it working and then suddenly it will look all cropped again. If you perfect this, let me know and I'll fix my code too.

      var map = new Map("mapDiv", {
          basemap: "streets",
          center: [-92.593, 38.5],
          zoom: 6,
          autoResize:false
          });
     map.on("load", mapLoadHandler);

  function mapLoadHandler(evt){
        registry.byId('mapView').on('AfterTransitionIn', resizeMap);
     }    

  function resizeMap() {
  mobile.hideAddressBar();
  adjustMapHeight();
  map.resize();
  map.reposition();
}
function adjustMapHeight() {
  var headHeight = registry.byId('mapHeader').domNode.clientHeight;
  var availHeight = mobile.getScreenSize().h - headHeight - 60;
  if (has('iphone') || has('ipod')) {
    availHeight += iphoneAdjustment();
  }
             dom.byId("mapDiv").style.height = availHeight + "px";
            dom.byId("mapDiv").style.width = "100%";
}
function iphoneAdjustment() {
  var sz = mobile.getScreenSize();
  if (sz.h > sz.w) { //portrait
    //Need to add address bar height back to map because it has not been hidden yet 44 = height of bottom safari button bar 
     return screen.availHeight - window.innerHeight - 44; 
  } else { //landscape
    //Need to react to full screen / bottom button bar visible toggles
    var _conn = on(window, 'resize', function() {
      _conn.remove();
      resizeMap();
    });
    return 0;
  }
}

Re: Resize in a different mobile view

SantoPfingsten — Wed, 16 Apr 2014 13:31:20 GMT

Thanks for the comment!
It seems to work to override the resize method on the map object and only call this.inherited(arguments) if the map is actually visible.