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

0

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, privacy policy and cookie policy

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