Skip To Content ArcGIS for Developers Sign In Dashboard

Overview

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

A web map is a JSON structure that contains the settings required to display a 2D map. ArcGIS and custom applications can load web maps and automatically configure the map extent, basemap, layers and styles, pop-ups, labels and more. Web maps can be created interactively with the Map Viewer and ArcGIS Pro. Web maps are stored in ArcGIS Online or ArcGIS Enterprise as an item with a unique ID.

In this tutorial, you will build an app that loads and displays a web map.

Before you begin

Reuse the starter project

If you have not done the starter project tutorial, be sure to review it first so you are familiar with running the app.

In a new or empty folder, make a copy of the Create a starter app solution.

Steps

Update the project

  1. Open the settings.gradle file in an editor of your choice and change the rootProject.name value to display-a-web-map.

Add a web map to the map

  1. Open the App.java file in src/main/java/com/arcgis/developers/labs in an editor of your choice. Add a new private method showWebMap that creates a map object from a web map given its URL.

     private void showWebMap() {
       if (mapView != null) {
         try {
           String itemId = "41281c51f9de45edaf1c8ed44bb10e30";
           String url = "https://www.arcgis.com/sharing/rest/content/items/" + itemId + "/data";
           ArcGISMap map = new ArcGISMap(url);
           mapView.setMap(map);
         } catch (IllegalArgumentException e) {
           setupMap();
         }
       }
     }
    
  2. Look for these lines of code in the start method

    mapView.setMap(map);
    setupMap();
    

    and replace setupMap() with showWebMap().

    mapView.setMap(map);
    showWebMap();
    

Congratulations, you're done!

Your map should show parks and trails in the Los Angeles area.

Challenge

Use your web map

Instead of using the web map we prepared, use the web map you made in the design tutorial Create a Web Map (2D).

From Step 2 above, replace the itemId variable with the ID of your web map.

Change your map design

Open your web map in the map viewer, make changes to your map design, then save your map. Next time you load that map in your app your changes will be reflected.