Skip navigation
All Places > AppStudio for ArcGIS > Blog > 2017 > January
2017

The Map Viewer app template provides a way to share your maps with users, with a streamlined interface designed for viewing one or more maps with ease. AppStudio 1.3 brings a number of improvements to the Map Viewer template, including new features and many minor UI enhancements that add up for a better map viewing experience.

 

 

New Features 

  • Layer list added to menu 

Map Viewer apps now include a Layer item on the menu page, which when clicked exposes a list of all the operational layers present on the map This feature is especially useful for maps containing many layers, as it gives users the ability to turn on or off the visibility of the layers. Users can turn off some layers, for example, keeping visible only those they want to focus on at a time.  

 

Image

 

  • Map unit on bottom left of map 

The map unit is now shown on the map, showing the location of the center of the map at the unit of the map’s coordinate system. Clicking on the text opens up a box listing the different units of measurement that the user can choose from. Each time the center of the map changes, the coordinate value of each unit in the box updates itself dynamically to show the new center. A focus icon also appears at the center of the map each time the user interacts with it. This icon, together with the map unit readings, makes it easier for users to quickly identify the coordinates of features they see as they interact with the map. 

 

 Image

 

  • Map scale on bottom left of map 

Another important feature added to the Map Viewer template is the map scale. Each time the user interacts with the map, a scale appears at the bottom left directly above the map unit, and disappears briefly after the interaction. Now users can get a perspective of the actual size of features on the map. 

 

  • Location accuracy on bottom right of map 

The Map Viewer can now display the location accuracy of the devices GPS coordinate reading on the map. This gives users a better sense of how close to the true value the coordinates of features identified on the map are. The location accuracy is not visible by default, but can be enabled and made visible by clicking on the location icon found on the center right of the map as shown in the left screenshot below. The accuracy is then displayed on the bottom right of the map. The box containing the accuracy reading is colored green to represent a good reading, but it turns red if the accuracy is greater than ± 50 ft. For locales using the metric system, the accuracy is displayed in meters instead of in ft. 

 

Image

 

  • More information added to the about map page 

The page giving details about the map now provides more information such as the map credits, and the access and use constraints for the app. The access and use constraint information is shown on the page if provided in the app’s settings on AppStudio for Desktop. 

 

UI Enhancements 

  • Exposed primary color for easier rebranding 

The primary color of the app has been exposed to make it easier for users to replace with their brand color. This replacement can be done from the app’s settings in AppStudio 1.3. In the Map Viewer Properties tab of the app’s Settings window, use the color picker under Primary Color to select the appropriate color. The first screenshot below shows the location of the primary color in the app’s settings, and the second shows an app branded with a steel blue theme color. 

 

Image

 

  • Updates to the disclaimer page 

Improvements have been made to the UI of the disclaimer page. The Continue button and the I understand the terms and conditions checkbox have both been removed. These have been replaced with the Agree button, which is more guiding to the user. The layout of the page has also been improved, making it more responsive for both large and small screens. 
 

  • General UI cleanup 

In addition, minor improvements such as setting consistent font sizes and margins, fixes to page layouts to make text readable, and many other details have gone into improving the look and feel of the app. The icons used across the app, for example, have been replaced with material design icons. They now have a more consistent look across the app. The transition animations to the menu page and menu items have also been improved by adding a slide-out animation, which is now consistent with the slide-in animation that displayed the items. 

 

If you’re new to the AppStudio templates and would like to create your first Map Viewer app, please refer to the AppStudio website with instructions about creating a new Map Viewer app with AppStudio for ArcGIS. If you’re already using the Map Viewer template for your app and want to update it, see our previous blog post about updating featured templates.

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.

The Quick Report template can be used to collect data to submit to an ArcGIS feature service layer, including attachments, domain, subtypes, required fields and more. With the AppStudio 1.3 release we’re excited to announce a brand new version of the Quick Report template, redesigned and full of new features.

 

There are numerous small but useful improvements, major features and UI enhancements made to give users a better experience.

 

 

New Features

  • You can now save and edit reports in offline mode. After creating at least one report online, to help the app download the schema of the feature layer, you can create offline reports even if you restart the app again. Once you get back online, you can send them whenever you want in the new Saved Reports page.
  • The Saved Reports page also provides the option to save your report to send later even if your device is online. This is ideal for when you may want to clarify information before submitting it.
  • The Quick Report template can now support multiple attachments. If multiple photos are uploaded in the one report they will appear in a grid view, with buttons to add or delete photos.
  • The camera page has been improved, now supporting multiple cameras, flash, image previews, and file renaming.
  • A new disclaimer page has been added before the report itself opens. A widely-requested feature, the disclaimer page will only appear if something has been entered into the “Access and Use Constraints’ section in the app’s ArcGIS Online item details.
  • The Add Location page now supports webmaps. While previous versions of Quick Report only supported one basemap URL, you can now use any webmap you provide the webmap ID of in the app’s settings. Note that to be provided like this, webmaps should be publicly shared and have at least one layer.
  • Location accuracy is now supported, displayed in the lower-left corner of the Add Location page.
  • The Add Details page now supports required fields. These fields will be marked with an asterisk (*), and disable the Submit button until the fields have been filled in.

      

  • The Add Details page now also supports validation checks, allowing you to put restrictions on the length and input type for the field.
  • The Quick Report landing page now supports animated gifs as background files.

The new features described above can all be utilized by apps created on the website or in AppStudio Desktop. If you’re keen to take the template further, the following new features can also be utilized in AppStudio Desktop.

  • The New Report button now initializes the report. With minor customization, this means that you can easily support multiple feature services within the one app, simply by duplicating the button and linking it elsewhere. This greatly streamlines the process of submitting to multiple feature layers in one Quick Report app—which was possible previously, but a lot of work.
  • You can now add help pages to assist users in your app. These pages can either be online, or local HTML files.

 

UI Enhancements

  • Labels and links for contact information are now flexible and controlled by screen size.
  • The About page has been improved to be easier to read and more responsive.
  • Quick Report’s settings now allow you to select custom text fonts.

If you’re new to the AppStudio templates and would like to create your first Quick Report app, please refer to the AppStudio website with instructions about creating a new Quick Report app with AppStudio for ArcGIS. If you’re already using the Quick Report template for your app and want to update it, see our previous blog post about updating featured templates.