Overview

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

The fastest way to create a fully styled 3D mapping application is to load a web scene. Web scenes are special because the format is interchangeable between a number of applications running on the ArcGIS platform. Web scenes are generally created interactively with the Scene Viewer and saved in ArcGIS Online. Complex scenes can also be created with ArcGIS Pro. When you save a web scene it stores a number of settings such as the basemap, extent, layers and styles, and label configurations. When a web scene is loaded by an application, the settings are used to set up and configure the map, saving you from having to set them up yourself. Web scenes can also be updated independently from your apps, making it handy if you want to update the map and layers but don't want to make changes to the application code itself.

In this lab, you will use the ArcGIS API for JavaScript to build a mapping app that loads and displays a web scene of trails and parks in the LA area.

Steps

Create a starter app

  1. Go to the JavaScript Starter App.

  2. In CodePen, click Fork and save the pen as ArcGIS DevLabs: 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",
        "dojo/domReady!"
        //** ADD ***//
      ], function(WebScene, SceneView) {
    
  2. In the 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 and ScaleBar widget. Create a Legend widget and then add it to the top-right position of the view DefaultUI. Now try adding a ScaleBar to the bottom-left corner. 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",
      "esri/widgets/ScaleBar",
      "dojo/domReady!"
      //*** ADD ***//
    ], function(WebScene, SceneView, Legend, ScaleBar) {

    ...

    //*** ADD ***//

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

    var scalebar = new ScaleBar({
      view: view
    });
    view.ui.add(scalebar, "bottom-left");

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.