Display a web map

Overview

You will learn: how to build an app to load and display a web map from ArcGIS Online.

Applications can load and display 2Dweb mapsthat have been previously created with theMap ViewerorArcGIS Pro. Web maps contain all of the settings required to set up the map such as the extent, basemap, layers and styles, pop-ups, and labels. Web maps are stored asitemsinArcGIS OnlineorArcGIS Enterpriseportals. Web maps are loaded by accessing a portal and requesting an item by id. All of the settings are applied to the map and layers when the item is loaded, saving you time from having to set them up yourself. Learn more about working with web maps in the Create a web map tutorial or by using ArcGIS Pro.

In this tutorial, you will build an app that loads and displays a pre-configured web map stored inArcGIS Online.

Explore the web map layer styles and pop-ups in the map below.

Steps

Create a starter app

1. Open the JavaScript Starter App on CodePen.

2. In CodePen, click Fork and save the pen as ArcGIS JavaScript Tutorials: Display a web map.

Preview the web map

1. Go to the LA Trails and Parks Map to view the map in the Map Viewer. Make note of the ID at the end of the URL.

Display the web map in an app

1. In the require statement, remove the Map module and add a reference to the WebMap module.

       require([
         "esri/WebMap",
         "esri/views/MapView"
       ], function(WebMap, MapView) {
   

2. At the beginning of the code in the main function, remove the code to create a Map and MapView and replace it with code to create a new WebMap and a new MapView. Set the portalItem ID to 41281c51f9de45edaf1c8ed44bb10e30. Update the code in the MapView to set the webmap to the map property and comment the code to center and zoom the map. The web map provides the positioning information.

         //*** ADD ***//
         var webmap = new WebMap({
           portalItem: {
             id: "41281c51f9de45edaf1c8ed44bb10e30"
           }
         });
   
         var view = new MapView({
           container: "viewDiv",
           //*** UPDATE ***//
           map: webmap
           //center: [-118.80500,34.02700],
           //zoom: 13
         });
   

3. Run your code to view the web map. 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 and scalebar

    require([
      "esri/WebMap",
      "esri/views/MapView",
      //*** ADD ***//
      "esri/widgets/Legend",
      "esri/widgets/ScaleBar"
    ], function(WebMap, MapView, 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 maps