Tutorial 1: Creating a Web App

In this tutorial, you will create a Web GIS app that introduces the main attractions or points of interest (POIs) in the city of Redlands, California.

*Adapted from Getting to know GIS (Pinde Fu, 5th ed.)

TASKS

1: Publish a hosted feature layer from a CSV file and add attachments
2: Add a field to your layer and edit the attributes
3: Create a web map
4: Create an instant web app using a template
Questions and answers
Assignment
Resources

Data:

A CSV file contains data for the main POIs in Redlands, including longitude, latitude, names, and descriptions. A folder contains photos and other attachments for these POIs.

Functional requirements:

The web app should display POI locations with descriptions and include a basemap.
The web app should be engaging and easy to use.
The web app should work on desktops, tablets, and smartphones.

System requirements:

A web browser
ArcGIS Online account with Publisher privileges

1.1: Publish a hosted feature layer from a CSV file and add attachments

Certain configurable apps require specific kinds of data content. Attachment Viewer requires a feature layer with attachments. You can create the feature layer in many ways. This section creates the layer from a CSV file.

Fetch the data used in this exercise here, and unzip the downloaded file to a folder on your local machine.
Examine the downloaded Locations.csv file (e.g. in Microsoft Excel or a text editor), noting its data format.
This file has several POIs in the city of Redlands. The first row provides the header. Below that, each row contains a tour point, with the following fields:
- Name: A short name identifying the point.
- Caption: A description of the point. The caption can include HTML tags to format the text or provide hyperlinks.
- Long and Lat fields: You can describe geographic location by specifying longitude and latitude as Long and Lat (in decimal degrees), a single Address field containing a complete street address, or multiple fields (such as Address, City, State, and ZIP). This tutorial uses Long and Lat.
In a web browser, browse to Duke’s AGOL portal (http://dukeuniv.maps.arcgis.com), and sign in using your class account credentials.
If you haven’t already, familiarize yourself with the links at the top of the page:
- Home returns to the home page.
- Gallery leads to featured maps, layers, and apps.
- Map goes to Map Viewer, used for creating 2D maps.
- Scene goes to Scene Viewer, used for creating 3D scenes.
- Notebook provides a web interface to create, share, and run Python notebook scripts for data science and data management (available only to users with this privilege).
- Groups takes users to the My Groups page, where you can create and join groups.
- Content links to the Content page, where you can see your own content, your group’s content, and your organization’s content that is shared with you.
- Organization leads you to a page about your organization. If you are an administrator of your organization, the page includes tools you can use to manage your organizational settings.
- In the upper right of the page, the Search box and button allow you to search for content in ArcGIS Online.
- The Apps button, also called the app launcher, provides a convenient window from which organization members can open the web apps available to them.
Click Content, and click the icon to create a new folder called “Tutorial1”.
Add the Locations.csv file to your new folder either by dragging and dropping it or by selecting the New item button.
Ensure that Add CSV and Create a Hosted Feature Layer or Table is checked. Click Next.
On the Fields page, accept the defaults and click Next.
On the Location Settings page, notice that Latitude is set to the Lat field and Longitude is set to the Long field. Click Next.
In the next page, note that the Title box is in red; you need to rename your AGOL resource something unique to the entire organization. Add your name or NetID to the resource name (omitting spaces or replacing with underscores).
Under Folder, ensure the file is going into the Tutorial1 folder created in step 1.
Under Tags, type ENV790 and Tutorial 1. Press Enter after each tag, and click Save.

The item page appears after your file is published as a hosted feature layer. Each item in ArcGIS Online has an item page with a variety of information and settings organized on tabs: Overview, Data, Visualization, Usage, and Settings.
Click each tab to familiarize yourself with the tabs on the item details page.
- The Overview tab includes basic metadata information about an item. The tab also includes options to open, share the item, edit basic metadata, and add comments.
- The Data tab displays the attribute data of hosted feature layers. It also allows item owners to edit the attribute data and add or delete fields.
- The Visualization tab allows you to change the default properties, such as style, filter, pop-ups, and labels, of a feature layer.
- The Usage tab allows owners to see the usage statistics of the layer over time.
- The Settings tab allows owners to enable editing and configure other related options for a hosted feature layer.
On the Overview tab, under Layers, click the Locations layer.
In the Attachments section, turn on the Enable Attachments toggle button.

Next, you will upload attachments to this layer.
On the ribbon, click the Data tab.

You can see your layer’s attributes in table format.
In the first row, which is Esri, under the Photos and Files column, click Add.
In the Photos and Files window, click on the Add tab, and browse to chapter1\attachments\Esri.JPG, click Open, and click Upload.
Click Choose File again, browse to Esri.pptx, click Open, and click Upload. After the upload is complete, click Close.
Repeat the preceding step to upload Redlands_Bowl.JPG for Redlands_Bowl, University_of_Redlands.JPG for University of Redlands, and Citrus_Plaza.JPG for Citrus Plaza. LOOK Cinemas doesn’t have any attachment.
Click the back arrow on the upper left of the page next to the layer title.

This will direct you back to the Overview tab of your layer’s item page.
Under Share, click Edit, click Everyone (public) to share your layer, and click Save.

This way, your web users can access your layer without having to sign in.

You have successfully created a feature layer from a CSV file and added attachments to it.

1.2: Add a field to your layer and edit the attributes

In this section, you will add an ID field to your layer so that you can display the photos in the sequence you want.

Note: If you are returning to this exercise and need to reorient yourself, go to Content, find the Locations feature layer in the Chapter 1 folder, click Locations Feature Layer (hosted) to open its item page.

Click the Data tab.
Click the Fields tab.
Click the Add button.
Specify the Field Name as id , Display Name as ID, and Type as Integer. Click Add New Field.

►Next, you will input the ID for each location.
Click the Table tab.
For each row, double-click the ID cell to fill in a value. Set ID to 1 for Esri, 2 for Redlands Bowl, 3 for University of Redlands, 4 for Citrus Plaza, and 5 for LOOK Cinemas.

You added an attribute field and edited its values. You will learn more data editing capabilities that ArcGIS Online provides in the following chapters.

1.3: Create a web map

In this section, you will add your feature layer in Map Viewer, select an appropriate basemap, and configure its style and pop-up.

Note: If your default Map Viewer is Map Viewer Classic, you need to click the drop-down arrow next to Open in Map Viewer Classic, and choose Open in Map Viewer.

On the item page of your feature layer, click Overview, and click Open in Map Viewer.

Map Viewer opens and displays the locations of the POIs on the map.
The Map Viewer helps users create, configure, and view web maps.
- The Content toolbar is on the left. It provides functions such as adding layers, changing basemaps, and saving maps.
- The map is in the middle.
- The Settings toolbar is on the right. It provides functions such as changing layer style, configuring layer pop-ups, search, sketch, and measurements.
If your toolbars are collapsed, click the Expand button on the lower left of the page to expand the Content toolbar, and click the Expand button on the lower right of the page to expand the Settings toolbar.
Familiarize yourself with the Content and Settings toolbars.
On the Content toolbar, click the Basemap button, and click Community Map.

►Next, you will set the symbology for your feature layer.
On the Content toolbar, click the Layers button.
In the Layers pane, click the Locations layer to select it.
On the Settings toolbar, click the Styles button to display the Styles pane.

This layer is displayed using the Location (single symbol) style by default.
In the Styles pane, click the Style Options button.
In the Style Options pane, click the Edit button (pencil icon) to edit the symbol.
In the Symbol pane, under Symbols, click the drop-down list, click Government, and click the dark-orange pin symbol.
In the Symbol pane, under Size, set the size to 32.

You can also review other symbols and choose a different symbol.
Click Done to close the Style Options pane.
Click Done to close the Styles pane.

►Next, you will configure the layer pop-up to display the name, caption, and attachments for each point.
On the Settings toolbar, click the Pop-ups button.

The Pop-ups pane appears. A pop-up can have a title, attributes, and attachments.
Click Title, and clear the existing values. Type Name: . (Keep a space after the colon.) Click the curly brackets to the right, and select the Name field.
Click Fields List to expand the list, click the “X” following the field names, and delete all fields except the Caption field.
Click the Attachments section, and click Display Attachments as List.
Click a POI in the map, review the pop-up you just configured, and close the pop-up.
Pan around the map to an extent that you want to use as the initial extent when your web app opens.
On the Content toolbar, click the Save and Open button, and click Save As to save your web map.
In the Save Map window, title the map Redlands Attractions, add the tags ENV790, Tutorial 1, save the map in the Tutorial1 folder, and click Save Map.
On the Content toolbar, click the Share Map button, select Everyone, and click Save.

You have created a web map that has your feature layer, with the style and pop-up you configured.

1.4: Create an instant web app using a template

This section will transform your web map into a web app using the Attachment Viewer template.

From the Web Map’s content toolbar, click the Create App button on the Content toolbar.
Select Instant Apps.

The Instant Apps web page appears, showing a gallery of templates listed in alphabetical order.
Find the Attachment Viewer template, and click Choose.
In the Create App window, keep Title as Redlands Attractions but append your name to the title (to make it unique). For Save in Folder, choose Tutorial1. Click Create App.

[If prompted with a Welcome window, dismiss it or review the hints, click the Next button, and click Got It to close the window.]

Your app is created, and you are directed to the settings mode of the app. The left side is the configure pane, and the right side is the preview pane. Express mode is the default settings mode. It contains the necessary tools to get an app up and running.
Click OK to dismiss the Welcome window.
In the configuration pane, click Step 2. About, set App title as Redlands Attractions by [your name], and turn off the Introduction Panel toggle button.

The preview pane refreshes. You can see that the title has updated. Deselecting the introduction panel will not include the Welcome window when users open the app.

►Next, you will switch to the Full Setup mode to perform more detailed settings.
In the upper left of the page, turn off the Express toggle button. Confirm your choice if prompted.

All Settings mode provides all the settings included in an app. You can search for settings to quickly find what you need.
In the upper left, click Search Settings, type App layout, and choose App Layout.

The default app layout is attachment focused, with attachments taking up most of the screen.

►Next, you will configure your points and attachments to appear in the sequence of the ID field that you created at the beginning of the chapter. This order will guide users as they view the locations.
In the Attachments pane, select Only Display Features with Attachments.
[The POI LOOK Cinemas doesn’t have an attachment, so it will disappear from the map.]
Under Select Layer Field(s) to Sort By, select the Locations layer, click the Field button, click ID, and click Done.
On the preview side, explore the app. At the top of the map pane, click the Previous/Next location buttons to go through the locations in the sequence of the ID field values. You can also click any locations on the map directly.
In the attachment pane, review the attachments displayed. Notice that the Esri location has two attachments: a JPG image and a PPT file. The JPG image appears in the media pane and the PPT file appears as a link in the pop-up.
Click the Views button on the left toolbar, and choose Portrait and then Landscape to preview those mobile device orientations. Choose Desktop to return to the desktop view.

Note: Supported attachment types such as JPG, PNG, GIF, MP4, MOV, and PDF are removed from the pop-up pane because they are displayed in the attachment pane. Other attachment types, such as DOC, PPT, and ZIP, display in the feature content panel as hyperlinks. If a point has multiple attachments, you can click the Previous/Next attachment buttons to view them all.

►Next, you will switch the layout to map focused.
In the Attachments pane, under App Layout, select Map Focused.

The preview pane reloads. The map now fills most of the screen. The gallery displays the attachments of the locations in the current map extent.
Zoom and pan the map. Notice that the gallery displays only the attachments for those points within the current map extent.
Click an item in the gallery to view the feature’s attachments, display the pop-up, and highlight the corresponding location.
Above the attachment image, click the View in Full Screen button to display the photo in full screen. Click X to exit the view.

Your app and its settings are automatically saved as a draft. Next, you will publish and share your app.
Click the Publish button, and click Confirm to publish your app.

The Share window reminds you that the app is not shared with the public.
Click Change Share Settings.
Select Everyone, and click Save.

If your web map and feature layer are not shared with everyone, you will be prompted to share those items with everyone.
Click Exit twice to confirm your choice.
On the item page, click View.

Your finished app opens in a new tab. You can find a button on the item page to get a short URL for easy sharing. If your ArcGIS Online organization settings allow social media links, you can find buttons for sharing your app to Facebook and Twitter. Attachment Viewer can be viewed on mobile and desktop browsers.

In this tutorial, you published a feature layer using a CSV file, added attachments, added another attribute field, entered its values, added the layer to a web map, configured the layer style and pop-up, and created a web app using the Attachment Viewer template. This app is user-friendly and cross-platform. The app meets all the requirements listed earlier in this chapter. You will find Attachment Viewer applicable and useful in other chapters, particularly the chapter on Mobile GIS.

Questions and answers

1. How can I get the latitude and longitude coordinates of a location or address?

Answer: You can use Map Viewer in ArcGIS Online to do so.If you know the location, you can go there directly on the map. If not, you can use the Search button to find the location by address. After the address is found and the map is centered to the location, zoom in on the map as much as you can. Next, on the Settings toolbar, click the Map Tools button, click the Location button, and click the desired location on the map. The location’s longitude and latitude appear in the result window.

2. Locating longitudes and latitudes manually one by one can be slow work. Is there a more efficient way to define the locations of my points?

Answer: Yes, you can use addresses, feature classes, or geotagged media if you have them. In your CSV file, specify the addresses of your points in one or multiple address fields such as Address, City, State, and ZIP. When you create your feature layer, ArcGIS Online will geocode these addresses and find their locations automatically. Refer to chapter 2.If you have your tour points in a shapefile or file geodatabase, you can zip your shapefile (do not include a folder) or file geodatabase (include the folder of the file geodatabase), and create your feature layer using this zip file. If you have geotagged media, for example, photos taken using your smartphone with location enabled for your camera, you can zip these files, create an item from this zip file, and choose Photos with Locations as the item type. ArcGIS Online will create a hosted feature layer from it.

3. After publishing my CSV file to ArcGIS Online as a feature layer, I updated the CSV file on my computer. Will the change automatically update in my feature layer, web map, and web app?

Answer: No. After your data is published, it is uploaded to the cloud. Your feature layer, web map, and web app use this cloud copy rather than your local copy. You don’t have to republish your CSV file and re-create your layer, map, and app; you can directly edit your feature layer in ArcGIS Online.

4. I submitted my homework URL, but my professors can’t access it. Why? How can I fix this problem?

Answer: First, check the item page to make sure that the layers, web map, and web app for this assignment are all shared with everyone (public). Next, check that you are sharing the app URL and not the app configuration URL. On the item page, there is a View Application button and a Configure App button. Click the View Application button and share the URL of the app. Your professor is not the owner of your app and can’t open the configuration URL of your app. Last, check (or ask your ArcGIS administrator to check) that your organizational settings allow anonymous access.

Assignment

Think of a web map idea that uses the technologies and techniques presented here. Be prepared to discuss your idea with the class in the next session.
Explore other options in your newly created web app. Make at least two changes and come to class prepared to discuss what changes you made.

Resources

arcg.is/0Ty8ye0