Configure a Map Tour template

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 story map tour that contains information about popular locations, plus a mobile map package with all the data you need. You'll use the AppStudio for ArcGIS 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 Story Map Tour app template. It's recommended that you have already created a story map 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 AppStudio for ArcGIS. Then, you'll create an app using the Map Tour template.

  1. Open AppStudio for ArcGIS Desktop Edition.
    Note:

    If you don't have AppStudio for ArcGIS Desktop Edition, you can download it for free from the AppStudio for ArcGIS 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 AppStudio for ArcGIS, contact your organization's administrator about licensing your account.

  4. Click New App.

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

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.

    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 map 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 map 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 Mobile Map Package 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 story map (b34ffabf64b04ce480fb453d25be5b4c).

    Story Map ID

    The City of Palm Springs wants this mobile app to have online and offline support. The story map 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 map. 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.

    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 AppStudio for ArcGIS, 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 satisfied, 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 AppStudio for ArcGIS, 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. The sharing options can be changed 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 AppStudio for ArcGIS.
  7. On your Android or iOS mobile device, download and install AppStudio Player (it is also available on the App Store, Google Play, and Amazon.
  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, reopen AppStudio for ArcGIS Desktop Edition. Confirm that the Palm Springs Map Tour app is selected and click QR Code.

    QR Code button

    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 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.

You can create a Map Tour mobile app with any Story Map Tour. You only need to use your story map's ID instead of the Palm Springs story map ID. (The story map must be shared publicly.) You can also create a mobile map package. It's recommended that you do so using the ArcGIS Publisher extension with anonymous use enabled.

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