Exercise 6 - Create a WebMap App
You'll notice that the map page is currently empty! We'll be building the entire script portion of the page from scratch this time.
Exercise:
You can use the ArcGIS API for JavaScript to easily load web maps built with the Map Viewer. The advantage of using this approach is that the map will contain all of he predefined settings you configured in the Map Viewer (Layer Styles, Popups, Refresh Rate, etc).
In this lab, you will use the ArcGIS API for JavaScript to load a WebMap by its portal ID in a custom JavaScript app.
1. Explore the
WebMap Class
2. Between the script tags, add the require statement and function definition
require([
"esri/views/MapView",
"esri/WebMap"
], function(MapView, WebMap) {
});
3. Open a WebMap into the MapView using the WebMapID. Note that the code is really similar to the starter map, but in place of a Map we're using a WebMap. To use the saved initial view of the WebMap, remove the center and zoom atttributes from the MapView options.
Note: Use a publically shared Web Map for this exercise. If you need an example, you can use this one! or anything shared on here.
var map = new WebMap({
portalItem: { // autocasts as new PortalItem
id: "<insert portal item ID>",
}
});
var view = new MapView({
container: "viewDiv",
map: map
});
If you're stuck, ensure that your code looks like the solution in the picture below: