ArcGIS API for JavaScript, NS_ERROR_DOM_BAD_URI: Access to restricted URI denied

I'm following this guide:

https://developers.arcgis.com/javascript/jshelp/intro_agstemplate_amd.html

I am using the Web Map ID that they do In the tutorial: 1a40fa5cc1ab4569b79f45444d728067

However, when I run my code:

var map;
require([
"esri/map",
"esri/arcgis/utils",
"dojo/domReady!"
], function(Map, arcgisUtils) {
    arcgisUtils.arcgisUrl = "file:///C:/Users/Bryan/Desktop/gis.html";
    arcgisUtils.createMap("1a40fa5cc1ab4569b79f45444d728067 ", "mapDiv").then(function(response) {
        map = response.map;
    });
});

I get the following error:

NS_ERROR_DOM_BAD_URI: Access to restricted URI denied

In the tutorial they say the following:

To access a web map from a portal outside of ArcGIS Online, reference the arcgisUrl property and set the path to your portal URL before calling the createMap() method: arcgisUtils.arcgisUrl = "http://pathto/portal/sharing/content/items";

But what is a portal URL? What is my portal URL?

Solution

We will go step by step to resolve above issue:

First of all you should know your the webmap ID 1a40fa5cc1ab4569b79f45444d728067 you are using its public or private. I mean it accessible by everyone or by the created person who created it.

As you can see I can access this Id globally so it mean its not private so you don't need to add portal url

(Below are the two way you can access your webmap just replace web map id at the end of below urls).

Item details of above Webmap ID: click here to see the details of webmap id.

Webmap ID in map viewer: click here to see webmap id in map viewer.

Portal url is needed only when if the webmap id is not shared to everyone.

Portal URL: Whenever you sign up to arcgis.com after that it creates a unique portal url (The server name where Portal for ArcGIS is installed) for each user. This unique url we need to configure only when if webmap/item is not shared to everyone. In this case it take automatically "arcgis online default portal url".

Now go to this online sample and replace your webmap id there. It will work properly.

Running Code:

require([
        "dojo/parser",
        "dojo/ready",
        "dijit/layout/BorderContainer",
        "dijit/layout/ContentPane",
        "dojo/dom",
        "esri/map", 
        "esri/urlUtils",
        "esri/arcgis/utils",
        "esri/dijit/Legend",
        "esri/dijit/Scalebar",
        "dojo/domReady!"
      ], function(
        parser,
        ready,
        BorderContainer,
        ContentPane,
        dom,
        Map,
        urlUtils,
        arcgisUtils,
        Legend,
        Scalebar
      ) {
        ready(function(){

        parser.parse();

//if accessing webmap from a portal outside of ArcGIS Online, uncomment and replace path with portal URL
       //arcgisUtils.arcgisUrl = "https://pathto/portal/sharing/content/items";
        arcgisUtils.createMap("1a40fa5cc1ab4569b79f45444d728067 ","map").then(function(response){
          //update the app 
          dom.byId("title").innerHTML = response.itemInfo.item.title;
          dom.byId("subtitle").innerHTML = response.itemInfo.item.snippet;

          var map = response.map;



          //add the scalebar 
          var scalebar = new Scalebar({
            map: map,
            scalebarUnit: "english"
          });

          //add the legend. Note that we use the utility method getLegendLayers to get 
          //the layers to display in the legend from the createMap response.
          var legendLayers = arcgisUtils.getLegendLayers(response); 
          var legendDijit = new Legend({
            map: map,
            layerInfos: legendLayers
          },"legend");
          legendDijit.startup();


        });


        });

      });

<link rel="stylesheet" href="https://js.arcgis.com/3.16/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.16/esri/css/esri.css">
    <link rel="stylesheet" href="http://developers.arcgis.com/javascript/sandbox/css/styles.css">

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

<body class="claro">
    <div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'" style="width:100%; height:100%;">
      <div id="header" class="shadow roundedCorners" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'">
        <div id="title"></div>
        <div id="subtitle"></div>
      </div>
      <div id="map" class="roundedCorners shadow" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"></div>
      <div id="rightPane" class="roundedCorners shadow" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'right'" >
        <div id="legend"></div>
      </div>
    </div>
  </body>