Display a web scene

Overview

You will learn: how to build an app to load and display a 3D web scene from ArcGIS Online.

Applications can load and display 3Dweb scenesthat have been previously created with theScene ViewerorArcGIS Pro. Web scenes contain all of the settings required to set up the scene such as the extent, basemap, layers and styles, and labels. Web scenes are stored as items onArcGIS OnlineorArcGIS Enterpriseportals. Web scenes are loaded by accessing a portal and requesting an item by id. All of the settings are applied to the scene and layers when the item is loaded, saving you time from having to set them up yourself. Learn more about working with web scenes in the Create a web scene tutorial or by using ArcGIS Pro.

In this tutorial, you will build an app that loads and displays a pre-configured web scene stored inArcGIS Online.

Explore the web scene layer styles and pop-ups in the scene below.

Steps

Create a starter app

1. Open the JavaScript Starter App on CodePen.

2. In CodePen, click Fork and save the pen as ArcGIS JavaScript Tutorials: Display a web scene.

Preview the web scene

1. Go to the LA Trails and Parks Scene to view the scene in the Scene Viewer. Make note of the ID at the end of the URL.

Display the web scene in your app

1. In the require statement, remove the Map and add a reference to the WebScene module.

       require([
         "esri/WebScene",
         "esri/views/SceneView"
       ], function(WebScene, SceneView) {
   

2. At the beginning of the code in the main function, remove the code to create a Map and SceneView and replace it with code to create a new WebScene and a new SceneView. Set the portalItem ID to 579f97b2f3b94d4a8e48a5f140a6639b. Update the code in the SceneView to set the webscene to the map property and comment the code to change the camera position. The web scene provides the positioning information.

         //*** ADD ***//
         var webscene = new WebScene({
           portalItem: {
             id: "579f97b2f3b94d4a8e48a5f140a6639b"
           }
         });
   
   
         var view = new SceneView({
           container: "viewDiv",
           //*** UPDATE ***//
           map: webscene
           //camera: {
           //  position: {
           //    x: -118.808,
           //    y: 33.961,
           //    z: 2000 // meters
           //  },
           //  tilt: 75
           //}
         });
   

3. Run your code to view the web scene. Be sure to click on the layers and zoom around!

Congratulations, you're done!

Your app should look something like this.

Challenge

Add a legend

    require([
      "esri/WebScene",
      "esri/views/SceneView",
      //*** ADD ***//
      "esri/widgets/Legend"
    ], function(WebScene, SceneView, Legend) {

      ...

      //*** ADD ***//
      var legend = new Legend({
        view: view
      });
      view.ui.add(legend, "top-right");

Explore other web scenes