Workflow: Create an app using a web map with layers (on-demand)

In this workflow, you will learn how to prepare a feature service and a web map, integrate the service into your web map, enable the map for offline use, and then use it to create a partially offline app. Later on, your app will request for an area within the map to download. This is also known as the on-demand method because you are defining which areas in the map to take offline on demand.

Prerequisites

Steps

1. Prepare the map and data

Import data to create a feature service

For this workflow, you will use the Santa Monica Parcels dataset to create a hosted feature layer for your web map.

1. In your web browser, go to the Santa Monica Parcels item.

2. Click the Download button to download the zip file locally. Do not unzip this file.

3. Import the shapefile into ArcGIS using either a data management tool or a scripting API.

   ArcGIS OnlineArcGIS EnterpriseArcGIS Pro

   In your web browser, go to ArcGIS.com and sign in with your ArcGIS Online account.

   1. In the top navigation bar, click Content.

   2. Click New item. To upload the Santa Monica Parcels shapefile, you can either:

      • Drag and drop the file.
      • Or, click Your device and navigate to the file path.

   3. Select Add Santa Monica Parcels.zip to publish the file as a hosted feature layer.

   4. In Fields, leave all fields at their default settings and click Next.

   5. In Location settings, leave the default settings and click Next.

   6. Set the following information in the item details pane:

      • Title: Santa Monica Parcels
      • Tags: Santa Monica Parcels.
      • Summary: Parcels in the Santa Monica Mountains.

   7. Click Next to create the new feature layer and feature service.

   1. Import the required libraries.
   2. Provide an access token.
   3. Create and publish a portal item.
   4. Handle the results.
   ArcGIS API for PythonArcGIS REST JS

   Expand

   Use dark colors for code blocksCopy

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22
   23
   24
   25
   26
   # local path to shapefile zip file
   input_file_path = str(
       Path(__file__).parent / "Santa_Monica_Public_Parcels.zip"
   )
   
   # add the zip file as an item to portal
   shp_item = portal.content.add(
       {
           "title": "Santa Monica Public Parcels",
           "description": "Santa Monica public parcels",
           "tags": "Santa, Monica, public, parcels",
           "type": "Shapefile",
       },
       input_file_path,
   )
   
   # publish the item to create a hosted featurelayer
   shp_service = shp_item.publish(None)
   
   print(f"New item id : {shp_service.id, }, url: {shp_service.layers[0].url}")

   Go to API reference

The feature layer will look something like this:

Set the feature styles

1. Style the parcels based on the usetype field.

   ArcGIS Location PlatformArcGIS OnlineArcGIS EnterpriseArcGIS Pro

   Use the Visualization tab in the item page in ArcGIS.com to style the Santa Monica parcels layer.

   1. Go back to the item page > Visualization.

   2. In the left panel, click the Layers and select the Santa Monica parcels layer. In the right panel, click Styles.

   3. Click + Field, and add usetype.

   4. Under Pick a style, click Style options, update Types (unique symbols)

   5. Click on the symbol next to each of the use type values to update the symbol color.

   6. Set each of the usetype values to the following properties:

      • Fill Color:
        • Residential: #ffde3e
        • Commercial: #c29ed7
        • Industrial: #004c73
        • Government: #fc921f
        • Institutional: #149ece
        • Recreational: #267300
        • Miscellaneous: #b7814a
      

   7. Click the X to exit out of Symbol style.

   8. Click the pencil icon next to symbol style. Set the following properties for all the use types:

      • Fill transparency: 30%
      • Outline color: #ffffff
      • Outline transparency: 65%
      • Outline width: 1
      • Adjust width automatically: false
      

   9. Click the X to exit out of Symbol style. Then click Done twice.

   10. Click Save to save the style in the feature layer item.

The styled layer will look something like this:

Manage service settings

In your portal, use the Settings tab to configure the service edit settings.

1. In the item settings pane, scroll down to the Editing section.
2. Click the Enable editing check box.
3. Under the setting What kind of editing is allowed?, uncheck the Add and Delete privilege.
   • This will only allow editors to update existing features.
4. Under the Update privilege, click Attributes only.
   • In our case, we only want editors to manage the feature attributes. They will be unable to remove or create new features.
