Use ArcGIS AppStudio to build a map tour

The City of Palm Springs, California, has asked you to create a mobile app to serve as a guided tour for visitors. The app will display popular locations on a map and sort them by their distance from the user. It must run on iOS and Android devices and work with or without internet connectivity.

The City has provided a Palm Springs map tour that contains information about popular locations, plus a mobile map package with all the data you need. You'll use the ArcGIS AppStudio Map Tour template to convert this tour into a cross-platform mobile app.

The Map Tour template is ideal when you want to present a linear, place-based narrative featuring images, audio, or videos. Each story point in the narrative is geolocated. Users can click sequentially through the narrative, browse by interacting with the map, or use an optional thumbnail carousel.

Note:

The Map Tour template is based on the Classic Story Three Panel template. It's recommended that you have already created a story before creating a mobile app. Try the Learn ArcGIS lesson Get Started with Story Maps to learn how to create a Story Map Tour.

Create an app

First, you'll download and install ArcGIS AppStudio. Then, you'll create an app using the Map Tour template.

  1. Open ArcGIS AppStudio.
    Note:

    If you don't have ArcGIS AppStudio, you can download it for free from the ArcGIS AppStudio documentation page. Run the downloaded file to open the installation wizard. Follow the wizard's instructions to install the program.

  2. Click Sign In and choose Sign In.

    Sign In option

  3. Sign in using your licensed ArcGIS account.
    Note:

    If you don't have an ArcGIS organizational account, you can sign up for an ArcGIS free trial. If your ArcGIS account is not licensed for ArcGIS AppStudio, contact your organization's administrator about licensing your account.

  4. Click New App.

    New App button

    The New App window appears. It lists several app templates and styles.

  5. Click the Templates tab and choose the Map Tour template.

    Map Tour template

    A summary and description appear for the selected template.

  6. Click Create.

    A new app is created using the Map Tour template and listed with your other apps. If this is your first time using ArcGIS AppStudio, it will be your only app. A side pane provides more information about the app, including its name.

  7. In the list of apps, confirm that your new app is selected. In the side pane, click the Edit Title button.

    Edit Title button

  8. Change the title to Palm Springs Map Tour and click the Save Changes button.

    Save Changes button

Customize your app

Your app's design should represent your organization or the app's functionality. To increase the visual appeal and informative value of your app, you'll add images, descriptions, icons, and fonts.

  1. In the list of apps, confirm that your app is selected. In the side pane, click the Settings button.

    Settings button

    The AppStudio Settings window appears. First, you'll update the thumbnail.

  2. Save the example thumbnail image to your computer.
  3. In the AppStudio Settings window, on the Details tab, click the default thumbnail.

    Default thumbnail

    The Open window appears.

  4. Browse to and double-click the thumbnail-palm image.

    A message appears, explaining that a copy of this image will replace your current thumbnail.

  5. Click Yes.

    The thumbnail is updated.

  6. For Summary, replace the default summary with Twenty-one places to go in this desert resort town.
  7. For Description, replace the default description with Palm Springs, California, is an American Shangri-La in a unique desert environment with endless sun, rediscovered mid-century architecture, and a fun, relaxed atmosphere.

    Next, you'll add an icon to represent the app on smartphones and other devices.

  8. Save the example icon to your computer.
  9. In the AppStudio Settings window, click the Resources tab. For App Icon, click the default icon.

    Default app icon

  10. In the Choose image window, browse to and double-click the icon-palm image. For the message asking if you want to copy the image to the app's folder, click Yes.

    The new icon is added. You'll also add a background image and a custom text font file.

  11. Save the example background image and example text font file to your computer.
  12. In the AppStudio Settings window, click the Properties tab. On the Start Screen tab, for Background image, click the browse button.

    Browse button for Background image parameter

  13. In the Open window, browse to and double-click the background-palm image.
  14. If you receive a message asking if you want to copy the image to the app's folder, click Yes.

    The background image is added.

  15. For Title font file, click the browse button. Browse to and double-click the CaviarDreams text file. If you receive a message asking if you want to copy the image, click Yes.
  16. For Text font file, browse to and double-click the CaviarDreams text file that was copied to your assets folder.
    Note:

    If you choose the original text file you downloaded, you won't be able to proceed because the same file cannot be copied to the same folder twice.

Add location data

Next, you'll use the Palm Springs story and the mobile map package provided by the City of Palm Springs to add data about popular locations to the app. You can add the story and mobile map package by providing their respective ArcGIS Online IDs. The ID of any ArcGIS Online item contains a string of numbers and letters and can be found at the end of the URL to its details page, as shown in the following image:

