topic Re: Getting Started with Layout in ArcGIS JavaScript Maps SDK Questions

Getting Started with Layout

AlGrant — Thu, 21 Nov 2019 19:38:59 GMT

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

Re: Getting Started with Layout

AnneFitz — Thu, 21 Nov 2019 21:30:56 GMT

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

Re: Getting Started with Layout

AlGrant — Fri, 22 Nov 2019 00:23:56 GMT

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?

Re: Getting Started with Layout

AnneFitz — Fri, 22 Nov 2019 16:33:46 GMT

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!