Getting Started with Layout

[AlGrant]

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 :

<script>

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]

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

[AlGrant]

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]

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!