Create a web app
To create the web app for the park website, you'll use ArcGIS Instant Apps. Instant Apps includes a library of app templates and several configuration options so you can design an app tailored to your audience's needs.
Note:
If you need to create capabilities to engage with the public and promote outdoor recreation activities, use the Recreation Outreach Solution. This tutorial focuses on how to create web and native apps, and the steps described here form a subset to be considered for outdoor recreation engagement.
Choose a web app template
First, you'll sign in to ArcGIS Online and choose an appropriate template using Instant Apps.
- Sign in to your ArcGIS organizational account.
Note:
If you don't have an organizational account, you can sign up for an ArcGIS free trial.
- On the ribbon, click Content.
You go to your Content page, which shows all of the content in your account. This page also includes options for creating content, including apps.
- Click Create app and choose Instant Apps.
The Instant Apps gallery page appears in a new browser tab. The gallery includes many app templates, which you can filter based on the capabilities they have. Because you want to eventually convert your web app into a native app using ArcGIS AppStudio, you'll search for templates that have compatibility with AppStudio.
- For Search app capabilities, type AppStudio and choose appstudio.
The gallery is filtered to templates with AppStudio compatibility as a capability. The other capability you want your app to have is to show the elevation of hiking trails.
A good way to show elevation of a linear route (such as a trail) is with an elevation profile, which is a two-dimensional cross-sectional view of a landscape that depicts rises and falls in elevation. You'll filter the gallery further to show templates that have elevation profile capabilities.
- For Search app capabilities, type Elevation Profile and choose elevation profile.
The capability is added as a filter. The gallery now contains one item: the Nearby template. You'll check the app's description to confirm this is the app you want.
- For Nearby, click the options button and choose App description.
A window appears with a text description of the app. The description states that this template guides users to points of interest based on a location search and provides directions. In conjunction with the AppStudio and elevation profile capabilities, this template seems like exactly what you want to help park visitors search for and learn about nearby hiking trails.
- In the description window, click Close.
- For Nearby, click Choose.
Tip:
To preview an app template before you choose it, click Sample to see an example app using the template.
The Create App window appears, with options to give your app a title and search tags.
- For Give your app a title, type Santa Monica Mountains Hiking Trails.
- For Add tags, type Los Angeles and Hikes, pressing Enter after each.
- Optionally, choose a folder in which to save the app.
- Click Create App.
The app is created and the app setup page appears.
Choose a map
Next, you'll configure the template to suit your needs. The first thing you'll do is choose a map to display in your app. This map will show hiking trails and trailheads in the Santa Monica Mountains.
- If necessary, close the Welcome to the app setup page window.
The app setup page is set to express mode by default. This mode includes a simplified subset of all app settings to emphasize the most essential settings and guides you through the configuration process.
You can turn off express mode to view all settings, or search for specific settings if you need them, but for your purposes, this mode is fine right now. The first step is to choose a map for your app.
- Click Step 1. Map.
You'll choose a web map of Santa Monica hiking trails that has already been created for you. Ordinarily, you may have to create the map you want to display in your app yourself, but for the purposes of this tutorial, you'll assume you've already created the map.
Note:
To learn more about creating web maps, try Get started with ArcGIS Online.
- Click Select a map.
The Select a map window appears. By default, the window displays maps that you own. The map you'll use is owned by the Learn ArcGIS administrator account.
- Click My Content and choose ArcGIS Online.
The window now shows all maps that are shared publicly on ArcGIS Online.
- In the search bar, type Santa Monica Trails Nearby owner:Learn_ArcGIS.
The list of maps is filtered to show a single result: Santa Monica Trails - Nearby, owned by Learn_ArcGIS.
- For Santa Monica Trails - Nearby, click Select a map.
The app preview updates to show the trails map.
Configure the capabilities
An app doesn't just display a map. It also contains capabilities that change how users interact with and gain meaning from the app. The main capabilities you want your app to have are the ability to search for nearby trails, the ability to view elevation profiles of the trails, and the ability to show directions to trails.
First, you'll specify the search distance for visitors to find nearby trails and trailheads.
- In the configuration pane, click Back.
You return to the list of essential settings. The next step on the list is About, which you can adjust to change the text in the app to help users better understand how to use it. The app already contains default text that describes various search methods to find locations on the map, so you won't change this setting.
The third step, Nearby, contains settings for the app's search capability.
- Click Step 3. Nearby.
You'll choose the layers that will be included in the search results. You want users to be able to search for both trails and trailheads.
- For Layers to include in results, check SAMO Public Trailheads and Access Points and SAMO Public Trails.
The default search distance is 2 kilometers, which isn't very big considering the park has an area of 638 square kilometers (or about 246 square miles). You'll increase the distance and also change the unit of measurement to miles.
- For Maximum search distance, type 5. For Search units, choose miles.
You've configured the search capability. Next, you'll configure an elevation profile capability that allows visitors to see trail elevation before they choose which trail to hike. The elevation profile is not included in the list of essential settings in the Express pane, so you'll search for it.
- Click Search settings.
- In the Search settings pane, type Elevation and click Add elevation profile link to popup.
Because this setting isn't shown in express mode, you're prompted to turn off express mode before continuing.
- In the Turn off express mode window, click Continue.
The Results pane appears, with all settings for search results available.
- Turn on Add elevation profile link to popup.
Now, elevation profiles will be available for the trails layer.
Another option that is displayed is the option to show directions. You want users to be able to see directions to reach trailheads, so you'll enable this option.
- Turn on Show directions. For Layers to include directions link in the results, choose SAMO Public Trailheads and Access Points.
You've enabled and configured all the capabilities you want your web app to have.
Finish the app
You'll add a few final changes to your app. First, you'll create a custom filter for the trails layer so visitors can search specifically for paved park roads.
- In the Results pane, click Back.
- Click Filter.
- Turn on Enable filtering. For Select layer, choose SAMO Public Trails.
- For Custom filters, click Add filter.
To add the filter, you'll create an expression. The trails layer has attribute information for trail type, so you can use that information to create an expression that filters by the paved park road trail type.
- Click Add expression.
- Create the expression Type is Paved park road.
You'll also name the filter. This name will appear in the app, so it should explain what it filters by.
- For Filter display name, type Paved park road.
- Click Save.
Another small feature you'll add is a button that enables users to switch the basemap to show satellite imagery of the area. This feature can be useful for users who want to get a better idea of what the terrain really looks like.
- In the configuration pane, click Interactivity.
- In the Interactivity pane, click Modify.
- Turn on Basemap toggle. For Select basemap, click Imagery.
Your web app is finished. It has all the features you wanted, and even more features that will help visitors plan their hikes.
Publish the app
All you need to do now is publish the app and share it so everyone can view it.
- Click the Publish button.
- In the Publish window, click Confirm.
A window appears, asking whether you want to authorize premium content. The Santa Monica Mountains Hiking Trails layer is a premium service due to its routing capabilities.
If you do not authorize premium content, users who do not have an ArcGIS account may not be able to see the trails layer when they use your app. If you do authorize premium content, your app will consume credits in your organization every time the app is viewed. You shouldn't authorize premium content unless you're certain your organization can sustain the cost.
In this scenario, you're an official working for a government agency, so you would want to authorize premium content so all users can view the app's content. However, for the purposes of this tutorial, you'll leave premium content unauthorized to avoid unnecessarily spending credits.
- In the Authorize premium content window, click Continue without authorizing.
Your app is published. The Share window appears with options to share your app. Currently, the app isn't shared. You'll share it with the public so everyone can see it.
Note:
Because you chose not to authorize premium content for the purposes of this tutorial, users who do not have an ArcGIS account may not be able to see the trails layer in the app.
- Click Change share settings.
- In the Share window, choose Everyone. Click Save.
- Click View Application.
Your web app is finished and appears in a new browser tab. Anyone with the URL of the app will be able to access it.
Next, you'll configure a native app with all the same functionality as the web app. When configuring the native app, you'll want to use the web app as a base, so you'll copy the web app's ID from the URL to refer to it later.
- Optionally, test some of your app's features, such as the search bar or the filter.
- In the URL, copy the string of letters and numbers after id=.
- Paste the ID somewhere you can easily access it again, such as a Notepad document and close the app.
You'll use this ID later in the tutorial.
You've successfully created and published a web app using Instant Apps.
Create a native app
You've created a web app that park visitors can access online before they arrive. But many of the app's features are useful for users even after they've started their hike. To accommodate these users, you'll create a native app, which is an app that can be installed onto a smartphone and used offline. This app will contain the same features as the web app, as well as additional custom features that make use of smartphone hardware, such as text-to-speech functionality.
Note:
For your app to be able to work offline, your web map must contain offline areas. To learn how to make offline areas, see the tutorial Conduct a pre-enumeration survey.
Choose a native app template
To create the native app, you'll use ArcGIS AppStudio and choose the same template you used to create the web app.
- Open ArcGIS AppStudio.
Note:
If you don't have ArcGIS AppStudio, you can download it for free from the ArcGIS AppStudio Resources page. Run the downloaded file to open the installation wizard. Follow the wizard's instructions to install the software.
- Click Sign In and choose Sign In.
- Sign in using your ArcGIS account.
- Click New App.
Note:
If you've never created an app in AppStudio, the New App button may be in a different location than in the example image.
The New App window appears. It lists several app templates and styles. You want to choose the Nearby template, which is the same one you used to create your web app.
- Click the Templates tab.
- In the list of templates, click the Nearby template.
A summary and description appear for the selected template.
- Under the description, click Create.
The app is created and listed with your other apps. If this is your first time using AppStudio, it will be your only app. A side pane provides more information about the app, including its name.
- In the list of apps, confirm that your new app is selected. In the side pane, click the Edit Title button.
- Change the title to Santa Monica Trails and click the Save Changes button.
Configure the settings
You want your app's design to represent your organization or the app's functionality. To increase the visual appeal and informative value of your app, you'll add images, descriptions, and icons. Then, you'll use the ID of the web app to add its functionality to the native app.
- Download the images zipped folder.
- Extract the images zipped folder to a location on your computer that you can easily remember, such as your Documents folder.
The folder contains three images that you'll use to give your app distinct and consistent branding.
- In AppStudio, in the list of apps, confirm that your Santa Monica Trails app is selected. In the side pane, click Settings.
The AppStudio Settings window appears. First, you'll update the thumbnail.
- In the AppStudio Settings window, on the Details tab, click the default thumbnail.
- In the Open window, browse to and double-click the thumbnail-santa-monica-trails image from the folder you downloaded.
A message appears, explaining that a copy of this image will replace your current thumbnail.
- Click Yes.
The thumbnail is replaced. Next, you'll change the app's summary with a tagline that conveys the app's purpose.
- For Summary, delete the existing text and type Discover - Hike - Enjoy.
You'll also add an icon to represent the app on smartphones and other devices.
- Click the Resources tab. For App Icon, click the default icon.
- In the Choose image window, browse to and double-click the icon-santa-monica-trails image from the folder you downloaded.
- In the Copy File window, click Yes.
The icon is added. You'll also add a background image.
- Click the Properties tab. On the Start Screen tab, for Background image, click the default background image.
- In the Open window, browse to and double-click the background-santa-monica-trails image from the folder you downloaded.
- In the Copy file window, click Yes.
The background is added. You'll change the primary color of the app to match the green color of your images.
- For Brand color, type #339689.
- At the bottom of the AppStudio Settings window, click Apply.
Your changes are applied. The AppStudio Settings window remains open. You'll use this window to add the ID for your web app to the native app. Doing so will allow users to access the web app's functionality while using the native app.
- In the AppStudio Settings window, on the Properties tab, click the Gallery tab.
- For Nearby web apps, delete the existing text and paste the ID of your web app. Add id: to the beginning of the ID.
- Click Apply. After the settings are applied, close the AppStudio Settings window.
Test the app on a desktop
You've configured and customized your app. Now, you'll test it on your computer.
- In AppStudio, confirm that your Santa Monica Trails app is selected. In the side pane, click Run.
Your app opens in a new window.
The desktop app behaves similarly to how the app will function on a smartphone.
- Click Start.
The app displays the map of trails and trailheads from your web app. The instructions explain the ways you can find nearby points of interest.
- Zoom in and out on the map.
- Click any location on the map.
When you click the map, a pin appears with a 5-mile search radius around it. Any trails and trailheads within that radius are listed at the bottom of the app.
- If necessary, click the map or scroll through the nearby trails until a trail is listed at the bottom of the app. For the trail, click Elevation.
The map zooms to the trail and displays an elevation profile that shows changes in elevation across the trail.
- Close the elevation profile. For the same trail you just looked at, click Details.
More information about the trail is displayed.
- Close the details page. On the map, click a trailhead (indicated by a black square with a hiker).
- For the trailhead, click Details.
The details page for trailheads includes a Directions button. This button will show routing information to reach the trailhead. For the purposes of this tutorial, you won't add a key, although you can learn more at the topic License your app at the Lite level.
When users run the app on a smartphone, they will see alternative routing options based on their smartphone's capabilities.
- Close the Santa Monica Trails app.
Customize your app with code
The Nearby template already contains all the code necessary for a usable native app. But what if you wanted your app to do more? By changing the app's code, you can add capabilities that would otherwise not be possible with the template alone.
Next, you'll edit your app's code to add text-to-speech functionality. This functionality will allow the app to use smartphone hardware to read out the name of and distance to the closest trailhead.
- In AppStudio, in the list of apps, confirm that your Santa Monica Trails app is selected. In the side pane, click Edit.
Qt Creator opens, showing the code files associated with your app. The Nearby template has files that use Qt Modeling Language (QML), a language designed for creating user interface-centric applications such as apps.
You'll add one new QML component to one of the QML files.
- If the Take a UI Tour window appears, click Cancel.
- In the Projects pane, in the Nearby folder, expand the Nearby folder and the views folder. Double-click the NearbyMapPage.qml file.
The file is displayed in the editor pane of Qt Creator. Lines 17 through 31 of the file involve importing various libraries and frameworks necessary to run the rest of the code. First, you'll add a line to import an app framework that allows text-to-speech functionality.
- After line 28 (import ArcGIS.AppFramework.Platform 1.0), press Enter to add a line. On the new line (29), add the following code:
import ArcGIS.AppFramework.Speech 1.0
Next, you'll add a QML component that uses the text-to-speech functionality. You'll give this component the ID tts (text-to-speech) so that you can refer to it when users search for trails.
- Scroll to line 124. Add the following component (be sure to keep the indentations):
TextToSpeech { id: tts }
You'll refer to the new QML component after the map layers are queried during a search. When users complete a search for nearby trails, the text-to-speech functionality will say the name of the trail and its distance away.
Your code will use the tts component you added and the say component, which prompts the text-to-speech functionality to say something. Your code will define what is said by combining references to attributes of the features on the map and text strings.
- Scroll to about line 2600 (//if results are not empty). Depending on how you added the previous lines, the line number may be slightly different.
This part of the code defines what is done if a search is completed and has valid results.
- After the line mapPageCarouselView.highlightResult(mapView.featuresModel.get(0).initialIndex); (about line 2606), press Enter. In the empty line, paste the following code:
tts.say(mapView.featuresModel.get(0).search_attr + " is " + mapView.featuresModel.get(0).distance + " miles away");
Tip:
Alternatively, press Ctrl+F to find search for specific words.
- On the ribbon, click File and choose Save "NearbyMapPage.qml".
Tip:
Alternatively, press Ctrl+Shift+S to save your changes.
- Press Alt+Shift+R to run the project.
The project runs and a window appears with general messages about the code. When the project finishes running, the desktop version of your app appears.
- If your desktop has text-to-speech functionality, start the app and click the map near a trail. (Ensure your desktop's volume is turned on.)
Now, when you run the app on a device that has text-to-speech functionality, the closest search result is read out loud by your device.
- Close the desktop version of your app.
Upload your app
Your app is finished. You'll upload it to your ArcGIS organization. Optionally, you'll then test it on a mobile device.
- In AppStudio, confirm that you are signed in to your ArcGIS account.
- In the list of apps, confirm that your Santa Monica Trails app is selected. In the side pane, click Upload.
The AppStudio Upload window appears. This window has options to share your trail with your organization or the public. For now, you won't share the app, although in a real-world scenario you would eventually want to share it publicly.
- In the AppStudio Upload window, click Upload.
When the upload finishes, a message informs you that the upload was successful. If you make later changes to the app, you can update the app by uploading it again.
- Close the AppStudio Upload window.
Optionally, you can test your app on a mobile device.
- On your Android or iOS mobile device, download and install ArcGIS AppStudio Player from Google Play or the Apple App Store.
Note:
You can also create an app installation .apk file for Android and an .exe file for Windows to install the native app on your device. These steps are the same for any AppStudio app. You can follow the steps described in the Create app installation files section of the Use ArcGIS AppStudio to build a 311 mobile app tutorial.
- Open AppStudio Player.
- Click Sign In. For ArcGIS Online, click Sign In and sign in using your ArcGIS account.
Your list of apps appears. The list includes your trails app.
- For the Santa Monica Trails app, click the download button.
- Once the app finishes downloading, click it to open it.
- In the app, click the map near a trail and search for nearby trails. Confirm that the first result in the card carousel is read to you by your device. (You may need to turn on your device's volume.)
From one web map, you've created a web app that can be used in a browser and a customized native app that can be run on a smartphone. Your apps can be used by visitors to a national park to plan their trips more effectively.
You can use Instant Apps and AppStudio to create apps for a wide range of uses. Try out some of the other app templates to make engaging, interactive apps tailored to your needs and audience.
You can find more tutorials in the tutorial gallery.
