topic Re: Loading WebMap using Esri API for Javascript in ArcGIS JavaScript Maps SDK Questions

Loading WebMap using Esri API for Javascript

moremeowbell — Mon, 25 Jul 2022 20:28:02 GMT

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>

Re: Loading WebMap using Esri API for Javascript

KenBuja — Mon, 25 Jul 2022 20:06:27 GMT

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

Re: Loading WebMap using Esri API for Javascript

moremeowbell — Mon, 25 Jul 2022 20:08:17 GMT

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

Re: Loading WebMap using Esri API for Javascript

ReneRubalcava — Mon, 25 Jul 2022 20:17:26 GMT

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"

Re: Loading WebMap using Esri API for Javascript

moremeowbell — Mon, 25 Jul 2022 20:21:45 GMT

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

Re: Loading WebMap using Esri API for Javascript

ReneRubalcava — Mon, 25 Jul 2022 20:44:37 GMT

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

Re: Loading WebMap using Esri API for Javascript

moremeowbell — Mon, 25 Jul 2022 20:49:52 GMT

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

Re: Loading WebMap using Esri API for Javascript

ReneRubalcava — Mon, 25 Jul 2022 21:45:24 GMT

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>  <script src="js/test_main.js"></script> </body> </html>

Re: Loading WebMap using Esri API for Javascript

moremeowbell — Tue, 26 Jul 2022 12:02:43 GMT

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

Re: Loading WebMap using Esri API for Javascript

moremeowbell — Fri, 12 Aug 2022 16:18:39 GMT

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