topic Re: Map Resizing across browsers in ArcGIS JavaScript Maps SDK Questions

Map Resizing across browsers

AndrewClark — Mon, 24 May 2010 13:59:31 GMT

I'm developing JS libraries for our Corporate Web Team to use (they don't have the time to learn how to do it themselves).

I've hit and solved a few problems along the way, but now I'm stuck. I have 2 sample applications, one with a set-size DIV which is not an issue, but I also have a test app that has the map DIV at 100% Height and Width contained in a dojo content panel.

I've tried connecting to the onresize/resize event on the esri map object and on the map DIV but the event just doesn't fire (tested in IE and FF - latest versions). The only thing that works partially (in IE, not FF) is setting the onResize attribute [onresize="MapResizer();"] of the DIV associated with the esri map object.

To add further complication I cannot necessarily rely on whether the map-DIV is in a dojo container panel, or a plain old DIV.

So - all ideas welcome.

Thank you

Re: Map Resizing across browsers

DerekSwingley — Mon, 24 May 2010 18:33:49 GMT

http://help.arcgis.com/en/webapi/javascript/arcgis/help/jshelp_start.htm#jshelp/inside_guidelines.htm#resizing_and_repositioning_the_map

Re: Map Resizing across browsers

AndrewClark — Tue, 25 May 2010 06:57:45 GMT

Saw that, tried that, didn't work!

Re: Map Resizing across browsers

DerekSwingley — Sat, 11 Dec 2021 13:05:22 GMT

Can you post your broken code?

Also, have you tried this way:

var resizeTimer;
dojo.connect(map, 'onLoad', function(theMap) {
  dojo.connect(dijit.byId('map'), 'resize', function() {  //resize the map if the div is resized
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout( function() {
      map.resize();
      map.reposition();
    }, 500);
  });
});
}

Re: Map Resizing across browsers

GeoffreyMahase — Sat, 11 Dec 2021 13:05:25 GMT

to resize my map I put an onresize on the body itself which calls a function to recalculate the content div.

HTML

<body class="tundra" onresize="onPageResizeHandler()">
        <form id="form1">
            <div id="header">
            </div>
            <div id="leftcolumn" dojotype="dijit.layout.ContentPane">                
            </div>
            <div id="center" dojotype="dijit.layout.ContentPane">
                <div id="map" style="width:1200px; height:600px; border:1px solid #000;"></div>
            </div>
        </form>
    </body>

function onPageResizeHandler() {
    var _header = dojo.marginBox(dojo.byId("header"));    
    var _leftcolumn = dojo.marginBox(dojo.byId("leftcolumn"));    
    var windowsize = getWindowSize();
    _height = windowsize.h - _header.h;
    _width = windowsize.w - _leftcolumn.w;
    var centerbox = dojo.marginBox(dojo.byId("center"), {
        h: _height,
        w: _width
    });
    var leftcolumnbox = dojo.marginBox(dojo.byId("leftcolumn"), {
        h: _height        
    });
    
    var centerbox2 = dojo.marginBox(dojo.byId("center"));
    centerbox2.l = 0;
    centerbox2.t = 0;
 
    dojo.publish("ResizeMap", [centerbox2]);
};

The publish basically calls a function and passes the center div measurements to it

        var mapDiv = dojo.byId(this.map.id);
   dojo.style(mapDiv, {
       left: contentBox.l + "px",
       top: contentBox.t + "px",
       width: contentBox.w + "px",
       height: contentBox.h + "px"
   });
   this.map.resize();
   this.map.reposition();

Looks kind of cumbersome but it works in all browsers without getting into overly complicated CSS if you just want the map to be 100% height and width in a div tag on the page.

Re: Map Resizing across browsers

BrettLord-Castillo — Sat, 11 Dec 2021 13:05:28 GMT

