[GIS] ArcGIS Javascript API not loading portal web map

arcgis-javascript-apiarcgis-onlinearcgis-portalweb-mapping

I'm trying to set up the web map example using our portal, but nothing is actually loading

The web map is shared to public

HTML Code : 

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>Eletrosul test map</title>

  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>

  <link rel="stylesheet" href="https://js.arcgis.com/4.0/esri/css/main.css">
  <link rel="stylesheet" href="https://js.arcgis.com/4.0/esri/css/calcite/calcite.css">

  <script src="https://js.arcgis.com/4.0/"></script>

  <script>
    require([
      "esri/views/MapView",
      "esri/WebMap",
      "dojo/domReady!",
      "esri/config"
    ],function(esriConfig){
      portalUrl : "https://eletrosul.maps.arcgis.com/home"
    },function(MapView, WebMap){
      var webmap = new WebMap({
        portalItem: {
          id: "8dc6238168494f64b163c81b43baebe0"
        }
      });

      var view = new MapView({
        map: webmap,
        container: "viewDiv"
      });
    });
  </script>
</head>

<body>
  <div id="viewDiv"></div>
</body>

</html>

Our Portal (It's in Portuguese, but the link and ID checks) :

enter image description here

Best Answer

There are a few syntax errors in your JavaScript. First off, ArcGIS JS uses AMD style modules. You have somehow mixed two modules into one, in a weird broken way. Your imports MapView, WebMap, domReady! and config need to be present as function parameters in the first function, in the same order:

require([
  "esri/views/MapView",
  "esri/WebMap",
  "esri/config",
  "dojo/domReady!"
], function(MapView, WebMap, esriConfig, domReady){
   // your JavaScript goes here
});

Then you are assigning the portal URL in a wrong way, it should be assigned as a parameter of esriConfig, using = instead of :: 

// "esriConfig" - same as in function parameter
// refers to the "esri/config" import (3rd import, 3rd parameter)
esriConfig.portalUrl = "https://myHostName.esri.com/arcgis"

Judging from other examples I found on the internet, the /home at the end of your URL should be omitted.

The complete code then looks like this:

<script>
  require([
    "esri/views/MapView",
    "esri/WebMap",
    "esri/config",
    "dojo/domReady!"
  ], function(MapView, WebMap, esriConfig, domReady){

    esriConfig.portalUrl = "https://eletrosul.maps.arcgis.com"
    var webmap = new WebMap({
      portalItem: {
        id: "8dc6238168494f64b163c81b43baebe0"
      }
    });

    var view = new MapView({
      map: webmap,
      container: "viewDiv"
    });
  });
</script>
Related Question