mobile_dev.html Tutorial - why doesn't it work to switch the positions of the views?

TracySchloss · ‎03-27-2014

I think this is a very common scenario and I've read several threads about this. Instead of opening with a map, you want to show something else instead first, maybe a query, and then show the results on a map next and/or optionally. There seems to be all sorts of issues dealing with a map 'after the fact', Once your map isn't part of your initial display, there's all sorts of extra steps you have to take to deal with this.

For example: In the mobile_dev.html tutorial, there are two views, one Map and one for About. It initializes with a map first. But what if I want to have the About on top? All I did was switch the positions, and change the about to have the 'selected:true' defined. I'm not sure I even needed to physically change the order in the code:

  <body>     <div id="aboutView" data-dojo-type="dojox.mobile.View" data-dojo-props="selected: true">       <h1 data-dojo-type="dojox.mobile.Heading" data-dojo-props="back:'Map', moveTo:'mapView'">About</h1>       <p style="padding: 5px;">This area can contain additional information about your application.</p>       <p>Ex quorum ab quorum non senserit magna se litteris firmissimum. Pariatur fore        elit do dolor, eram vidisse id proident, nam anim ea multos, ab multos offendit.        Labore coniunctione senserit legam commodo. Aut in voluptatibus, ab singulis        consectetur iis e culpa enim ad quamquam ubi ita amet quibusdam. Quis iudicem e        nostrud, in veniam varias nisi admodum, eiusmod esse quamquam arbitror sed dolor        eruditionem commodo eram consequat. Esse cupidatat te culpa nisi. Vidisse lorem        minim ab nulla.       </p>     </div>         <div id="mapView" data-dojo-type="dojox.mobile.View" >       <div id="header" data-dojo-type="dojox.mobile.Heading">         <div id="aboutButton" data-dojo-type="dojox.mobile.ToolBarButton" style="float: right;" moveTo="aboutView">About</div>       </div>       <div id="mapContainer" data-dojo-type="dojox.mobile.ContentPane">         <div id="map"></div>       </div>     </div>   </body>

When you do this, when you switch to the map, first it is cropped to a narrow column and then it disappears completely. I don't understand why. In this particular example there seems to be all sorts of extra functions for map resizing etc and you'd think somewhere in there the map would be properly displayed. I see this same behavior in both Firefox and Chrome.

TracySchloss · ‎03-28-2014

Apparently it did not like the resizeMap getting called in the map onload event since it's not part of the initial view. I commented out the call to it and it works now.

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

View solution in original post

KellyHutchins · ‎03-27-2014

There is a known problem in the API where we can't automatically resize maps that are hidden. The workaround for this, until the issue is resolved, is to set autoResize to false when creating the map. This means you will have to handle the map resize yourself.

TracySchloss · ‎03-27-2014

I guess I don't know what "you have to handle the resize yourself" really means. In one thread I saw that adding the autoResize:false parameters to the map definition was suggested. So I did. But in this example there seems to be code to handle the resize, without having to do anything more. Isn't what these functions are for?

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

        function resizeMap() {
          mobile.hideAddressBar();
          adjustMapHeight();
          map.resize();
          map.reposition();
        }

What else is there to it? This looks to me that it should fire the resizeMap function every time it transitions to the mapView, which contains map.resize and map.reposition. But it doesn't display right. Plus it often generates errors on some of the tiles in the streets base map, which I also think is weird.

KellyHutchins · ‎03-27-2014

Ok looks like that sample may already have logic to resize the map. Try setting autoResize to true and see if it resolves the issue. Here's an example:

var map = new esri.Map("map", {
  autoResize: false,
 basemap: "topo", 
.......

TracySchloss · ‎03-28-2014

I've tried it both ways, autoResize:true and autoResize:false. Neither yields a map that draws correctly. The 2nd time I toggled the view, from About to Map, using autoResize:true, the map didn't display anything at all.

I'm hoping someone on your end can eventually address this issue in the API itself, so we don't all have to do these workarounds. At first I thought the issue was the fact that I chose to use dojo rather than something like jQuery. But the threads in these forums related to this issue mention several different JS libraries. As I read them, it doesn't seem to matter which of those you choose, the problem is in the ESRI JS library we're all trying to use. Very frustrating.

TracySchloss · ‎03-28-2014

Apparently it did not like the resizeMap getting called in the map onload event since it's not part of the initial view. I commented out the call to it and it works now.

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