Display a web map | ArcGIS for Developers

ArcGIS Tutorials JavaScript Maps & Layers

Overview

You will learn: how to load and display a pre-configured web map from ArcGIS Online.

Applications can load and display 2D web maps that have been previously created with the Map Viewer or ArcGIS 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 as items in ArcGIS Online or ArcGIS Enterprise portals. 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 in ArcGIS Online.

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

Steps

Create a starter app

Open the JavaScript Starter App on CodePen.

To learn how to build this app, visit the Create a starter app tutorial.
In CodePen, click Fork and save the pen as ArcGIS JavaScript Tutorials: Display a web map.

Preview the web map

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.

To learn how to create, style and configure maps, visit the Create a web map, Style feature layers and Configure pop-ups tutorials.

Display the web map in an app

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

The ArcGIS API for JavaScript uses AMD modules. The require function is used to load modules so they can be used in the main function. It's important to keep the module references and function parameters in the same order.
```
    require([
      //*** ADD ***//
      "esri/WebMap",
      "esri/views/MapView"
    ], function(WebMap, MapView) {
```
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.

Notice that the web map portal item id can be used to create a new web map. The web map is passed to the view which is responsible for drawing the map and layers to the screen.
```
      //*** ADD ***//
      var map = new WebMap({
        portalItem: {
          id: "41281c51f9de45edaf1c8ed44bb10e30"
        }
      });

      //*** ADD ***//
      var view = new MapView({
        container: "viewDiv",
        map: map
      });
```
Run your code to view the web map. Be sure to click on the layers and zoom around!

Notice that all of the layers are styled and that the pop-up is automatically configured as it was saved using the Map Viewer. To learn how to create and style a web map, see the Create a web map, Style feature layers and Configure pop-ups tutorials.

Congratulations, you're done!

Your map app should look something like this.

Challenge

Add a legend and scalebar

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/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

ArcGIS Online contains thousands of public web maps that can be loaded by applications. Go to ArcGIS Online and search for web maps around Los Angeles. Feel free to search for any topic of interest. When you find a web map you like, open it in the Map 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 web map in your app.