Updates to Map Tour in 1.3
The Map Tour app provides a map-based gallery, creating a narrative app with photos tied to locations. AppStudio 1.3 brings many handy improvements to the Map Tour template, including new features and UI enhancements to give users a better experience.
New Features
- Ability to show distance between each tour item and user of app.
Apps created with the Map Tour template can now show the distance between each tour item and the user. To enable this feature, make sure the enableDistance property is set to true using the Settings tool in AppStudio. This feature uses the device’s location to compute and show the distance between the user and each tour item. The user has the option to disable the feature by turning off the Show Distance switch on the menu page.
- Ability to sort tour items by title, distance, or by default order.
Tour items can now be sorted by their title, distance from the user, or as specified in their parent feature service or feature collection. The filter list button on the top right of the tour page presents a list of sorting options.
- Menu page added.
A menu button has been added to the left of the app header. This menu provides a link to the gallery page, the about page, the switch for showing/hiding distances, and a link for providing feedback. With the exception of the about page, all features can be removed or added as needed.
- Ability for user of app to provide feedback.
For this feature to be enabled, an email address must be specified in the field feedbackEmail of the file appinfo.json. Clicking on the feedback link launches the default email client of the user and prepopulates an email page with information about the user’s device.
- Internal web browser now used to load web pages or play videos within app.
Map Tour apps now have an internal web browser used to load and show web pages for all links across the site, and to play web videos. This keeps users focused within the app and gives them a seamless experience, as they never need to leave the app to open a browser. Should users prefer an external browser, the button at the top right of the internal web page allows users to play the video externally.
- Added map credits.
Clicking on the text Map Credits on the bottom left of the map pops open a box with the map credits information.
UI Enhancements
In addition to the new features, the look and feel of the app has also been improved.
- Support for animated gifs as background to landing page.
Map Tours created with AppStudio 1.3 can now be configured to use animated gifs as the background image for their landing page. This is a useful enhancement for tours requiring an animated image or a brief video to add more meaning to their story.
- Responsive and more legible gallery page.
Map Tour apps now present a better structured gallery page that displays well on all devices. Improvements have also been made to make the text more readable. Initially, the description text of each tour on smaller devices got cut off, and was unevenly spaced. On larger devices, the text spanning the entire device width from side to side was difficult to read. These have been improved by leading off with an ellipsis when necessary, and setting a fixed width for content on larger devices.
- Smoother scrolling through tour items on map page.
Scrolling through the thumbnails of tour items from the map page is now a better. Scrolling from item to item does not zoom the map away from its current extent as before, but instead only pans the map to center at the pin of the selected tour item. Additionally, while the thumbnails of the tour items are moving during scroll, the header which contains the count of tour items now stays fixed. By reducing the business of this page, users will find it easier to focus on the map tour story.
- Improved photo details page.
Just as scrolling through thumbnails on the map is now smoother, similar improvements have been made to the experience of scrolling through photos on the photo details page. The header containing the count of tour items stays fixed during the scrolling. The photo of this page has also been reduced in size to give room for the description of the tour item, and the photo credit (added to the bottom of the page). If the user prefers to focus on the pictures, tapping once on the screen hides the text, and allows for picture-focused scrolling. Tapping the screen once again returns the text.
- Better structured and more legible about page.
The about page of the app can now be accessed from the newly added menu page. Content on the page has been made more responsive and now displays better on all screens. In addition, links within the about page now open internally within the app instead of externally.
- Material design look and smoother page transitions.
In addition to the new features and UI changes mentioned, the Map Tour template UI/UX has been improved to follow material design look and feel. All icons are now consistent across the app. Transition animations have also been added for displaying the different pages of the app, all of which respect the concepts of materials.
If you’re new to the AppStudio templates and would like to create your first Map Tour app, please refer to the AppStudio website with instructions about creating a new Map Tour app with AppStudio for ArcGIS. If you’re already using the Map Tour template for your app and want to update it, see our previous blog post about updating featured templates.