The way I handled it was to put the map -inside- a dijit.layout.ContentPane. I then added the map as the property .mapobj on the ContentPane, overrode layout() on the ContentPane, and added the onMapResize function as below.
(Extra benefit, I now have an event that I can connect to if I want something else to fire when the map is resized.)
Remember to also add .resizetimer as a property on the ContentPane too.

 layout: function () { //Not executed if map is not created yet
  if (this.mapobj) {
   this.onMapResize();
  }
 }, 
 onMapResize: function () {
  if (dojo.coords(this.domNode).w > 2 && dojo.coords(this.domNode).h > 2) {
   window.clearTimeout(this.resizetimer);
   this.resizetimer = window.setTimeout(dojo.hitch(this, function () {
    this.mapobj.resize();
    this.mapobj.reposition();
   }), 200);
  }
  return arguments;
 }

Now, as for the functions used above, the most likely problem is with the scope of window.setTimeout. window.setTimeout has a weird scope on it, so if you don't hitch to the proper scope, then 'map' might not be visible, and so your resize and reposition never gets called.

Also, notice the part about checking the size of the div before calling resize and reposition. In some browers, if the div is less than 2x2 pixels, map.resize() and map.reposition() break.

Re: Map Resizing across browsers

munimelpati — Sat, 11 Dec 2021 13:05:30 GMT

 layout: function () { //Not executed if map is not created yet
  if (this.mapobj) {
   this.onMapResize();
  }
 }, 
 onMapResize: function () {
  if (dojo.coords(this.domNode).w > 2 && dojo.coords(this.domNode).h > 2) {
   window.clearTimeout(this.resizetimer);
   this.resizetimer = window.setTimeout(dojo.hitch(this, function () {
    this.mapobj.resize();
    this.mapobj.reposition();
   }), 200);
  }
  return arguments;
 }

Hi lordcasb,
Can u please provide me an example to how to implement the above code. That will help me a lot. Thanks.

Re: Map Resizing across browsers

JohnGrayson — Fri, 20 Aug 2010 14:36:14 GMT

The important step is to make the div hosting your map a ContentPane and just listen to resize event of the ContentPane dijit as recommended previously. Please note that when connecting the 'resize' event, the line "dijit.byId('map')" refers to the ContentPane as the JS API map is not a dijit and does not contain a 'resize' event.

<div id="map" dojotype="dijit.layout.ContentPane" style="width:50%; height:50%;">

var resizeTimer;
dojo.connect(map, 'onLoad', function(theMap) {
dojo.connect(dijit.byId('map'), 'resize', function() {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout( function() {
      map.resize();
      map.reposition();
    }, 500);
});
});

Re: Map Resizing across browsers

MartinaObermeyer — Fri, 21 Jan 2011 09:41:14 GMT

Hi lordcasb, Hi jgrayson,

can you please explain me how you add the mapobj as a property to the ContentPane and referenzed it to the map.

Thanks a lot.

Re: Map Resizing across browsers

RoyJackson1 — Fri, 08 Mar 2013 21:12:59 GMT

dojo.connect(window, 'onresize', function() {
                map.resize();
map.reposition();
            });

with the map like this:

   <div id="map" style="float: left; border-color: #fff" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'">

worked for me.

Re: Map Resizing across browsers

tongwenhuan — Fri, 07 Jun 2013 07:10:57 GMT

i had miss same things,that resize not fire on my ext.window contains,i solved add listener ext.windows's event resize,add map.resize() and map.reposition(),thus proplem is solved. i think u do is also to add event listen on your ContentPane. you can see my do on site:http://www.tree360.cn/2013/06/1361.html

Re: Map Resizing across browsers

JorgeFiallega — Sun, 19 Jan 2014 02:31:54 GMT

I hooked up the resize event as explain above to the div of the map.
The event fires when resizing the window, but when I programmatically change the height or width of the div, the event does not fire.
My question is if it is suppose to fire on changes to height and width ? I would think so, otherwise just listening for window.resize event would have been enough.