Overview

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

A web scene is a JSON structure that contains the settings required to display a 3D map. ArcGIS and custom applications can load web scenes and automatically configure the map extent, camera, basemap, layers and styles, labels and more. Web scenes can be created interactively with the Scene Viewer and ArcGIS Pro. Web scenes are stored in ArcGIS Online or ArcGIS Enterprise as an item with a unique ID.

In this tutorial, you will build an app that loads and displays a web scene.

Steps

Create a starter app

  1. Go to the JavaScript Starter App.

  2. In CodePen, click Fork and save the pen as ArcGIS 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 MapView module and add a reference to the WebScene and SceneView module.

        require([
          //*** ADD ***//
          "esri/WebScene",
          "esri/views/SceneView"
        ], function(WebScene, SceneView) {
    
  2. In the main function, remove the code to create a Map and replace it with code to create a new WebScene. Set the portalItem id to 579f97b2f3b94d4a8e48a5f140a6639b. Now replace MapView with SceneView and set the map property of the SceneView to the webscene to display the web scene. Remove the center and zoom code.

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