nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Map Resizing across browsers

AndrewClark

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

Vind meer berichten getagd met

Accepted answers

All comments

DerekSwingley

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

AndrewClark

Saw that, tried that, didn't work!

DerekSwingley

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);
  });
});
}

GeoffreyMahase

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.

BrettLord-Castillo

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.

munimelpati

 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.

JohnGrayson

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);
});
});

MartinaObermeyer

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.

RoyJackson1

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.

tongwenhuan

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

JorgeFiallega

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.

Doe mee aan het gesprek

Aangemelde leden kunnen berichten plaatsen, updates volgen en meer. Nieuw hier? Registreer een gratis account.

Snelle Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.