Getting Started with Layout

Question

Hi,

I am trying to get started with layout and want to create a map in the right pane, with a list in the left pane.

The samples all seem to relate to Javascript 3 with dojo.

Should these samples still work in Javascript 4? Because I get an error when I try to use :

dojo.require("dijit.layout.BorderContainer");
 dojo.require("dijit.layout.ContentPane");
 dojo.require("dijit.layout.TabContainer");
 dojo.require("esri.map");
 dojo.require("esri.arcgis.utils");
 dojo.require("esri.IdentityManager");

require([
 "esri/Map",
 "esri/views/MapView"
 ], function(Map, MapView) {

var map = new Map({
 basemap: "topo-vector"
 });

This code results in a 404 error for https://js.arcgis.com/4.13/dojo/dijit.layout.BorderContainer.js net::ERR_ABORTED 404

Al

AnneFitz · Answer

Yes, I would recommend bootstrap or whatever you feel comfortable with. Esri has created a Bootstrap theme specifically for designing, styling, and creating modern map apps called calcite-maps. Here's a link to one of our samples that shows you how to integrate the JavaScript API with Bootstrap and Calcite Maps: https://developers.arcgis.com/javascript/latest/sample-code/frameworks-bootstrap/index.html

Hope this helps!

AlGrant · Answer

Right - thank you - makes sense. That will work up to a point.

For more complicated layouts, menus in the banner etc would you use bootstrap or is there another technology to help with layouts?

AnneFitz · Answer

Hi Al,

Here is a basic sample that places a list on the left, and a map on the right using the 4.x JavaScript API: https://codepen.io/annefitz/pen/yLLrLoZ

To create a separate pane outside of your map, just create a div and use CSS to set the width, then create another div for your map view. If you want to put the pane inside your map view, this guide on using view ui might help.

Thanks,

Anne