problem loading the map on the center using the dojo layout

PriyaRam · ‎01-14-2016

I'm working on a custom drawbylist widget and I have trouble with loading the map on the center pane. I need my custom widget to go in the left pane and the map in the center, like shown in the example below. I'm following the example below, as my baseline.

http://developers.arcgis.com/javascript/samples/ags_MapContainerSplitLeft/ .

I have two issue, the tab is not showing up and the map is not in the center. Could you please help .( I'm running on a Tomcat server to load templates and json files)

RobertScheitlin__GISP · ‎01-15-2016

Priya,

Actually you had the LayerList in your original code but it is not needed so you can remove it. The addition of the TabContainer reguire was needed as you were using it in the html section. You will also that i change all the data-dojo-types in your html section to use the non-legacy versions (dijit.layout.ContentPane is legacy and dijit/layout/ContentPane is the new way).

Don't forget to mark this thread as answered.

View solution in original post

RobertScheitlin__GISP · ‎01-14-2016

Priya,

I have made some corrections to your code and the map display in the center and the tab container displays:

<!DOCTYPE html>
<html>

<head>

  <script>
    var dojoConfig = {
      async: true,
      packages: [{
        name: "app",
        location: "/dojo/drawbylist"
         }]
    };
  </script>

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  <title>Layer List Dijit</title>
  <link rel="stylesheet" href="https://js.arcgis.com/3.15/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="https://js.arcgis.com/3.15/esri/css/esri.css">
  <link rel="stylesheet" href="css/layout.css" />


  <script src="https://js.arcgis.com/3.15/"></script>
  <script>
    require([
    "app/mapModule",
    "app/SimpleWidget",
    "esri/dijit/LayerList",
    "dojo/parser",
    "dijit/layout/BorderContainer",
    "dijit/layout/ContentPane",
    "dijit/layout/TabContainer",
    "dojo/domReady!"
], function (
      mapctrl,
      SimpleWidget,
      LayerList,
      parser
    ) {
      parser.parse();
      var widget = new SimpleWidget();
      widget.startup();
      widget.placeAt("legendDiv");

      mapctrl.initializeMap(map);


    });
  </script>
</head>

<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:'DrawByList', selected:true">
          <div id="legendDiv"></div>
        </div>
        <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title:'Tab 2'">
          EditTools
        </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>

</html>

PriyaRam · ‎01-15-2016

Thanks Robert, it works now. I see that you imported the LayerList and TabContainer in the require function. Why do we need to import the LayerList dijit?

RobertScheitlin__GISP · ‎01-15-2016

Priya,

Actually you had the LayerList in your original code but it is not needed so you can remove it. The addition of the TabContainer reguire was needed as you were using it in the html section. You will also that i change all the data-dojo-types in your html section to use the non-legacy versions (dijit.layout.ContentPane is legacy and dijit/layout/ContentPane is the new way).

Don't forget to mark this thread as answered.