Zooming and Centering issues with map in Content Pane

NumaGremling · ‎10-24-2013

Hi everyone,

my map is not centering correctly in the right content pane. As you can see when you open it you cannot see the Esri logo or the data sources in the lower right. It also does not let you use ???SHIFT + draw box??? correctly. The cursor and the box will be far apart. I have fiddled with the CSS and although I sometimes get the whole map to show up it will never let me zoom correctly and it will not look exactly centered.

When I resize my browser and go back to full mode it will work and look fine. Hm? Do I need to call a specific method on my map after the application loads?

Thank you.

[HTML] <head>
<title>A Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=7, IE=9, IE=10">
<link rel="stylesheet" href="http://js.arcgis.com/3.7/js/dojo/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.7/js/esri/css/esri.css">
<link rel="stylesheet" href="css/layout.css">

<style>
   html, body, #mapDiv {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
   }

   #mapDiv{
    width: 100%;
    height: 100%;
   }

   #borderContainer {
    width: 100%;
    height: 100%;
   }

   #mainWindow{
    width: 100%;
    height: 100%;
   }

   #leftPane {
    width: 20%;
   }


</style>

<script>
   var dojoConfig = {
    parseOnLoad : true
   };
</script>
<script src="http://js.arcgis.com/3.7/"></script>

<script>
require([
"dijit/layout/BorderContainer",
"dijit/layout/TabContainer",
"dijit/layout/ContentPane",
"esri/map",

"dojo/on",
"dojo/dom",
"dojo/dom-class",
"dojo/dom-construct",
"dojo/domReady!"],

function(
BorderContainer,
TabContainer,
ContentPane,
Map,

dom,
domClass,
domConstruct) {

var mainMap = new Map("mapDiv", {
   basemap : "topo",
   center : [-118.161, 33.8045],
   zoom : 10,
   sliderStyle: "small",
});


});


</script>
<body class="claro">

   <div id="borderContainer" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design: 'headline', gutters: true, liveSplitters:true">

    <div id="header" data-dojo-props="region:'top'" data-dojo-type="dijit/layout/ContentPane">
     <div id="title">Welcome</div>
    </div>

    <div id="mainWindow" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'center'">
     <div id="mapDiv"></div>
    </div>

    <div id="leftPane"data-dojo-type="dijit/layout/ContentPane" data-dojo-props="splitter:true,region: 'left'">
     <div id="tabcontainerDIV"></div>
    </div>
   </div>
</body>[/HTML]

BenFousek · ‎10-24-2013

There's a couple issue with your layout.

1) Only html, body and the border container should be width:100%; height:100%;.

2) Use the center region as the map div. You don't need an extra div. The center region auto sizes itself. You can use any layout widget for a region.

[HTML]<div id="borderContainer" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design: 'headline', gutters: true, liveSplitters:true">
<div id="header" data-dojo-props="region:'top'" data-dojo-type="dijit/layout/ContentPane">
    <div id="title">Welcome</div>
</div>
<div id="mapDiv" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'center'"></div>
<div id="leftPane"data-dojo-type="dijit/layout/TabContainer" data-dojo-props="splitter:true,region: 'left'">
    <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title:'Tab 1'">
      Tab One
    </div>
    <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title:'Tab 2'">
      Tab Two
    </div>
</div>
</div>[/HTML]

html, body {
width:100%;
height:100%;
}

#leftPane {
width:20%
}

#mapDiv {
padding:0;
overflow: hidden;
}

3) Always resize the border container last in your function. This is particularly important when adding widgets programmatically, like another tab in the tab container. It will ensure the layout is correct.

dijit.byId('borderContainer').resize();

See if that doesn't make your problems cease.

NumaGremling · ‎10-24-2013

Thank you for the clarifications.

I have changed my script based upon your suggestions, and it looks like the following now. Can you check if that is correct?

[HTML]
<head>
<title>A Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=7, IE=9, IE=10">
<link rel="stylesheet" href="http://js.arcgis.com/3.7/js/dojo/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.7/js/esri/css/esri.css">
<link rel="stylesheet" href="css/layout.css">

<style>
   html, body, #borderContainer {
    width: 100%;
    height: 100%;
   }

   #leftPane {
    width: 20%;
   }

   #mapDiv{
    padding: 0;
    overflow: hidden;
   }

</style>

<script>
   var dojoConfig = {parseOnLoad : true};
</script>
<script src="http://js.arcgis.com/3.7/"></script>

