Skip navigation
All Places > AppStudio for ArcGIS > Blog > Authors MProctor-esristaff

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.

Tile Package Kreator (TPK) is a new Esri Labs desktop application for Windows, Mac and Linux that is focused on tile package creation and discovery. As an Esri Labs project, the TPK is free to use but is not an official Esri product and is not supported by Esri technical support.

 

Currently, Esri provides several ways for users to create tile packages, most notably via ArcMap and Pro applications. The TPK is meant to provide a focused utility for users that need to simply create a tile package for offline use, browse and download organizational tile packages from ArcGIS Online (with Portal support on its way) and upload existing local tile packages online.

 

The TPK requires an internet connection as it uses online map services that support exporting tiles to complete its tasks. These services may include well known Esri basemaps, such as the World Street Map or Light Gray Basemap, as well as publically facing map services or custom organizational map services created via ArcMap or Pro that have been published online and enabled to allow the exporting of tiles. Once the tile package is created via online services, it can be used in offline scenarios, such as within Survey123 as a basemap for a specific survey.

 

Creating Tile Packages

 

Creating tile packages with the TPK is straightforward. Once a map service is chosen, the user can create an area of interest by either drawing a rectangular envelope or a multipoint buffered path on the map. The buffered path might be useful when tiles are only needed along a specific complex route such as a stream or trail. The online services that are employed to create tile packages via the TPK are designed to only return the tiles needed to display the path at the requested levels, which can greatly reduce the overall size of the tile package as unneeded tiles aren’t included. After drawing an area of interest, the user can either save the tile package locally, or upload it to their ArcGIS online content, with the additional option of sharing it with the organization, or publicly.

 

It should be noted that there are limitations with the creation of tile packages via online services. Tile packages created via these services are in general limited to a maximum of 100,000 tiles. The TPK provides an estimated output size, however this is just a guide, and requests may be rejected via the service after it performs its own estimation. The TPK provides feedback during this process. Also, the larger the tile package size, the greater the bandwidth needed to download and upload them. Currently, Esri doesn’t support transferring a tile package created online directly to a user’s online account, so the TPK requires downloading the tile package file first before uploading it to a user’s online content. These limitations aside, the TPK should prove useful for the effective creation of offline basemaps that cover smaller geographic areas with a high number of zoom levels.

 

Browsing and Uploading Tile Packages

 

Along with creation of tile packages, the TPK also provides an interface that allows a user to browse online tile packages that are private or have been shared with the user’s organization. A context menu for each tile package displayed allows the user to view it online via ArcGIS or download it locally for use offline. 

 

An upload interface is also included with the TPK that focuses solely on pushing and sharing local tile packages to the user’s online content. A bonus of this upload tool is the spatial reference check conducted. When a tile package file is selected, the TPK opens it up and checks to see if its spatial reference is Web Mercator, alerting the user if it is or is not. As the Web Mercator spatial reference is used with many online and native tools, this check provides the user with a pre-upload compatibility verification of sorts.

 

Customizing the Tile Package Kreator

The source code of the Tile Package Kreator is shared under the Apache 2.0 License, so if you like you can take this app and make it your own. You can find the source code at GitHub - Esri/TilePackageKreator: Tile Package Kreator.

 

Esri welcomes contributions from anyone and everyone. Please see our guidelines for contributing.

The easiest way to download the source code is by using AppStudio for ArcGIS Desktop Edition. Once installed, click on New App and search for TilePackageKreator under the Enterprise category. You can look at the code, modify it and run it in your Mac or Windows development machine. If you have an AppStudio for ArcGIS Standard license, then you will be able to compile your code for Windows, Mac and Linux.

With the AppStudio 1.3 release, we have made some great improvements and additions to the three featured templates. Highlights include: 

 

  • Quick Report – support for offline data capture and multiple photos per report 
  • Map Tour – better picture and video support, better feature navigation 
  • Map Viewer – added layer list, map scale, units and location accuracy 

 

If you have already used a featured template to create an app, it will continue to work as is. New apps created at appstudio.arcgis.com will use the new templates. As of AppStudio 1.3 you can also create apps from these featured templates within AppStudio for ArcGIS Desktop Edition. Some of the new features can only be configured in AppStudio Desktop Edition.  

 

Look out for follow up blogs coming soon for details on all new features in each template. 

 

Create a new app from a featured template online 

 

  1. Got to appstudio.arcgis.com and sign in with your ArcGIS organizational account 
  2. Click Create your app 
  3. Click Start with this template for either Map Tour, Map Viewer or Quick Report 
  4. Add title, Summary, images and setting and click Save and Finish

 

