Display a web scene

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 esriConfig.apiKey to your access token.

Use dark colors for code blocks

<!-- 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.

Expand
Use dark colors for code blocks
  <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>
Expand

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 position property indicates where the legend will appear on the screen.

Expand
Use dark colors for code blocks
  <body>

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

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

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

    </arcgis-scene>
  </body>
Expand

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 API features and ArcGIS services in these tutorials:

Create a web scene