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

problem loading the map on the center using the dojo layout

PriyaRam

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)

dojo.zip

Find more posts tagged with

Accepted answers

rscheitlin

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.

All comments

rscheitlin

Priya,

Don't forget to mark this thread as answered.

PriyaRam

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?

rscheitlin

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>

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

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