GEOG 863:
Web Application Development for Geospatial Professionals

8.4.1 Page Layout

PrintPrint

8.4.1 Page Layout

So far in the course, the majority of our apps have had the map fill the entire browser window. Earlier in this lesson, we saw how to overlay UI elements on top of the map. However, there may be times when you want to draw the map in a smaller area of the page and surround it with other types of content. This can certainly be done with plain HTML and CSS, but JS frameworks like Dojo typically offer widgets to simplify the process.

The example below shows a layout with a sidebar and header built using Dojo’s Layout dijits BorderContainer and ContentPane. While the example has just placeholder text, you should be able to imagine content that you’d include in your own app. For example, the header could include the app’s title and maybe an organization logo. The sidebar could contain a listing of map features like we saw in the previous section. Note that the border between the map and sidebar is resizable, a nice feature for users that is made much easier to implement using a framework.

See the Pen Dojo Layout by Jim Detwiler (@jimdetwiler) on CodePen.

Let’s walk through the code that produced this page. While dijits can be added to a page dynamically using JS code, in this example they are defined using HTML. (In the Dojo documentation, adding dijits with JS is referred to as the programmatic approach, while using HTML is the declarative approach.)

The first difference in the HTML of this example as compared to earlier examples is the linkage to the stylesheet associated with Dojo’s claro theme. Dojo’s reference site provides more information on the implementation of their themes, but the basic idea is that they produce a consistent look and feel to the Dojo elements placed on the page. The other step in implementing the theme is adding the theme’s class name to the body element.

The page’s body contains a div (with id of appLayout) that has its data-dojo-type attribute set to dijit/layout/BorderContainer, a dijit used to divide a page into as many as five regions. Here the appLayout div contains three child divs. The child divs are defined as ContentPane dijits and have their regions defined through the data-dojo-props attribute. The first (classed as centerPanel) is assigned to the center region and contains the viewDiv div you’ve seen used in earlier examples to hold the MapView or SceneView. The second div (classed as edgePanel) produces the narrow strip in the top region and the third div (also classed as edgePanel) produces the sidebar in the left region. Note also that the left region div includes a splitter: true property setting. This is what makes it possible to drag the border between the left and center divs to resize them.

A critical piece of implementing these dijits is the script element on lines 40-44. This code includes an AMD require() block just like we’ve seen for getting access to Esri’s API classes, except this one provides access to the Dojo dijit classes we just discussed above. Importantly,t the require block includes the dojo/parser module, defines a matching class named parser, then uses the parser class to execute the parse() method. This finds all of the elements decorated with a data-dojo-type attribute and converts them into the slick widget the user sees on the page.

One last important point to note is that the implementation of dijits as we're doing here changed at version 4.25 of the Maps SDK for JS.  Prior to that version, Esri's content delivery network (CDN) hosted several Dojo modules as part of what you got when you loaded the Esri modules.  Beginning at 4.25, the Dojo modules were no longer included.  This means that loading those modules now has to be done separately, which is done by the script element on lines 10-34.  This change in the CDN along with a discussion of how to incorporate the Dojo modules (packages) going forward is covered in the Release notes section of the documentation.