samirgambhir

Map resizing

Discussion created by samirgambhir on Aug 13, 2012
Latest reply on Aug 14, 2012 by samirgambhir
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);

Outcomes