ID for the Palm Springs Story item

  1. In the AppStudio Settingswindow, on the Properties tab, click the Gallery tab.
  2. For Select an existing map tour style story map web application, copy and paste the ID for the Palm Springs Map Tour story, (b34ffabf64b04ce480fb453d25be5b4c).

    Palm Springs Map Tour story ID

    The City of Palm Springs wants this mobile app to have online and offline support. The story is hosted online, so for the mobile app to work offline, it must also be connected to a mobile map package that contains the same location data as the story. The City of Palm Springs has also provided a mobile map package for this purpose.

  3. For Mobile map package (mmpk) item ID for offline map, copy and paste the ID for the Palm Springs mobile map package (5fe4934158104de3802965d5dddff4a3).

    Another specification of the app is that locations should be sorted by their distance from the user.

  4. Scroll down to the Sort type parameter. Replace the default text with distance.

    Sort type parameter

    You'll make one final adjustment to the app's customization by changing the text background color. You'll choose a background color that matches the green color of your app thumbnail and icon.

  5. On the Properties tab, click the Tour tab. For Text background color, replace the default color with #7C9B3E and press Enter.

    Text background color option

  6. Click Apply.

    A green message appears, confirming that the settings are applied.

    You'll also set a license for ArcGIS Runtime. Unless the app is licensed, a watermark will appear on the map. You'll set a Lite license, which is available for free.

  7. Click the Licensing tab. For ArcGIS Runtime Licensing, click Set Lite license.

    Set Lite license button

    The License key box is populated with a Lite license key.

  8. Click Apply. Close the AppStudio Settings window.

Test your app

Next, you'll test your app. First, you'll test it in the desktop application. Then, you'll test it on a mobile device.

  1. In ArcGIS AppStudio, confirm that the Palm Springs Map Tour app is selected. In the side pane, click Run.

    Run button

    The Palm Springs Map Tour app opens in a new window.

    Palm Springs Map Tour app

  2. Click Get Started. When asked to download an offline map, click Later.
  3. Click each image to learn more about the location and switch between List and Map. When finished, close the app.

    The app works well on the desktop application. Next, you'll upload it to your ArcGIS account and test it on a mobile device.

  4. In ArcGIS AppStudio, click Upload.

    Upload button

    The AppStudio Upload window appears. You can choose to share the uploaded app with your organization or everyone. Because you're still testing the app, you won't share it for now. You can change the sharing options on ArcGIS Online after the app is uploaded.

  5. Click Upload.

    A message appears, confirming that the upload was successful.

  6. Close the AppStudio Upload window. Close ArcGIS AppStudio.
  7. On your mobile device, download and install AppStudio Player from the Microsoft Store, App Store, Google Play, or Amazon Appstore.
  8. Open AppStudio Player. Click Sign In and sign in to your ArcGIS account.
    Note:

    You can choose to sign in with either an ArcGIS Online account or an ArcGIS Enterprise account.

    The Home page appears. It lists all apps associated with your account. The Palm Springs Map Tour app is listed, but you can also access the app by scanning its QR code.

  9. On your computer, if necessary, reopen AppStudio. Confirm that the Palm Springs Map Tour app is selected and click QR Code.

    QR Code button

    Note:

    If the QR Code button is not available, close and reopen AppStudio

    A QR code for the app is displayed.

  10. On your mobile device, in AppStudio Player, click your profile picture.

    The side menu appears.

  11. Click Scan QR Code.

    Scan QR Code button

  12. Scan the QR code.

    Your app automatically downloads to AppStudio Player and launches.

  13. Run and test your app.

You have built and run the Palm Springs Map Tour app. The app works on your mobile device and can be shared with your organization or the public.

Create app installation files (optional)

If you have an ArcGIS AppStudio Developer Edition license (available by purchasing an ArcGIS Developer Subscription Builder level and higher), you can create app installation files. In this section, you will create an app installation .apk file for Android and .exe file for Windows.

Note:

You will need an Apple Developer license for creating an app installation .ipa file for iOS devices.

  1. In AppStudio, on the side panel, click Settings.
  2. In the AppStudio Settings window, click Platforms > Android. For Package Name, provide a name such as com.companyname.myapp.
    Note:

    Package naming follows a convention where your organization or company name is included within a standard package name.

    Specify Android package name.

  3. Click Apply.
  4. Close the AppStudio Settings window.
  5. In AppStudio, confirm that the app is selected, and in the side pane, click Make.

    Choose the Make tool.

    The Make window appears.

  6. For Cloud Make, click Select.

    Select Cloud Make

  7. In the Cloud Make configuration window, for Select target platform(s), in the Android column, check the box for ARMv8 (64 bit), and in the Windows column, check the box for 64 bit.

    Cloud configuration

  8. Click Analyze Build and click Request Build.

    The Build Status window appears.

    It takes a few minutes for the AppStudio cloud service to create app installation files. Once the build request is complete, you receive an email with the download and installation instructions.

  9. In the Build Status window, click https://appstudio-ota.arcgis.com and sign in with your ArcGIS account.

    Download link

    Note:

    Optionally, you can scan the QR code for the installation files from the app console page at https://appstudio.arcgis.com/.

  10. Click Install and download and install the apps on your device.

    Install button

In this lesson, you used ArcGIS AppStudio to create a Map Tour mobile app with a classic Story Map Tour template. You only needed to use a publicly shared story's ID to integrate it into your app. You also created installation files for the mobile app. Now Palm Springs visitors can download the mobile app you created and browse the rich display of interactive maps and images the app offers.

You can find more lessons in the Learn ArcGIS Lesson Gallery.