How to display a hosted feature layer within Javascript API?

MatthewMinick · ‎06-24-2022

Hi,

We are trying to integrate ArcGIS with our existing ASP.NET Blazor application.

For that, I have published a feature layer within ArcGIS Online and consuming it as a rest service within the Javascript API mapping application.

But the problem we are facing is, the layer is displayed on the map, whenever its sharing setting is set as "Public/Everyone", but the layer is not displayed on the map if I change the setting to "Organization".

Can somebody please help me figure out why this is happening?

KenBuja · ‎06-24-2022

If you haven't shared it publicly, then you have to use authentication to gain access to them. Here's an example

<html>
<head>
  <meta charset="utf-8" />
  <meta name="viewport"
        content="initial-scale=1,maximum-scale=1,user-scalable=no" />
  <title>
    Intro to FeatureLayer | Sample | ArcGIS API for JavaScript 4.24
  </title>

  <link rel="stylesheet"
        href="https://js.arcgis.com/4.24/esri/themes/light/main.css" />
  <script src="https://js.arcgis.com/4.24/"></script>

  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>

  <script>
    require(["esri/Map", "esri/views/MapView", "esri/layers/FeatureLayer", "esri/identity/OAuthInfo", "esri/identity/IdentityManager",], (
      Map,
      MapView,
      FeatureLayer,
      OAuthInfo,
      identityManager
    ) => {
      const portalUrl = 'your portal url';
      const info = new OAuthInfo({
        appId: "your appId", //*** 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
      identityManager.getCredential(portalUrl);
      identityManager.checkSignInStatus(portalUrl).then(function () {
        const map = new Map({
          basemap: "hybrid"
        });

        const view = new MapView({
          container: "viewDiv",
          map: map,
          extent: {
            // autocasts as new Extent()
            xmin: -160.27,
            ymin: 18.89,
            xmax: -154.79,
            ymax: 22.26,
            spatialReference: 4326
          }
        });
        const featureLayer = new FeatureLayer({
          url: "your url"
        });
        map.add(featureLayer);
      });
    });
  </script>
</head>

<body>
  <div id="viewDiv"></div>
</body>
</html>