Display a scene

Learn how to create and display a with a and .

A contains of geographic data that are displayed in 3D. Scenes allow you to display real-world visualizations of landscapes, objects, buildings, and other 3D objects.

In this tutorial, you will create and display a scene of the Santa Monica Mountains in California using the topographic and the world . The scene and code will be used as the starting point for other 3D tutorials.

Prerequisites

Steps

Create a new pen

  1. Go to CodePen to create a new pen for your mapping application.

Add basic HTML

Define a basic HTML page.

  1. In CodePen > HTML, add HTML to create a basic page.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
      <title>ArcGIS Maps SDK for JavaScript Tutorials: Display a scene</title>
    
    </head>
    
    <body>
    
    </body>
    
    </html>

Add CSS

  1. In CodePen > HTML, add CSS to set the map to use the full width and height of the browser.
    Expand
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
      <style>
        html,
        body {
          padding: 0;
          margin: 0;
          height: 100%;
          width: 100%;
        }
      </style>
    
    Expand

Get an access token

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

  1. Go to the Create an API key tutorial and create an with the following :
    • Privileges
      • Location services > Basemaps
  2. In CodePen, set esriConfig.apiKey to your access token.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    
    <!-- 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.

Add references

  1. In the <head> tag, add references to the ArcGIS core library, its CSS stylesheet, and the @arcgis/map-components package.
    Expand
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
        <!-- Load Calcite components from CDN -->
        <link rel="stylesheet" type="text/css" href="https://js.arcgis.com/calcite-components/2.13.2/calcite.css" />
        <script type="module" src="https://js.arcgis.com/calcite-components/2.13.2/calcite.esm.js"></script>
    
        <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
        <link rel="stylesheet" href="https://js.arcgis.com/4.31/esri/themes/light/main.css" />
        <script src="https://js.arcgis.com/4.31/"></script>
    
        <!-- Load Map components from CDN-->
        <script
          type="module"
          src="https://js.arcgis.com/map-components/4.31/arcgis-map-components.esm.js"
        ></script>
    
    Expand

Create a scene

Use the Scene component to set the , surface, and camera attributes. use the information in the elevation layer to determine the ground (surface) height that will be rendered on the map.

The position, specified by camera-position attribute is the point from which the visible extent of the scene is determined. The camera-tilt attribute refers to the number of degrees from the surface that the camera is pointed.

  1. In the <body> tag, add the <arcgis-scene> component and specify the basemap, ground, camera-position and camera-tilt attributes.
    Expand
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    <body>
    
      <arcgis-scene basemap="arcgis/topographic" ground="world-elevation"
        camera-position="-118.808, 33.961, 2000" camera-tilt="75">
    
      </arcgis-scene>
    
    </body>
    

Add navigation toggle and zoom components

  1. Inside the <arcgis-scene> component, add the <arcgis-zoom> and <arcgis-navigation-toggle> components and specify their position.
Expand
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
  <arcgis-scene basemap="arcgis/topographic" ground="world-elevation"
    camera-position="-118.808, 33.961, 2000" camera-tilt="75">

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

  </arcgis-scene>

Run the app

In CodePen, run your code to display the map.

The scene view should display the topographic and for 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:

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.

The developer dashboard has moved

You can no longer sign into this site. Go to your ArcGIS portal or the ArcGIS Location Platform dashboard to perform management tasks.

Your ArcGIS portal

Create, manage, and access API keys and OAuth 2.0 developer credentials, hosted layers, and data services.

Your ArcGIS Location Platform dashboard

Manage billing, monitor service usage, and access additional resources.

Learn more about these changes in the What's new in Esri Developers June 2024 blog post.

Close