ReferenceError: Portal is not defined

776
2
Jump to solution
07-22-2020 10:07 AM
CarolineGlazer2
New Contributor

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>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
0 Kudos
1 Solution

Accepted Solutions
KenBuja
MVP Honored Contributor

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

2 Replies
KenBuja
MVP Honored Contributor

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
New Contributor

Thank you! 

0 Kudos