5.1.1 Load a Web Map Into a 2D App

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:

1. Copy one of your apps from Lesson 4 and name it jen_and_barry_2d.
2. 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.
3. Copy the sample’s JS code into your own jen_and_barry_2d main.js file replacing your content with the sample's.
4. In ArcGIS Online, browse to your web map from Lesson 1 and open it in the map viewer.
5. 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.)
6. Paste the string into your main.js file, replacing the portalItem id value from the sample.
7. 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.