At this point you can sign into AppStudio Player to download and use your app, choose to build installation files to create a standalone app, or open the app in AppStudio Desktop Edition for additional configuration or customization. 

 

Create a new app from a featured template in AppStudio Desktop Edition 

 

  1. Launch AppStudio Desktop Edition 
  2. Click New App 
  3. Choose from the template category, enter a title and click OK 

 

At this point you should click Settings to configure the app further. You can also sign into AppStudio Player to download and use your app, choose to build installation files to create a standalone app, or open the app in Qt Creator to customize it. 

 

Migrating an existing app to use a new template 

 

Many of you have already created great apps from our featured templates. There are several ways to migrate to using a new version of the templates. 

 

The method that has the least room for error, is to create a new app using the same resources as your original app. Create your new app in appstudio.arcgis.com or AppStudio Desktop Edition and add your feature service, web map or images. This will mean all the files inside the app will be guaranteed to be the latest. If you already share your app in your ArcGIS organization, it will mean the app is a new item. 

 

If you need your updated app to remain as the same item in your ArcGIS organization, you will need to use AppStudio Desktop Edition and copy and paste files. The critical file that you need to preserve from your original app is the appinfo.json file. Create a new app as described above, and copy all of the files over your existing ones, leaving only appinfo.json as original. 

 

You can also choose to selectively update individual files using a file comparison tool. This choice is very much dictated by your level of comfort with the code, and might be the best option if you have added your own files to the app. 

Using virtual devices with AppStudio

 

AppStudio for ArcGIS 1.3 has brand-new integrated support for virtual devices, i.e. the capability to use iOS simulators and Android emulators. These are intended for rapid development and testing your apps without the need of having multiple phones and tablets with different versions of operating systems at hand.

 

The iOS simulator is only available on the AppStudio desktop for Mac, whereas the Android emulator is available for Windows, Linux and Mac. To leverage the use of virtual devices you do need to install some development tools on your desktop.

 

This new feature also allows you to physically connect an Android device to your desktop and synchronize your desktop apps to aid rapid development.

 

For more information on setting up virtual device usage in AppStudio see our documentation.

 

Getting started with iOS Simulators (Mac)

 

The iOS simulator is installed as a part of XCode. To start using the simulator device images you must first install XCode and command line tools 7.0+ from https://developer.apple.com/download/ (You don’t need an Apple Developer License to perform this action).

 

The simulator allows you to test apps with several SDK versions and operating systems. You can download additional simulator device images within XCode, open XCode and select Menu > XCode > Preferences > Select Components

 

After installing XCode, you can view a list of simulated devices when you click on the Virtual Device icon in AppStudio.

 

 

 

Getting started with Android Emulator (Windows, Linux & Mac)

 

To get started with the Android emulated environment, first you need to install Android Studio from https://developer.android.com/studio/index.html and create x86 device images from Android Virtual Device (AVD) https://developer.android.com/studio/run/managing-avds.html

 

Tip: For existing AppStudio customers you might have realized that now AppStudio supports Android x86 as a target platform. Though most of the physical Android devices out in the market are based on arm7, the emulator world is dominated by a much faster x86 version.

 

Points to remember while creating AVD images:

  1. Enable software rendering, otherwise AppStudio Player will not run. This slows the emulator down considerably, so setup the virtual device beforehand.
  2. Due to OpenGL limitations, set the minimum API support level to 23. Player will not run on any lower API level in emulation.

 

Click on the Virtual Device icon to see your Android emulator devices.

 

 

Select a device and whilst the emulator loads your device, apply sync, the AppStudio Player on an emulator doesn’t pick up the latest changes unless you have instructed it to do so.

 

 

 

Connected Android devices

 

AppStudio provides an additional feature for Android users. You can now run an app on a physical device directly using AppStudio’s Virtual Device interface. On a physical Android device, you can always install AppStudio Player and download all apps that is available and shared via the organization. This is a developer friendly way to sync all your apps from AppStudio which is the same as the sync function on an emulator. This saves you a bit of time in uploading your app and then downloading it again in the Player.

 

To enable this feature:

  1. Enable developer mode on your Android device
  2. Enable USB debugging under Developer Options
  3. Ensure that your Android device needs to be on the same Wi-Fi network as AppStudio Desktop
  4. Connect your device via USB to your machine
  5. Click on Virtual Device in AppStudio Desktop and select your device