Hide Table of Contents
Analysis
Dynamic Layers
Editing
Feature Layers
Feature Table
Graphics
Map
Mobile
Online and Portal
Popups and Info Windows
Query and Select
Renderers, Symbols, Visualization
Search
Explore in the sandbox
View live sample
Description
This sample shows how to use the Dojo layout widgets to create a layout where the center container is split into three regions; left, center, and right with the map displayed in the center. To create this layout specify a BorderContainer that contains one or more ContentPanes. The ordering of the content panes is defined by setting the region attribute to one of the following values: top,left,center,right,bottom. In this layout the design attribute is set to headline to extend the top and bottom sections the entire length of the box.
This layout is ideal to display company logo, copyright info, links and other items in the header and footer areas. The left and right regions can be used to show results or add more functionalty to the application or perhaps a Dojo widget like the Accordion Container in the right pane of this sample. The dijit.layout.AccordionContainer is a container with content in multiple panes, the title for each pane is always displayed but the content is visible for only one section at a time.
The css style applied to the map container adds a slight shadow in browsers that support this capability. The shadow is applied using box-shadow which takes the horizonal offset, the vertical offset, the blur radius and the shadow color as inputs. Additional values such as spread and offset can be specified.
For additional information on working with the Dojo layout widgets see the Build Application Layouts help document.
Note:In the sample application the CSS and JavaScript are inlined in the page to make it easier to view the code. However in the real world the CSS and JavaScript are typically contained in external files. Click here to download a zipped version of the sample which uses external files for the JavaScript and CSS.
Code
<!DOCTYPE html>
<html>
<head>
<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>Map container split in three</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.46/dijit/themes/nihilo/nihilo.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.46/esri/css/esri.css">
<link rel="stylesheet" href="css/layout.css">
<script>var dojoConfig = { parseOnLoad: true };</script>
<script src="https://js.arcgis.com/3.46/"></script>
<script>
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.layout.AccordionContainer");
dojo.require("esri.map");
var map;
function init() {
map = new esri.Map("map", {
basemap: "topo-vector",
center: [-118.404, 34.054],
zoom: 11
});
}
dojo.ready(init);
</script>
</head>
<body class="nihilo">
<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">with a subheader</div>
</div>
<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'left'" id="leftPane">
<div data-dojo-type="dijit.layout.AccordionContainer">
<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title:'pane 1'">
Content for pane 1
</div>
<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title:'pane 2'">
<p>Content for pane 2</p>
</div>
<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title:'pane 3'">
<p>Content for pane 3</p>
</div>
</div>
</div>
<div id="map" class="shadow" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'">
</div>
<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'right'" id="rightPane">
This is the right section
</div>
<div id="footer" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'bottom'">
this is the footer section
</div>
</div>
</body>
</html>