topic Re: Map in StackContainer sized to 400px in ArcGIS JavaScript Maps SDK Questions

Map in StackContainer sized to 400px

RobertWinterbottom — Tue, 18 Jun 2013 13:43:19 GMT

Hi everyone,
I am building a mobile app and am running into problems with the size of the map. I have a stack container(with 3 content pane's) inside a border container with region set to center. The first stack loaded is the homepage with 2 options, a map page and a info page, if I click the map page the map always loads with height and width set to 400px. I have every parent of the mapDiv and the map set to 100% width and heigh. If I load the map page by default and not the homepage, it loads at full screen, but I need to load the homepage first and doing so results in the map always getting set to 400px. I have tested lots of different things and have not come up with a clean solution. Does anyone have any suggestions ?

note: I set the class map like this

.map {
height: 100% !important;
width: 100% !important
}

and I end up with the map loading at 400 x 400 but then a second later expanding to 100%, kind of works but looks bad and the center point I define in map constructor is center when it is 400 x 400 not 100%

Re: Map in StackContainer sized to 400px

RobertWinterbottom — Tue, 18 Jun 2013 16:53:08 GMT

So I tried some new things. I removed the StackContainer from the equation and made a very simple layout with three div's that change their display property. I changed all three Content Panes in the Stack Container to normal div's with display set to none, I then set the homepage display to block and when a button was hit to change page I would just change the page's display to block and the previous page's display to none. This results in the same thing. When I change to the map it shows up in 400 x 400. Could it be that just because when I create the map, if the parentDiv the map lives in has the display set to none then it defaults to this size?

Re: Map in StackContainer sized to 400px

JasonScharf — Tue, 18 Jun 2013 19:05:40 GMT

Yes, that's what's happening.

If you create the map inside of a non-visible element, or an element that otherwise does not have "layout" (proper dimensions), the map gets an inline style of 400x400 by default.

Likewise, if you call the map's "resize" method in the same type of scenario, you'll run into similar problems*. In fact, the map control would lose all of its internal layer elements in previous versions of the API.

The solution here is to ensure that you're creating and/or resizing your map inside of elements that are visible and larger than 2px x 2px. You should wait until the map is to be displayed for the first time and create it then.

*Newer versions of the API will resize the map control for you when the parent element changes, I think this is what you see when your 400x400 map expands after a short delay. I prefer to manage the calls to resize myself as I know from events precisely when the map control should change size.

Re: Map in StackContainer sized to 400px

BenFousek — Tue, 18 Jun 2013 19:29:43 GMT

Have you tried setting the doLayout property of the StackContainer to false?

This sets the size of the container to the size of the selected child pane. All of your panes would need to be 100% x 100%. I have never tried it in a mobile layout. It might not work, but then again it might.

Re: Map in StackContainer sized to 400px

RobertWinterbottom — Tue, 18 Jun 2013 20:03:43 GMT

@ _js

Ok that makes sense. I have not switched back to the stack container yet but with the divs I was able to call initMap the first time the map page loads and it is now working as expected.

@ btfou

I did try that and If I remember I had every pane and parent set to 100% width and height, but I will do some more testing later tonight after work just to be sure, it's currently working with div's and calling my initMap function when that particular div becomes visible, so I'll see if I can get this working inside the stack container widget. This was failing in the browser as I often just test things in Safari to make sure they at least load before I run the app through XCode and then test it on my iPhone or iPad.

Thanks guys, I appreciate the response.

Re: Map in StackContainer sized to 400px

BrunoGonzalez — Fri, 21 Jun 2013 04:10:02 GMT

Hi everyone. I'm working with Sencha Touch 2 framework and I'm having the same issue. I have the map on a panel with fixed layout and it's always rendered in 400x400px. Could you give me some tips for the work around?
Thanks in advance.

Re: Map in StackContainer sized to 400px

BenFousek — Sat, 11 Dec 2021 17:29:37 GMT

I did some testing and the following works. The map had to be the first pane to load properly.

html, body { width:100%; height:100%; margin:0; padding:0; }
#stack { z-index:1; width:100%; height:100%; padding:0; background-color:#EFEFEF; }
#map { z-index:1; width:100%; height:100%; padding:0; background-color:#EFEFEF; }
#info { z-index:1; width:100%; height:100%; pading:1em; background-color:#EFEFEF; }
#geo { z-index:1; width:100%; height:100%; pading:1em; background-color:#EFEFEF; }

[HTML]<div id="stack" data-dojo-type="dijit/layout/StackContainer" data-dojo-props="">
<div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="">

</div>
<div id="info" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="">

</div>
<div id="geo" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="">

</div>
</div>[/HTML]

If you want the map to not be the first pane, e.g. a welcome pane first, you would need to load the map the first time the map pane was selected.

function load() {
 var conn = new dojo.connect(dijit.byId('map'), 'onShow', function() {
  dojo.disconnect(conn);
  //load map
 });
}
dojo.ready(load);

Re: Map in StackContainer sized to 400px

MihaiAsandulesei — Sat, 11 Dec 2021 17:29:39 GMT

i fixed that with this code:

require(["dojo/ready","esri/map", "dojo/domReady!"], function (ready,Map) {
                ready(function () {
                        map = new Map("map", {
                          basemap: "topo",
                          center: [-122.45,37.75], // long, lat
                          zoom: 13,
                          sliderStyle: "small"
                        });
                    
                });
            });