5.1 Incorporating Web Maps and Web Scenes

Back in Lesson 1, you created a web map of the Jen & Barry’s scenario data in ArcGIS Online, then incorporated that web map into an app using Esri’s three app building options that require no coding: embedding within a website, using a configurable app template, and using the Web AppBuilder. It turns out that even if you are coding your app, it’s quite easy to incorporate web maps like the one from Lesson 1 into your app. In fact, while the API provides the ability to configure your app programmatically (adding layers, symbolizing them, configuring popups, etc.), even the best coder is likely to find it helpful to use the ArcGIS Online GUI to reduce their coding burden.

5.1.1 Load a Web Map Into a 2D App

In Lesson 1, we saw that it's possible to use the GUI-based tools in ArcGIS Online to author web maps that can then be easily incorporated into apps created using a configurable app template or the Web AppBuilder. It's also quite easy to do the same for apps developed using the JS API. Here's how:

Copy one of your apps from Lesson 4 and name it jen_and_barry_2d.
In the JS API SDK, browse to Sample Code > Mapping and Views > MapView (2D) > Load a basic web map > Explore in the sandbox.

This sample works by creating an object of the WebMap class and setting its portalItem property to a JS object defined simply as an id of a particular value. That WebMap is then used to set the map property of the MapView (in place of the plain Map object we saw in the previous lesson). Note the reference to “esri/WebMap” in the require() declaration.

Adapting this sample to your own liking is as simple as setting the portalItem’s id property to that of your own web map.
Copy the sample’s JS code into your own jen_and_barry_2d main.js file replacing your content with the sample's.
In ArcGIS Online, browse to your web map from Lesson 1 and open it in the map viewer.
In your browser’s address bar, you should see a URL ending in “webmap=” followed by a long alpha-numeric string. Copy that string to your clipboard. (Double-clicking somewhere on the string should select it.)
Paste the string into your main.js file, replacing the portalItem id value from the sample.
Test your app by opening it in a browser.

Two important points to keep in mind about consuming web maps:

The map can be stored in ArcGIS Online as we saw here, or in your own organization’s ArcGIS Portal instance.
You’ll want to make sure that the map has been shared with your intended audience; otherwise, it will not appear.

5.1.2 Load a Web Map Into a 3D App

We saw in the previous lesson that a Map can be associated with a MapView to produce a 2D app or with a SceneView to produce a 3D app. Likewise, a WebMap can be used as the basis for a 2D or 3D app.

Create a copy of your jen_and_barry_2d app and modify it so that your web map is displayed as a 3D app.

5.1.3 Load a Web Scene Into a 3D App

Thus far in the course, we’ve seen how to drape 2D data over a 3D globe, but we haven’t really taken advantage of the 3D environment yet. Web scenes are basically the 3D analog to web maps, in which the scene features have a Z component.

Web scenes can be either global, for situations where the earth’s spherical nature comes into play, or local, where it does not. Global scenes are displayed in the Web Mercator coordinate system, whereas local scenes can be displayed in a local, planar coordinate system.

This example showing earthquakes is an example of a global scene. And this detailed model of a building and its interior provides an example of a local scene.

As with web maps, web scenes are published and discoverable through ArcGIS Online or through local implementations of ArcGIS Portal. This search will provide a list of scenes owned by Esri’s 3D team, including models of many world cities.

Have a look at the Load a basic web scene sample in the SDK.

Note that the only difference from the jen_and_barry_3d app you created earlier is in the use of the WebScene class in place of the WebMap class.