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 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. 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 from ArcGIS Online.

Before you begin

You must have previously installed ArcGIS AppStudio.

Open the starter app project

If you completed the Create a starter app tutorial, start ArcGIS AppStudio and then open your starter app project. Otherwise, complete the tutorial now and open the project.

Steps

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 a web map

1. Run ArcGIS AppStudio. Click your Starter app project in the App Gallery, and then click Edit. This will open your project in Qt Creator.

2. In the Qt Creator Projects window, double-click MyApp.qml to open it in the editor. In the App declaration, add the following properties to specify the portal URL and layer item ID.

   Use dark colors for code blocksCopy

   1
   2
   3
   4
   5
       property real scaleFactor: AppFramework.displayScaleFactor
   
       // *** ADD ***
       property string portalUrl: "https://arcgis.com/sharing/rest/content/items/";
       property string itemID: "41281c51f9de45edaf1c8ed44bb10e30"

3. In the code editor, scroll down to the Map declaration. Update the declaration to load a web map using its the portal URL and the item ID. Remove the remainder of the code.

   Web maps are pre-configured with a default extent. The code below overrides those default settings with the same viewpoint used in the rest of the tutorials.

   Use dark colors for code blocksCopy

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
        Map {
            id:map
   
            // *** UPDATE ***
            initUrl: portalUrl + itemID
   
            //BasemapTopographicVector {}
            //initialViewpoint: ViewpointCenter {
            //  id:initialViewpoint
            //  center: Point {
            //    x: -118.80543                                        // Longitude
            //    y: 34.02700                                          // Latitude
            //    spatialReference: SpatialReference { wkid: 4326 }    // WGS84
            //  }
            //  targetScale: 100000
            //}
        }

4. In the lower left Sidebar, click Run or press Control-R/Command-R to run the app.

   Run the app from within ArcGIS AppStudio by clicking the app in the App Gallery and then clicking the Run icon from the tool pallette.

   In Qt Creator, there are several ways to run the project:

   • Press Control-R/Command-R on the keyboard.
   • In the app menu, click Build > Run.
   • Click the Run button from the tool palette.

Congratulations, you're done!

Your map should contain trails and parks in the Santa Monica mountains. Compare your map with our completed solution project.