topic Re: Zooming and Centering issues with map in Content Pane in ArcGIS JavaScript Maps SDK Questions

Zooming and Centering issues with map in Content Pane

NumaGremling — Thu, 24 Oct 2013 18:30:58 GMT

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]

Re: Zooming and Centering issues with map in Content Pane

BenFousek — Sat, 11 Dec 2021 19:57:30 GMT

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.

Re: Zooming and Centering issues with map in Content Pane

NumaGremling — Sat, 11 Dec 2021 19:57:33 GMT

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.

Re: Zooming and Centering issues with map in Content Pane

BenFousek — Thu, 24 Oct 2013 21:32:41 GMT

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.

Re: Zooming and Centering issues with map in Content Pane

NumaGremling — Sat, 11 Dec 2021 19:57:36 GMT

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.

Re: Zooming and Centering issues with map in Content Pane

JasonJaworski — Mon, 10 Nov 2014 19:49:42 GMT

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?

Re: Zooming and Centering issues with map in Content Pane

KenBuja — Mon, 10 Nov 2014 20:29:18 GMT

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

Re: Zooming and Centering issues with map in Content Pane

JasonJaworski — Mon, 10 Nov 2014 20:37:56 GMT

Thank you!

map.resize(); and

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

View the full discussion