<script>
require([
"dijit/layout/BorderContainer",
"dijit/layout/TabContainer",
"dijit/layout/ContentPane",
"esri/map",

"dojo/on",
"dojo/dom",
"dojo/dom-class",
"dojo/dom-construct",
"dojo/domReady!"],

function(
BorderContainer,
TabContainer,
ContentPane,
Map,
registry,

dom,
domClass,
domConstruct) {

var mainMap = new Map("mapDiv", {
   basemap : "topo",
   center : [-118.161, 33.8045],
   zoom : 10,
   sliderStyle: "small",
});

});


</script>
<body class="claro">

   <div id="borderContainer" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design: 'headline', gutters: true, liveSplitters:true">

    <div id="header" data-dojo-props="region:'top'" data-dojo-type="dijit/layout/ContentPane">
     <div id="title">Welcome</div>
    </div>

    <div id="mapDiv" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'center'"></div>

    <div id="leftPane"data-dojo-type="dijit/layout/ContentPane" data-dojo-props="splitter:true,region: 'left'">

     <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title:'Tab 1'">
       Tab One
     </div>

     <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title:'Tab 2'">
       Tab Two
     </div>

    </div>
   </div>
</body>
[/HTML]

I am struggling with adding dijit.byId('borderContainer').resize(); to my code.

I would have to add it right here, right?

  <!--------create main map--------------------------------------------------->  
  var mainMap = new Map("mapDiv", {
   basemap : "topo",
   center : [-118.161, 33.8045],
   zoom : 10,
   sliderStyle: "small",
  });      
    dijit.byId('borderContainer').resize();
 });
  <!---------

If I do so the whole layout gets messed up.

BenFousek · ‎10-24-2013

You have dijit/registry loaded use registry.byId(). I doubt resizing the bc is causing the problem. Does it happen w/o resizing?

What css is being loaded from css/layout.css? You could be causing problems if your original css is being used.

NumaGremling · ‎10-24-2013

Here is my script.

 require([
  "dijit/layout/BorderContainer",
  "dijit/layout/TabContainer",
  "dijit/layout/ContentPane",
  "esri/map",
  "dijit/registry",
   
  "dojo/on",
  "dojo/dom",
  "dojo/dom-class",
  "dojo/dom-construct",
  "dojo/domReady!"],
  
 function(
  BorderContainer,
  TabContainer,
  ContentPane,
  Map,
  registry,
  
  dom,
  domClass,
  domConstruct) {
  <!--------create main map--------------------------------------------------->  
  var mainMap = new Map("mapDiv", {
   basemap : "topo",
   center : [-118.161, 33.8045],
   zoom : 10,
   sliderStyle: "small",
  });
  
  var borderCont = registry.byId("borderContainer");
  borderCont.resize();
 });
  <!---------------------------------------------------------------------------->

If I add both lines that grab the container and resize it then my page will look as follows:

[ATTACH=CONFIG]28588[/ATTACH]

When I remove these lines it will look like this:

[ATTACH=CONFIG]28589[/ATTACH]

Now, I just noticed that if I do anything that modifies the screen size it will refresh and look fine. I mentioned resizing before but now I realized that if I pull up the Search window with CTRL + F or remove it, then the map will redraw too.

The initial page I used was using

 <link rel="stylesheet" href="http://js.arcgis.com/3.7/js/dojo/dijit/themes/tundra/tundra.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.7/js/esri/css/esri.css">
  <link rel="stylesheet" href="css/layout.css">

But I changed that to claro:

  <link rel="stylesheet" href="http://js.arcgis.com/3.7/js/dojo/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.7/js/esri/css/esri.css">
  <link rel="stylesheet" href="css/layout.css">

Either way it will give me the same issues.

JasonJaworski · ‎11-10-2014

Was this question ever answered? I am having the same issue and can't figure it out. The Powered by Esri logo doesn't appear and I am having a cursor offset issue when my map loads. If I resize the window, everything is fixed and it works great. is there some kind of map.reposition function I need to run or something like that?

KenBuja · ‎11-10-2014

This is the code that has been recommended to use in other posts

map.on("load", function () {
    registry.byId("divMap").on("resize", function () {
        clearTimeout(resizeTimer);
        resizeTimer = setTimeout(function () {
            map.resize();
            map.reposition();
        }, 500);
    });
});

JasonJaworski · ‎11-10-2014

Thank you!

map.resize(); and

map.reposition(); did the trick for me!

View the full discussion