Map resizing

SamirGambhir — Mon, 13 Aug 2012 19:40:28 GMT

Hi,
This issue has been widely discussed and users have provided many solutions. However, I am finding it hard to implement this function for my application.
My application has a tab container with two tabs. Each tab has a map div - mapM and mapA. I would like each map to resize itself when I move the application from one screen size to another. I have tried some of the solutions from this forum, but it has not worked for me. Maybe I am not inserting the code at the right place. I'll appreciate any help.
Thanks Samir

Here is what I have:

HTML code:
<html>
<body>
...
<div id="projectTabContainer" dojoType="dijit.layout.TabContainer" style="width: 100%; height: inherit;">
<div id="mappingTab" dojoType="dijit.layout.ContentPane" title="Mapping" selected="selected">
<div id="mapM" dojotype="dijit.layout.ContentPane" region="center"></div>
...
</div>
<div id="analysisTab" dojoType="dijit.layout.ContentPane" title="Analysis" >
<div id="mapA" dojotype="dijit.layout.ContentPane"></div>
...
</div>
</div>
</body>
</html>

CSS code:
html {
height: 100%; width:100%;margin:0; padding:0; overflow:auto;
}
body {
background-color: #505050; overflow: auto; font-family: "Calibri"; width:100%; height:92%;margin:0; padding:0;
}
#projectTabContainer {
position: absolute; top: 75px;
}
#mapM, #mapA {
position:absolute; width:99%; height:99%; padding:0;
}
...

JS code:
function init(){
...
var selectChildEvent = dojo.subscribe("projectTabContainer-selectChild", null, onSelectChild);
        dijit.byId('projectTabContainer').selectChild(dijit.byId('analysisTab'));
        dijit.byId('projectTabContainer').selectChild(dijit.byId('mappingTab'));
        dojo.unsubscribe(selectChildEvent);
...
mapM.addLayer(BaseMapM);
        dojo.connect(dijit.byId('mapM'),'onLoad', mapM, function(map){
          mapM.resize();
        });
        mapA.addLayer(BaseMapA);
        dojo.connect(dijit.byId('mapA'),'onLoad', mapA, function(map){
          mapA.resize();
        });
...
}

function onSelectChild(page){
        switch(page.id){
          case 'mappingTab':
            mapM = new esri.Map("mapM", {extent : iniExtentM});
            ...
            mapM.addLayer(StreetMapM);
...
break;
case 'analysisTab':
            mapA = new esri.Map("mapA", {extent : iniExtentA});
            ...
            mapA.addLayer(StreetMapA);
...
break;
}
}
...
dojo.addOnLoad(init);

Re: Map resizing

derekswingley1 — Mon, 13 Aug 2012 20:55:10 GMT

Try listening to each content pane's onShow event and call map.resize() and map.reposition() for the appropriate map.

Re: Map resizing

SamirGambhir — Tue, 14 Aug 2012 15:23:26 GMT

Hi Derek,
Thanks for your response.
Where should I place the resize function in the given code? I have tried to place it at different locations just to check the impact, but none of those have worked. To be fair, the resize function works if I resize the browser on my original 17" monitor screen, but it does not work when I move and maximize the browser on my 14" monitor screen. Not sure if I need to work with my monitor's aspect ratio as well.
Thanks
Samir

topic Re: Map resizing in ArcGIS JavaScript Maps SDK Questions

Map resizing

Re: Map resizing

Re: Map resizing