Loading WebMap using Esri API for Javascript

2544
9
07-25-2022 12:50 PM
moremeowbell
Regular Contributor

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>

 

Tags (1)
0 Kudos
9 Replies
KenBuja
MVP Esteemed Contributor

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

moremeowbell
Regular Contributor

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

moremeowbell_0-1658779683161.png

 

0 Kudos
ReneRubalcava
Honored Contributor

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"
0 Kudos
moremeowbell
Regular Contributor

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

moremeowbell_0-1658780486886.png

 

0 Kudos
ReneRubalcava
Honored Contributor

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

0 Kudos
moremeowbell
Regular Contributor

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

0 Kudos
ReneRubalcava
Honored Contributor
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
Regular Contributor

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/....}

0 Kudos
moremeowbell
Regular Contributor

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

0 Kudos