4

I am trying to recreate the ArcGIS Javascript API/Dojo ContentPane layout template shown here for my own custom application. I would like to switch from using dojo.require() legacy syntax to using AMD module require syntax.

Here is how I have structured my Javascript (removed everything but the basemap from the ArcGIS template):

<script>
    var map;
    require([
        "dijit/layout/BorderContainer",
        "dijit/layout/ContentPane",
        "esri/map",
        "dijit/layout/TabContainer",
        "esri/dijit/Legend"
    ], function(
        BorderContainer,
        ContentPane,
        Map,
        TabContainer,
        Legend
    ){
        map = new esri.Map("map", {
            center: [-85.772, 38.255],
            zoom: 10,
            basemap: "satellite"
        });
    });
</script>

I didn't change much about the HTML except for changing the periods to slashes consistent with the AMD syntax: 

<body class="claro">
<div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline', gutters:false" style="width:100%; height:100%;">

    <div id="header" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'">
        This is the header section
        <div id="subheader">subheader</div>
    </div>

    <div data-dojo-type="dijit/layout/ContentPane" id="leftPane" data-dojo-props="region:'left'">
        <div data-dojo-type="dijit/layout/TabContainer">
            <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title:'Legend', selected:true">
                <div id="legendDiv"></div>
            </div>
            <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title:'Tab 2'" >
                Content for the second tab
            </div>
        </div>
    </div>

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

    <div id="footer" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'bottom'">
        this is the footer section
    </div>

</div>
</body>

Making this switch has caused a very annoying problem in which the actual map typically only fills half of its ContentPane when the page initially loads. This problem can usually be fixed by resizing the window.

I'm aware that esri/Map objects are typically instantiated to the size of their parent container. I am not well versed in the nitty-gritty of asynchronous Javascript, but the fact that this is happening makes me wonder if the ContentPane and Map are loading independently of each other and the Map isn't getting the size info of the ContentPane.

Is this what's happening?

If so, how can I avoid having to resize the window to get the map to fill the ContentPane?

Improve this question

1 Answer 1

Reset to default
5

Include the dojo/parser and dojo/domReady! modules. Just like in this example

https://developers.arcgis.com/javascript/jssamples/widget_basemap.html

domReady will ensure that your DOM is loaded, the parser will set the ContentPane height explicitly, so the map will have the ContentPane height it needs to know before initializing.

Your code will look like this.

var map;
require([
    "dijit/layout/BorderContainer",
    "dijit/layout/ContentPane",
    "esri/map",
    "dijit/layout/TabContainer",
    "esri/dijit/Legend",
    "dojo/parser","dojo/domReady!"
], function(
    BorderContainer,
    ContentPane,
    Map,
    TabContainer,
    Legend,
    parser
){
    parser.parse();
    map = new esri.Map("map", {
        center: [-85.772, 38.255],
        zoom: 10,
        basemap: "satellite"
    });
});
Improve this answer
1
  • @user1100652 you should not be using the global esri in your function. You are requiring Map so just use Map. Using the esri global is old and not good.
    – Steve
    Commented Feb 9, 2015 at 17:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.