Loading WebMap using Esri API for Javascript

moremeowbell · ‎07-25-2022

I am attempting a very basic script that loads a Portal WebMap using the Esri JS API. Here is the error message I am getting:

EDIT: For some reason it seems to be directing towards www.arcgis.com instead of my portal...

(index):146 [esri.WebMap] #load() Failed to load web map 
l
details:
error: l
details:
getHeader: V=>ya.headers.get(V)
httpStatus: 400
messageCode: "CONT_0001"
messages: []
raw: {code: 400, messageCode: 'CONT_0001', message: 'Item does not exist or is inaccessible.', details: Array(0)}
requestOptions: {authMode: 'auto', body: null, cacheBust: false, method: 'auto', query: {…}, …}
ssl: false
subCode: undefined
url: "https://www.arcgis.com/sharing/rest/content/items/c1127b4c1e3e4ab9bd3005192f6e6731"
[[Prototype]]: Object
message: "Item does not exist or is inaccessible."
name: "request:server"
[[Prototype]]: c
[[Prototype]]: Object
message: "Failed to load portal item"
name: "webmap:load-portal-item"
[[Prototype]]: c

Here is my JS script:

require(["esri/config","esri/views/MapView", "esri/WebMap"], 
  (esriConfig, MapView, WebMap) => {

  var esriConfig = {
    portalUrl: "https://domain/portal/home/",
  };

  const webmap = new WebMap({
    portalItem: {
      // autocasts as new PortalItem()
      id: "c1127b4c1e3e4ab9bd3005192f6e6731"
    }
  });

  const view = new MapView({
    map: webmap,
    container: "viewDiv"
  });
});

Here is my HTML script:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>Testing</title>
  <style>
      #viewDiv {
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
      }
  </style>
  <link 
  rel="stylesheet"
  href="https://js.arcgis.com/4.24/esri/themes/dark/main.css"
  />

</head>
<body>
  <div id="viewDiv"></div>
  <script src="https://js.arcgis.com/4.24/"></script>
  <script src="js/test_main.js"></script>

</body>
</html>

KenBuja · ‎07-25-2022

This may be an authentication problem since your web map is private. Take a look at this post by @ReneRubalcava

moremeowbell · ‎07-25-2022

It's public, so I don't think that's the issue:

ReneRubalcava · ‎07-25-2022

Set the portalUrl of the esriConfig object you import, you're creating a new object and overwriting the default one.

https://developers.arcgis.com/javascript/latest/api-reference/esri-config.html#portalUrl

esriConfig.portalUrl = "https://myHostName.esri.com/arcgis"

moremeowbell · ‎07-25-2022

I'm using Portal and not AGOL which is why it has Portal at the end of the URL instead of arcgis:

ReneRubalcava · ‎07-25-2022

if you are going to use the esriConfig global object, you need to put it in a script tag above the one that imports the map modules.

Or you can import the esriConfig like you did and set the portalUrl on it

You can't do both in the same script tag

moremeowbell · ‎07-25-2022

Could you give me an example? I'm kind of lost.

ReneRubalcava · ‎07-25-2022

require(["esri/config","esri/views/MapView", "esri/WebMap"], 
  (esriConfig, MapView, WebMap) => {

// you are overriding the esriConfig object you imported
//   var esriConfig = {
//     portalUrl: "https://domain/portal/home/",
//   };

  esriConfig.portalUrl = "https://domain/portal/home/";

  const webmap = new WebMap({
    portalItem: {
      // autocasts as new PortalItem()
      id: "c1127b4c1e3e4ab9bd3005192f6e6731"
    }
  });

  const view = new MapView({
    map: webmap,
    container: "viewDiv"
  });
});

Or if you want to make the esriConfig global, you can do this. You don't need to import or reference it in your own JavaScript if you do this.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>Testing</title>
    <style>
        #viewDiv {
            height: 100%;
            width: 100%;
            margin: 0;
            padding: 0;
        }
    </style>
    <link rel="stylesheet" href="https://js.arcgis.com/4.24/esri/themes/dark/main.css" />
    <script>
        // If ou define it globally here
        // the API will pick it up.
        // But should be in the head
        // so it is created before the API
        var esriConfig = {
            portalUrl: "https://domain/portal/home/",
        };
    </script>
</head>
<body>
    <div id="viewDiv"></div>
    <script src="https://js.arcgis.com/4.24/"></script>
    <!-- Do not add the esriConfig your JavaScript if you do this -->
    <script src="js/test_main.js"></script>
</body>
</html>

moremeowbell · ‎07-26-2022

Thanks for sending over some script! I totally get what you're saying now. However, when I put it in the HTML head, I'm getting a CORS error. When I put it in the JS script, I'm getting a CORS error as well. The only way that I have been able to get around this is by setting the global variable in the JS script... The part that doesn't make sense is that it's saying I'm trying to fetch the WebMap item from here rather than my Portal: {url: 'https://www.arcgis.com/sharing/rest/content/items/....}

moremeowbell · ‎08-12-2022

Looks like the /home at the end of the url was messing things up! Got it resolved.