A RetroSearch Logo

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Search Query:

Showing content from https://developers.arcgis.com/javascript/latest/tutorials/display-a-web-scene/ below:

Display a web scene | Overview | ArcGIS Maps SDK for JavaScript 4.33

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.

Note

To learn more about data hosting, visit Data hosting in the Mapping and location services guide. To learn more about services, visit Feature service.

Prerequisites ArcGIS Accounts:

You need an ArcGIS Location Platform or ArcGIS Online account.

Steps Create a new pen
  1. 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.

  1. Go to the Create an API key tutorial and create an API key with the following privilege(s):
  2. In CodePen, set esriConfig.apiKey to your access token.

    Use dark colors for code blocks

    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.

Load the web scene

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

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

    Expand

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

  1. 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
    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
    53
      <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>
    
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:


RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4