What is the Map Tour template?
The Map Tour template is designed to help you create a place-based narrative app.
When you create an app from this template, you need to provide a title to create an app. Use the Settings tool to customize your map tour.
Requirements
The Map Tour template supports point feature collections (for example, CSV and KML) and point feature service layers as long they contain the relevant information in the following fields:
- Title
- Description
- Thumbnail URL
- Photo URL
Map tours created using the Esri Story Maps website can be used as long as they satisfy the conditions stated above. For additional details, see the classic Story Map Tour Tutorial.
In addition, the web map version used must be 2.0 or later or the map will fail to load.
Differences between mobile and web apps
An app based on a classic Story Maps web app won't convert identically. Be aware of the following differences:
- HTML audio tags in a tour point's description will not be rendered in a native app.
- The intro map tour point is not used. Instead, the template has a landing screen that should be configured with the same information.
- Not all layers in the web map will display, for example, premium services and heat map layers.
- You can override fields in the Map Tour native app. This is useful, for example, when using large images for thumbnails instead of the default small ones, which may appear pixelated.
- Not all video formats can be played in the native app's web view.
Create an app
You can create a Map Tour app in AppStudio for ArcGIS.
- Start AppStudio for ArcGIS.
- Click New App on the toolbar.
- From the category list, choose Template. A list of templates appears.
- Choose Map Tour from the list of templates, provide an app title, and click OK.
Customize your app
Once you create your app, you can customize it by changing the app settings in AppStudio for ArcGIS.
Start AppStudio and, in the side panel, click Settings > Properties. The following tables list the contents of the tabs on the Properties tab, sorted by the tab on which they appear and their purposes. They can also be modified directly in the app's appinfo.json file. If you change any of these properties, click Apply to save them before opening your app again in Player.
Start Screen tab contents
| Property | JSON | Type | Description |
|---|---|---|---|
Background image | startBackground | string (image URL) | Image used for the Start page background. |
Base font size | baseFontSize | number | Sets the base font size used throughout the app. |
Title font file | customTitleFontTTF | string (font file URL) | Sets the font to be used for the app title on the Start page. |
Text font file | customTextFontTTF | string (font file URL) | Sets the font to be used throughout the app. |
Gallery tab contents
| Property | JSON | Type | Description |
|---|---|---|---|
Show gallery | showGallery | Boolean (true|false) | Indicates to the app whether you want to display a gallery of map tours. Your app can contain one or multiple map tours. The map tours are displayed based on the queryString property. When the gallery is shown, the user must select an item from the gallery to view the tour. |
Select an existing map tour | queryString | string | Supplies the app with either a single map tour ID or a string to query many map tours for display. |
ArcGIS organization ID | orgID | string | Your ArcGIS organization ID to be used in the query to restrict results to your organization only. Leave blank if unknown. |
Portal URL | PortalUrl | string | URL of the ArcGIS portal to query for map tours. |
Portal query item types | portalQueryItemTypes | string | Used to restrict the types of items returned from the query. Typically it will be type:\"Web Mapping Application" if you're using existing map tour apps or type:\"Web Map" if you have web maps that have map tour layers in them. |
Portal sort field | portalSortField | string | Used in conjunction with portalQueryItem to sort the results. Possible values include title, created, type, owner, modified, avgRating, numRatings, numComments, and numViews. The default value is modified. |
Portal sort order | portalSortOrder | string (asc|desc) | Used in conjunction with portalSortField, and arranges the results in either ascending or descending order. The default is descending. |
Enable tour item sorting | enableTourItemSorting | Boolean (true|false) | Indicates to the app whether or not to display the sort option on the tour page, enabling users to sort items by the default order, by distance from the user, or by the item's title. Setting this to true shows the button. |
Sort type | sortType | string | Indicates to the app what the initial sort order should be between the three options of default, distance, or title. |
Tour tab contents
| Property | JSON | Type | Description |
|---|---|---|---|
Show basemap switcher | showBasemapSwitcher | Boolean (true|false) | Shows or hides the basemap switching tool on the map. |
Tour layer ID | tourlayerId | string | Helps the app determine which layer in the web map is the map tour layer if you have more than one operational layer. If your web map has only one layer, you do not need to set this property. You can provide a partial name; for example, if your layer is named csv_2234343, you can enter csv_. This is unique enough for the app to determine the layer in the web map. |
Text background color | textBackgroundColor | string (color value) | Color to use for the text background. Used for the tour and about screen headers, alert boxes, and window dialog boxes. |
Description field | maptour_descriptionField | string | Name of the field from the geodatabase or feature collection that contains the text description to be displayed for each point in the map tour. |
Auto crop images | autoCropImage | Boolean (true|false) | If true, images that are shown in the gallery of features will be cropped instead of resized. This is good for very large images. |
Custom renderer | maptour_customRenderer | Boolean (true|false) | If true, the app will use the four icon colors of red, blue, green, and purple, or default black, to render the map tour points in the map tour layer. |
Custom sort | maptour_customSort | Boolean (true|false) | If true, the app will sort the features based on the field described by sort field. |
Sort field | maptour_customSortField | string | Name of the field from the geodatabase or feature collection that contains the sort order of features for the map tour. |
Custom sort order | maptour_customSortOrder | string (asc|desc) | Only used when the map tour app is powered by feature services, to define the ordering of tour points. Arranges the tour points in either ascending or descending order. |
Custom color field | maptour_iconColorField | string | Name of the field that contains the icon color (possible values are R, B, G, P). This is used to provide the app with the name of the icon field to use when the map tour is only powered by web maps and custom layers. |
Custom image field | maptour_imageField | string | Name of the field from the geodatabase or feature collection that contains the URL of the full-size image to be displayed for each point in the map tour. |
Custom thumbnail field | maptour_thumbnailField | string | Name of the field from the geodatabase or feature collection that contains the URL of the thumbnail image to be displayed for each point in the map tour. |
Custom title field | maptour_titleField | string | Name of the field from the geodatabase or feature collection that contains the title to be displayed for each point in the map tour. |
Enable distance | enableDistance | Boolean (true|false) | If true, the app will compute and display the distances between each tour item and the user's device. This functionality works only if the device location is enabled. |
feedbackEmail | string | Email address where user feedback needs to be sent. |
Distribute your app
There are many ways you can distribute your app. For details, see Distribute your app.