Overview

You will learn: how to load and display a pre-configured 3D web scene.

Applications can load and display 3D web scenes that have been previously created with the Scene Viewer and ArcGIS Pro. Web scenes contain all of the settings required to create a scene and are stored as items on ArcGIS Online or ArcGIS Enterprise. ArcGIS Online or ArcGIS Enterprise are portals with services and interactive tools that you can use to configure web scene settings such as the extent, basemap, layers and styles, and labels.

You can load a web scene by accessing a portal and requesting an item by id. All of the web scene settings (extent, layer styles, labels...) will be applied when the item is loaded, saving you time from having to set these 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 in ArcGIS Online.

Steps

Create a starter app

  1. Go to the JavaScript Starter App.

  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([
          //*** ADD ***//
          "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. Set the webscene to the map.

          //*** ADD ***//
          var webscene = new WebScene({
            portalItem: {
              id: "579f97b2f3b94d4a8e48a5f140a6639b"
            }
          });
    
          //*** ADD ***//
          var view = new SceneView({
            container: "viewDiv",
            map: webscene
          });
    
  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

To make your mapping app more meaningful, try adding a Legend widget to the top-right area of the view DefaultUI. Visit the documentation to learn more about widgets and how to position them in the view.

    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

ArcGIS Online contains thousands of public web maps and scenes that can be loaded by applications. Go to ArcGIS Online and search for web scenes around Los Angeles. Feel free to search for any topic of interest. When you find a scene you like, open it in the Scene Viewer and copy the id (HINT: Look at the end of the URL) and paste it into this application. Run the application to view the scene in your app.

Content