Load a basic web scene

Explore in the sandboxView live

This sample demonstrates how to load a web scene from a Portal for ArcGIS item into a custom application. This scene illustrates the shadows cast by mountains surrounding Queenstown, Otago, New Zealand on the Winter Solstice (21, June 2014). Each line represents the edge of the shadows cast by surrounding mountains at particular times of the day.

Loading a web scene is easy. All that's required is the item ID of the WebScene item from the portal.

Create a new WebScene instance and set the portal item ID inside the portalItem property of the WebScene. Since WebScene extends esri/Map, you then set the web scene instance on the map property of the SceneView.

Load a basic webscene
                                                                                   
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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <title>Load a basic web scene | Sample | ArcGIS API for JavaScript 4.21</title>

    <link rel="stylesheet" href="https://js.arcgis.com/4.21/esri/themes/light/main.css" />
    <script src="https://js.arcgis.com/4.21/"></script>

    <script>
      require(["esri/views/SceneView", "esri/WebScene"], (SceneView, WebScene) => {
        const titleDiv = document.getElementById("titleDiv");
        /************************************************************
         * Creates a new WebScene instance. A WebScene must reference
         * a PortalItem ID that represents a WebScene saved to
         * arcgis.com or an on-premise portal.
         *
         * To load a WebScene from an on-premise portal, set the portal
         * url with esriConfig.portalUrl.
         ************************************************************/
        const scene = new WebScene({
          portalItem: {
            // autocasts as new PortalItem()
            id: "3a9976baef9240ab8645ee25c7e9c096"
          }
        });

        /************************************************************
         * Set the WebScene instance to the map property in a SceneView.
         ************************************************************/
        const view = new SceneView({
          map: scene,
          container: "viewDiv",
          padding: {
            top: 40
          }
        });
        view.when(function() {
          // when the scene and view resolve, display the scene's
          // title in the DOM
          const title = scene.portalItem.title;
    </script>

    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      #titleDiv {
        background-color: lightgray;
        color: black;
        padding: 5px;
        position: absolute;
        z-index: 2;
        top: 0;
        right: 0;
        font-size: 20pt;
        font-weight: bolder;
        width: 100%;
        height: 30px;
        text-align: center;
        opacity: 0.75;
    </style>
  </head>

  <body>
    <div id="viewDiv" class="esri-widget"><div id="titleDiv"></div></div>
  </body>
</html>

To reference an item from an on-premise portal, set the URL of the portal in esriConfig.portalUrl.

Please refer to the ArcGIS Organization portals for information on how the ArcGIS API for JavaScript makes use of working with portal items.

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