Overview

You will learn: how to load and display a pre-configured web scene from ArcGIS Online.

Applications can load and display 3D web scenes that have been previously created with the Scene Viewer or ArcGIS 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 on ArcGIS Online or ArcGIS Enterprise portals. 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 in ArcGIS 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([
          //*** 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.