5. Click the Enable sync (required for offline use and collaboration) check box.
6. Click Save.

Your edit settings should look like this:

Create a web map with data layer

1. In the item page of your feature layer, go to the Overview tab in the top menu bar.

2. In the right panel, click Open in Map Viewer.

You should see a web map that looks something like this.

Save the web map

Now that you have a web map, you need to save it to your portal.

1. In the left panel, click Save > Save as. At minimum, you need to provide a title and tags for your web map.

By default, your web map sharing level is set to Owner. Later, you will need an access token that is scoped to access the web map item for use in your offline app.

Enable web map for offline use

1. In your web browser, find the item ID at the end of the URL for the web map you just saved.

   • For example: 8ab76e9c5352400d87ca3315db9ba08e

2. In a new browser tab, copy and paste the following URL and insert your item ID. This will return the item page for your web map, where you can configure it for offline use.

   • https://www.arcgis.com/home/item.html?id=<ITEM_ID>
   • For example: https://www.arcgis.com/home/item.html?id=8ab76e9c5352400d87ca3315db9ba08e

3. Click Settings on the top bar of the item page.

4. Scroll down to the Offline menu.

5. If you don't see the Offline enabled icon at the top right corner, click Check Compatibility and turn on Offline.

6. Optionally, you can also manage advanced offline settings for your web map by clicking Options. These settings allow you to choose what data or updates mobile devices get and use a tile package for your offline basemap.

   More info

   

   Under Features and attachments, you can configure download behaviors for both editable and read-only features. Adjusting how attachments and features are delivered can reduce the time it takes to synchronize edits, especially in areas of poor connectivity, as well as the amount of cellular data used.

   Under Basemap and tile package, you can choose which basemap you want to use on your map. If you choose to use a local tile package, you will provide the filename of the package on your device. If you choose to use a tile package from your organization, you will browse a tile package from your ArcGIS organization.

7. Click Save. Your web map is enabled for offline use now.

2. Build the app

Setup offline app

Get an access token

By default, the sharing level of an item is set to Owner and requires an access token, such as an API key to access it in a client-side application.

1. Generate an access token according to your ArcGIS account type.

   ArcGIS OnlineArcGIS Enterprise

   In your web browser, go to ArcGIS.com and sign in with your ArcGIS Online account.

   1. Click Content > My Content.
   2. Click the New Item > Developer credentials.
   3. In the Create developer credentials window, select API key credentials. Click Next.
   4. Set an expiration date for your API key. API keys can be valid for up to one year. Then, click Next.
   5. In the Privileges menu, check the following privileges:
      • Location services > Basemaps
   6. In the Grant item access menu, click Browse items.
   7. Select the web map and feature layer you just created. Then, click Next.
   8. Fill out the following properties:
      • Title: API key - Offline app with a web map
      • Tags: offline, offline map, web map, workflow
      • Summary: API key used to access Santa Monica Web Map in an offline app.
   9. Click Next.
   10. Review your selections and, when you are ready, click Next.
   11. Click Generate the API key and go to item details page. I am ready to copy and save the key.
   12. Click Next.
   13. Copy the API key and store it safely. You will not be able to view it again later. If you lose it, you will have to generate another key.

2. Paste the access token into your code.

   ArcGIS .NET SDKArcGIS Kotlin SDKArcGIS Swift SDKArcGIS Qt SDK

   App.xaml.cs

   Use dark colors for code blocks

   27 27 27 27 27 27 27 27 27 27 27 27 27 27 27 27 27 27 27 27 27 27 27 27 27 27 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41

   Change line

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22
   23
   24
   25
   26
   27
   28
   29
   30
   31
   32
   33
   34
   35
   36
   37
   38
   39
   40
   41
       public partial class App : Application
       {
   
           protected override void OnStartup(StartupEventArgs e)
           {
               base.OnStartup(e);
               // Note: it is not best practice to store API keys in source code.
               // The API key is referenced here for the convenience of this example.
   
               Esri.ArcGISRuntime.ArcGISRuntimeEnvironment.ApiKey = "YOUR_ACCESS_TOKEN";
   
           }
       }
   }

Download and display the offline map

Access the offline map

Synchronize the offline map