Display a web scene | ArcGIS Maps SDK for JavaScript

Learn how to load and display a web scene .

A web scene is a scene that is stored as an item in ArcGIS Online . A web scene item contains all of the configuration settings for the scene (in JSON format) such as extent , basemap , data layers , and styles . Applications can access and display the web scene using its item ID .

In this tutorial, you will access and display a pre-configured web scene stored in ArcGIS Online.

Prerequisites

Steps

Create a new pen

To get started, either complete the Display a scene tutorial or .

Get an access token

You need an access token with the correct privileges to access the location services used in this tutorial.

Go to the Create an API key tutorial and create an API key with the following privilege(s) :
- Privileges
  - Location services > Basemaps

In CodePen, set the apiKey property on the global esriConfig variable to your access token.

<!-- The esriConfig variable must be defined before adding the other esri libraries -->
<script>

  var esriConfig = {
    apiKey: "YOUR_ACCESS_TOKEN",
  };

</script>

To learn about other ways to get an access token, go to Types of authentication.

Load the web scene

You can use the portal item ID to create a WebScene.

Replace the existing <arcgis-scene> component with one that loads a web scene from an item ID.

22 collapsed lines
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <title>ArcGIS Maps SDK for JavaScript Tutorials: Display a web scene</title>
  <style>
    html,
    body {
      height: 100%;
      margin: 0;
    }
  </style>
  <script>
    var esriConfig = {
      apiKey: "YOUR_ACCESS_TOKEN"
    };
  </script>
  <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
  <script type="module" src="https://js.arcgis.com/5.0/"></script>
</head>


<body>

  <arcgis-scene basemap="arcgis/topographic" ground="world-elevation" camera-position="-118.808, 33.961, 2000"
    camera-tilt="75">



    <arcgis-scene item-id="579f97b2f3b94d4a8e48a5f140a6639b">

    </arcgis-scene>
</body>
3 collapsed lines


</html>

Add a Legend

Use the Legend component to add more context to the application. The Legend displays labels and symbols for layers visible in the scene .

Add the <arcgis-legend> component under the <arcgis-scene> component. The slot attribute indicates where the legend will appear in the scene.

22 collapsed lines
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <title>ArcGIS Maps SDK for JavaScript Tutorials: Display a web scene</title>
  <style>
    html,
    body {
      height: 100%;
      margin: 0;
    }
  </style>
  <script>
    var esriConfig = {
      apiKey: "YOUR_ACCESS_TOKEN"
    };
  </script>
  <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
  <script type="module" src="https://js.arcgis.com/5.0/"></script>
</head>


<body>



    <arcgis-scene item-id="579f97b2f3b94d4a8e48a5f140a6639b">

      <arcgis-zoom slot="top-left"></arcgis-zoom>
      <arcgis-navigation-toggle slot="top-left"></arcgis-navigation-toggle>

      <arcgis-legend slot="top-right" legend-style="classic"></arcgis-legend>

    </arcgis-scene>
</body>
3 collapsed lines


</html>

Run the app

In CodePen, run your code to display the map.

The loaded web scene should display an area of the Santa Monica Mountains in California.

What’s next?

Learn how to use additional SDK features and ArcGIS services in these tutorials:

Create a web scene