topic Map div resizing in ArcGIS JavaScript Maps SDK Questions

Map div resizing

SamirGambhir — Wed, 22 Feb 2012 17:41:08 GMT

Hello,
May application has a TabContainer with two tabs with a map div in each. The first tab has a map with width 100% and height 100%. I would like to define the map div in the second tab with a different width and height. I have tried using resize function to get this map div to conform to my width and height requirement but it does not work. Can somebody help? The codes are as:

In Html
<div id="projectTabContainer" dojoType="dijit.layout.TabContainer" style="width: inherit; height: 900px;">
      <div id="mappingTab" dojoType="dijit.layout.ContentPane" title="Mapping">
        <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>

In css
html, body {
height: 100%; width:100%; margin:0; padding:0;
}
body {
background-color: #F0F0F0; overflow: hidden; font-family: "Calibri";
}
#mapM {
position:absolute; width:100%; height:99%; padding:0;
}
#mapA {
position:absolute; width: 800px; height: 300px; right:10px; top:10px; box-shadow:1px 1px 10px black;
}

In code
mapM = new esri.Map("mapM", {extent : iniExtentM});
        mapA = new esri.Map("mapA", {slider: false, nav:false, extent : iniExtentA});

        StreetMapM = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer");
        StreetMapA = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer");
        mapM.addLayer(StreetMapM);
        mapA.addLayer(StreetMapA);
        StreetMapA.setOpacity(0.60);
        StreetMapM.setOpacity(0.60);

Thanks
Samir

Re: Map div resizing

Salomon_VágadalJoensen — Wed, 22 Feb 2012 17:53:56 GMT

I've fiddled around with dojo's content panes and I'm pretty sure that

In Html
<div id="projectTabContainer" dojoType="dijit.layout.TabContainer" style="width: inherit; height: 900px;">
<div id="mappingTab" dojoType="dijit.layout.ContentPane" title="Mapping">
<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>

need to be defined a region where they are supposed to be located (top, left, center, right & bottom).

BTW, can a width be inherited from a parent style that easily with just style="width: inherit;"?

Re: Map div resizing

SamirGambhir — Mon, 27 Feb 2012 17:16:08 GMT

Thankyou, but your suggestion did not solve my problem.
Can somebody help me, pleeeeease? I need a solution asap.
Thanks
Samir

Re: Map div resizing

HemingZhu — Thu, 01 Mar 2012 15:50:18 GMT

I've fiddled around with dojo's content panes and I'm pretty sure that

need to be defined a region where they are supposed to be located (top, left, center, right & bottom).

BTW, can a width be inherited from a parent style that easily with just style="width: inherit;"?

Since your two map panels are all within another div. I would try this:

div.mappingTab #mapM {
position:absolute; width:100%; height:99%; padding:0;
}
div. analysisTab #mapA {
position:absolute; width: 800px; height: 300px; right:10px; top:10px; box-shadow:1px 1px 10px black;
}

Re: Map div resizing

SamirGambhir — Mon, 05 Mar 2012 15:25:33 GMT

Hi Heming,
I am definitely missing something here. It is still not working. Apparently any changes to #mapM and #mapA in the style sheet has no impact on the layout. I am attaching the simplified code here. I hope you'll be able to look at it and provide your suggestions.
Thanks in advance,
Samir

Re: Map div resizing

MattMoyles — Sun, 12 Dec 2021 05:39:07 GMT

Samir, I have had problems with positioning and resizing. Basically the trick is to figure out when to call map.resize() and map.reposition(). For example if you load the map with Firebug open and then close firebug if you were to use the draw tool you would find that it is offset from your mouse. Is the kind of problem you are having?

Here is my fix. I usually use some combination of these events on most maps. If anyone has a better way, I would love to hear it.

Putting you map in a dijit.layout.ContentPane might help too, but there was a reason I stopped doing that. Possibly, some side effect from being inside a TabContainer I think (can't remember)

        //resize the map when the browser resizes
        dojo.connect(this.map, 'resize', this, function(extent) { 
            this.map.reposition();            
        });
        
        //resize map when a user pans or zooms (sometimes good if you can't initially position and resize the map)
        dojo.connect(this.map, 'onExtentChange', this, function(extent) {
            this.map.resize();
            this.map.reposition();
        });
        
        //dont use this in TabContainer or StackContainer or a Floating Container (Dialog)
        dojo.connect(this.map, 'onReposition', this, function(x,y) {
            this.map.resize();
        });
        
        //redo sizing when mouse wheel used (i did this because i was getting weird results when a user INITIALLY zoomed into a map using the wheel)
        dojo.connect(this.map, 'onMouseWheel', this, function(event) {
            this.map.resize();
            this.map.reposition();
        });

        //redo sizing after first map layer is loaded
        dojo.connect(this.map, 'onLoad', this, function() {
            this.map.resize();
            this.map.reposition();        
        });

Re: Map div resizing

SamirGambhir — Fri, 25 May 2012 16:53:41 GMT

I found a solution to my problem. I used this forum post to figure out the solution: http://forums.esri.com/Thread.asp?c=158&f=2396&t=277953
I hope this is helpful to others as well.
Thanks
Samir

Samir, I have had problems with positioning and resizing. Basically the trick is to figure out when to call map.resize() and map.reposition(). For example if you load the map with Firebug open and then close firebug if you were to use the draw tool you would find that it is offset from your mouse. Is the kind of problem you are having?

Here is my fix. I usually use some combination of these events on most maps. If anyone has a better way, I would love to hear it.

Putting you map in a dijit.layout.ContentPane might help too, but there was a reason I stopped doing that. Possibly, some side effect from being inside a TabContainer I think (can't remember)
        //resize the map when the browser resizes         dojo.connect(this.map, 'resize', this, function(extent) {              this.map.reposition();                     });                  //resize map when a user pans or zooms (sometimes good if you can't initially position and resize the map)         dojo.connect(this.map, 'onExtentChange', this, function(extent) {             this.map.resize();             this.map.reposition();         });                  //dont use this in TabContainer or StackContainer or a Floating Container (Dialog)         dojo.connect(this.map, 'onReposition', this, function(x,y) {             this.map.resize();         });                  //redo sizing when mouse wheel used (i did this because i was getting weird results when a user INITIALLY zoomed into a map using the wheel)         dojo.connect(this.map, 'onMouseWheel', this, function(event) {             this.map.resize();             this.map.reposition();         });          //redo sizing after first map layer is loaded         dojo.connect(this.map, 'onLoad', this, function() {             this.map.resize();             this.map.reposition();                 });