ReferenceError: Portal is not defined

CarolineGlazer2 · ‎07-22-2020

Hi everyone,

I'm trying to set up a web app using Esri Leaflet, but using ArcGIS API for JavaScript to handle authentication. I've managed to get authentication working (I think), but I'm getting an error when I try to define a new portal to check the user is logged in "ReferenceError: Portal is not defined." I'm pretty new to javascript and I assume I'm using the require / function syntax incorrectly somehow - I copied bits and pieces from here: Access services with OAuth 2.0 | ArcGIS for Developers

Any insight would be very much appreciated - thank you! Code below:

<!DOCTYPE HTML>
<html>

<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
 <title>blahblahblah</title>
 <!-- Load Leaflet from CDN -->
 <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin="" />
 <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js" integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==" crossorigin=""></script>

<!-- Load Esri Leaflet from CDN -->
 <script src="https://unpkg.com/esri-leaflet@2.4.1/dist/esri-leaflet.js" integrity="sha512-xY2smLIHKirD03vHKDJ2u4pqeHA7OQZZ27EjtqmuhDguxiUvdsOuXMwkg16PQrm9cgTmXtoxA6kwr8KBy3cdcw==" crossorigin=""></script>
 <script src="https://js.arcgis.com/4.15/"></script>
 <link rel="stylesheet" href="https://js.arcgis.com/4.15/esri/themes/light/main.css">

<script>
 require([
 "esri/portal/Portal",
 "esri/identity/OAuthInfo",
 "esri/identity/IdentityManager"
 ], function(
 Portal, OAuthInfo, identityManager) {
 // ArcGIS Online or your portal address
 var portalUrl = "https://www.arcgis.com/sharing";

// subsitute your own client ID to identify who spawned the login and check for a matching redirect URI
 var info = new OAuthInfo({
 appId: "blahblahblah", //*** Your Client ID value goes here ***//
 popup: false // inline redirects don't require any additional app configuration
 });

identityManager.registerOAuthInfos([info]);

// send users to arcgis.com to login
 document.getElementById("sign-in").onclick = function() {
 identityManager.getCredential(portalUrl);
 };

// log out and reload
 document.getElementById("sign-out").onclick = function() {
 identityManager.destroyCredentials();
 window.location.reload();
 };

identityManager.checkSignInStatus(portalUrl).then(function() {
 document.getElementById('anonymousPanel').style.display = 'none';
 document.getElementById('personalizedPanel').style.display = 'block';
 displayMap();
 });

});

function displayMap() {
 var portal = new Portal();

// Once the portal has loaded, the user is signed in
 portal.load().then(function() {
 console.log('logged in');
 var map = L.map('map').setView([-122.479, 37.837], 10);

L.esri.basemapLayer('Gray').addTo(map);

L.esri.featureLayer({
 url: 'https://sampleserver6.arcgisonline.com/arcgis/rest/services/Earthquakes_Since1970/MapServer/0'
 }).addTo(map);
 });
 }

</script>
 <style>
 html,
 body,
 #viewDiv {
 font-family: Avenir Next W00;
 font-size: 14px;
 width: 100%;
 height: 100%;
 margin: 0px;
 padding: 0px;
 }

.action {
 color: blue;
 cursor: pointer;
 text-decoration: underline;
 }

#map {
 position: absolute;
 top: 0;
 bottom: 0;
 right: 0;
 left: 0;
 }

</style>
</head>

<body>
 <div id="anonymousPanel" style="display: block; padding: 5px; text-align: center;">
 <span id="sign-in" class="action">Sign In</span> to access SCMSN Stewardship Layers.
 </div>

<div id="personalizedPanel" style="display: none; padding: 5px; text-align: center;">
 Welcome <span id="userId" style="font-weight: bold;"></span>  - 
 <span id="sign-out" class="action">Sign Out</span>
 </div>
 <!-- for the map -->
 <div id="viewDiv" style="display: none;"></div>
</body>

</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

KenBuja · ‎07-22-2020

You closed off the require function at line 53, which means the displayMap function fell outside of it. You have to move that closure to line 70

<!DOCTYPE HTML>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
  <title>blahblahblah</title>
  <!-- Load Leaflet from CDN -->
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin="" />
  <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js" integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==" crossorigin=""></script>

  <!-- Load Esri Leaflet from CDN -->
  <script src="https://unpkg.com/esri-leaflet@2.4.1/dist/esri-leaflet.js" integrity="sha512-xY2smLIHKirD03vHKDJ2u4pqeHA7OQZZ27EjtqmuhDguxiUvdsOuXMwkg16PQrm9cgTmXtoxA6kwr8KBy3cdcw==" crossorigin=""></script>
  <script src="https://js.arcgis.com/4.15/"></script>
  <link rel="stylesheet" href="https://js.arcgis.com/4.15/esri/themes/light/main.css">

  <script>
    require([
      "esri/portal/Portal",
      "esri/identity/OAuthInfo",
      "esri/identity/IdentityManager"
    ], function (
      Portal, OAuthInfo, identityManager) {
      // ArcGIS Online or your portal address
      var portalUrl = "https://www.arcgis.com/sharing";

      // subsitute your own client ID to identify who spawned the login and check for a matching redirect URI
      var info = new OAuthInfo({
        appId: "blahblahblah", //*** Your Client ID value goes here ***//
        popup: false // inline redirects don't require any additional app configuration
      });

      identityManager.registerOAuthInfos([info]);

      // send users to arcgis.com to login
      document.getElementById("sign-in").onclick = function () {
        identityManager.getCredential(portalUrl);
      };

      // log out and reload
      document.getElementById("sign-out").onclick = function () {
        identityManager.destroyCredentials();
        window.location.reload();
      };

      identityManager.checkSignInStatus(portalUrl).then(function () {
        document.getElementById('anonymousPanel').style.display = 'none';
        document.getElementById('personalizedPanel').style.display = 'block';
        displayMap();
      });

//   }); this is the original closure

      function displayMap() {
        var portal = new Portal();

        // Once the portal has loaded, the user is signed in
        portal.load().then(function () {
          console.log('logged in');
          var map = L.map('map').setView([-122.479, 37.837], 10);

          L.esri.basemapLayer('Gray').addTo(map);

          L.esri.featureLayer({
            url: 'https://sampleserver6.arcgisonline.com/arcgis/rest/services/Earthquakes_Since1970/MapServer/0'
          }).addTo(map);
        });
      }

    }); //this is the new closure

  </script>
  <style>
    html,
    body,
    #viewDiv {
      font-family: Avenir Next W00;
      font-size: 14px;
      width: 100%;
      height: 100%;
      margin: 0px;
      padding: 0px;
    }

    .action {
      color: blue;
      cursor: pointer;
      text-decoration: underline;
    }

    #map {
      position: absolute;
      top: 0;
      bottom: 0;
      right: 0;
      left: 0;
    }
  </style>
