2

I am getting started with ArcGIS JavaScript 4. I want to create a layout with header menu, left pane and right pane with map. All the ESRI examples seem to refer to JavaScript 3. In the code below when I try to use this with JavaScript 4 API I get a 404.

Is there a difference in the way layouts are created in JavaScript 4 API?

Is it still with Dojo?

In the head tag I have :

  <head>
<link rel="stylesheet" href="https://js.arcgis.com/4.13/esri/themes/light/main.css">
 <script>var dojoConfig = { parseOnLoad: true };</script>
<script src="https://js.arcgis.com/4.13/"></script>

then in script tag after head is closed:

   <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"
});

var view = new MapView({
  container: "viewDiv",
  map: map,
  center: [174.80500, -36.82700], // longitude, latitude
  zoom: 11
 });
});

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

Improve this question

1 Answer 1

Reset to default
1

The answer was not to use dojo but just some css:

    <style>
  html, body {
    padding: 30;
    margin: 30;
    height: 90%;
    width: 90%;
  }
   #listDiv {
    padding: 0;
    margin: 0;
    height: 100%;
    width: 25%;
    float: left;
  }
  #viewDiv {
    padding: 0;
    margin: 0;
    height: 100%;
    width: 75%;
    float: left;
  }
</style>

Then in body:

  <body>
<div id="listDiv">
  <h1>** TASKS **</h1>
  <ul>
    <li>Deployment Task 1</li>
    <li>Deployment Task 2</li>
    <li>Deployment Task 3</li>
  </ul>
</div>
<div id="viewDiv"></div>

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.