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.

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 AppStudio for ArcGIS.

Open the starter app project

If you completed the Create a starter app tutorial, start 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 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.

        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.

         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.

Congratulations, you're done!

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

Challenge

Load other web maps

Use the search tools in ArcGIS Online to locate other web maps. Replace the web map ID in your code to load them in your app. Learn to display your own web map with the Create a web map tutorial.

Change and reload the web map

Alter the content of your web map: change the basemap, change the layers, change the feature symbols. Note how you can reload the web map in your app and display the updated map without making any changes to your code.

Change the displayed web map at run time

After you've collected a set of item IDs for web maps that you like, try adding a QML combo box like the one from the Display a styled vector basemap tutorial to give the user control over which web map is displayed.