</head>

<body>
  <div id="anonymousPanel" style="display: block; padding: 5px; text-align: center;">
    <span id="sign-in" class="action">Sign In</span> to access SCMSN Stewardship Layers.
  </div>

  <div id="personalizedPanel" style="display: none; padding: 5px; text-align: center;">
    Welcome <span id="userId" style="font-weight: bold;"></span>  -
    <span id="sign-out" class="action">Sign Out</span>
  </div>
  <!-- for the map -->
  <div id="viewDiv" style="display: none;"></div>
</body>

</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

View solution in original post

KenBuja · ‎07-22-2020

You closed off the require function at line 53, which means the displayMap function fell outside of it. You have to move that closure to line 70

<!DOCTYPE HTML>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
  <title>blahblahblah</title>
  <!-- Load Leaflet from CDN -->
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin="" />
  <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js" integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==" crossorigin=""></script>

  <!-- Load Esri Leaflet from CDN -->
  <script src="https://unpkg.com/esri-leaflet@2.4.1/dist/esri-leaflet.js" integrity="sha512-xY2smLIHKirD03vHKDJ2u4pqeHA7OQZZ27EjtqmuhDguxiUvdsOuXMwkg16PQrm9cgTmXtoxA6kwr8KBy3cdcw==" crossorigin=""></script>
  <script src="https://js.arcgis.com/4.15/"></script>
  <link rel="stylesheet" href="https://js.arcgis.com/4.15/esri/themes/light/main.css">

  <script>
    require([
      "esri/portal/Portal",
      "esri/identity/OAuthInfo",
      "esri/identity/IdentityManager"
    ], function (
      Portal, OAuthInfo, identityManager) {
      // ArcGIS Online or your portal address
      var portalUrl = "https://www.arcgis.com/sharing";

      // subsitute your own client ID to identify who spawned the login and check for a matching redirect URI
      var info = new OAuthInfo({
        appId: "blahblahblah", //*** Your Client ID value goes here ***//
        popup: false // inline redirects don't require any additional app configuration
      });

      identityManager.registerOAuthInfos([info]);

      // send users to arcgis.com to login
      document.getElementById("sign-in").onclick = function () {
        identityManager.getCredential(portalUrl);
      };

      // log out and reload
      document.getElementById("sign-out").onclick = function () {
        identityManager.destroyCredentials();
        window.location.reload();
      };

      identityManager.checkSignInStatus(portalUrl).then(function () {
        document.getElementById('anonymousPanel').style.display = 'none';
        document.getElementById('personalizedPanel').style.display = 'block';
        displayMap();
      });

//   }); this is the original closure

      function displayMap() {
        var portal = new Portal();

        // Once the portal has loaded, the user is signed in
        portal.load().then(function () {
          console.log('logged in');
          var map = L.map('map').setView([-122.479, 37.837], 10);

          L.esri.basemapLayer('Gray').addTo(map);

          L.esri.featureLayer({
            url: 'https://sampleserver6.arcgisonline.com/arcgis/rest/services/Earthquakes_Since1970/MapServer/0'
          }).addTo(map);
        });
      }

    }); //this is the new closure

  </script>
  <style>
    html,
    body,
    #viewDiv {
      font-family: Avenir Next W00;
      font-size: 14px;
      width: 100%;
      height: 100%;
      margin: 0px;
      padding: 0px;
    }

    .action {
      color: blue;
      cursor: pointer;
      text-decoration: underline;
    }

    #map {
      position: absolute;
      top: 0;
      bottom: 0;
      right: 0;
      left: 0;
    }
  </style>
</head>

<body>
  <div id="anonymousPanel" style="display: block; padding: 5px; text-align: center;">
    <span id="sign-in" class="action">Sign In</span> to access SCMSN Stewardship Layers.
  </div>

  <div id="personalizedPanel" style="display: none; padding: 5px; text-align: center;">
    Welcome <span id="userId" style="font-weight: bold;"></span>  -
    <span id="sign-out" class="action">Sign Out</span>
  </div>
  <!-- for the map -->
  <div id="viewDiv" style="display: none;"></div>
</body>

</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

CarolineGlazer2 · ‎07-22-2020

Thank you!