Display a web scene | ArcGIS Maps SDK for JavaScript

Learn how to load and display a web scene A web scene is a scene stored as a JSON object that defines properties such as the basemap layer, data layers, layer styles, and pop-up styles. Its JSON structure is defined by the web scene specification. Learn more .

A web scene A web scene is a scene stored as a JSON object that defines properties such as the basemap layer, data layers, layer styles, and pop-up styles. Its JSON structure is defined by the web scene specification. Learn more is a scene A scene is a collection of layers that are displayed in 3D. It is typically composed of a basemap layer, data layers, and 3D data. Learn more that is stored as an item An item, also known as a content item, is a resource stored in a portal such as a web map, hosted layer, style, script tool, file, or notebook. Learn more in ArcGIS Online ArcGIS Online is a GIS mapping, analytics, data hosting, and content management software as a service (SaaS) product. It includes applications, tools, APIs, and location services for users and developers. It is subscription-based and requires an ArcGIS Online account. Learn more . A web scene item contains all of the configuration settings for the scene (in JSON format) such as extent An extent is a bounding rectangle with points that delineate an area for a map or scene. Learn more , basemap A basemap layer is the layer in a map or scene that displays basemap data. The data source for a basemap layer is typically a basemap service. Learn more , data layers A data layer is a layer that references geographic data from a file or a service and is used to visualize the data in a map or scene. Learn more , and styles A style is the visual definition of how geographic data is displayed in a map including colors, backgrounds, outlines, labels, and other visual elements. Each style emphasizes a specific type of cartographic theme and data. Learn more . Applications can access and display the web scene using its item ID An item ID is a unique identifier representing a single item stored, managed, and accessed in a portal, such as a web map, hosted layer, or file. Learn more .

In this tutorial, you will access and display a pre-configured web scene A web scene is a scene stored as a JSON object that defines properties such as the basemap layer, data layers, layer styles, and pop-up styles. Its JSON structure is defined by the web scene specification. Learn more 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 An access token is an authorization string that provides access to secure ArcGIS content, data, and services. Its capabilities are determined by the privileges it supports. It is obtained by implementing API key authentication, User authentication, or App authentication. Learn more with the correct privileges to access the location services ArcGIS Location Services, also referred to as Location Services, are services hosted by Esri that provide geospatial functionality for developing mapping applications. They include the ArcGIS Basemap Styles service, ArcGIS Static Basemap Tiles service, ArcGIS Places service, ArcGIS Geocoding service, ArcGIS Routing service, ArcGIS GeoEnrichment service, and ArcGIS Elevation service. An ArcGIS Location Platform or ArcGIS Online account is required to use the services. Learn more used in this tutorial.

Go to the Create an API key tutorial and create an API key An API key is a long-lived access token created using API key credentials. They are valid for up to one year and are typically embedded directly into client applications. Learn more with the following privilege(s) Privileges are a set of permissions assigned to ArcGIS accounts, developer credentials, and applications that grant access to secure resources and functionality in ArcGIS. Learn more :
- 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 An item ID is a unique identifier representing a single item stored, managed, and accessed in a portal, such as a web map, hosted layer, or file. Learn more 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 A layer is a reference to a collection of geographic data that is used to access and display data. The data for layers are typically provided by the basemap layer service and data services. Learn more visible in the scene A scene is a collection of layers that are displayed in 3D. It is typically composed of a basemap layer, data layers, and 3D data. Learn more .

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