Turning Your Map into an App

The maps created earlier in the lesson offer interactivity in the form of zooming in/out, toggling layers on/off, accessing info about map features by clicking on them, changing the base map, etc.  This part of the lesson will begin by showing how to embed your Google and Esri maps within a separate web page.  After that, we'll look at tools developed by Esri that make it possible to incorporate even more interactivity -- to turn your map into an app.

Embedding a map

While it's sometimes preferable to share the link to your map -- allowing it to fill the viewer's browser window -- it can also be useful to embed the map within a page of content. 

1. Save this example page to your computer.  (Right-click on the link and choose Save.)
2. Open the page in a plain text editor of your choosing (e.g., Notepad).
3. Go back to Google My Maps and open the map you created earlier in the lesson.
4. Click the vertically oriented dots next to your map's title, then select Embed on my site from the list of options.
5. Following the instructions in the dialog that appears, paste the code for your map into the html document you opened for editing above.  Paste the code below the line that produces the My Google Map heading. 
   
   We'll get into HTML coding in the next lesson (probably more than you'd like), so don't worry if you don't fully understand everything that's going on in your HTML document.  One piece of the code you just pasted that's easy to follow is the fact that the map will be drawn with a width of 640 pixels and a height of 480 pixels.  You're welcome to change those values if you like.
   
   Now let's embed the ArcGIS Online map.
6. If your ArcGIS Online map is no longer open, go to our Penn State organization page, click My Content, click on the map you created earlier, then select Open > Open in map viewer.
7. Click Share, then EMBED IN WEBSITE.
   
   Note that ArcGIS Online provides a number of options for customizing the embedded map.  For example, it's possible to specify the dimensions of the map, and to include widgets such as a base map selector or legend. 
8. After making settings to your liking, find the wide text box just above the Map Options.  This box contains the HTML code required to embed your map within a web page.  Click the COPY button to the right of that text box to copy the HTML code to your machine's clipboard.
9. Paste that code into your HTML document just beneath the My ArcGIS Online Map heading.
10. Save your HTML document with a name like lesson1.html.
11. Using the File Explorer in Windows, browse to the document you just saved and double-click on it to open it in a web browser.  (If .html files aren't set to open in a web browser on your machine, you may need to right-click and select Open With.)

Configuring an app based on a template

The interactivity offered by these maps is nice, but you may find yourself in situations where you need to go further.  For example, maybe you want end users to be able to query the map's underlying data for features meeting certain criteria or to be able to edit the underlying data.  Esri offers a couple of different non-programming options for those looking to build apps with greater functionality.  The first of these is a set of templates that each meet a narrowly focused need (e.g., Edit, Query, Directions).  As the app developer, you select the desired template and make a relatively small number of configurations to tailor the app to your needs.  The second option is to use Web AppBuilder.  This option is more open-ended, allowing you to build a less narrowly focused app by picking and choosing from a set of widgets. 

We'll start with configurable app templates and to demonstrate their use we'll create an app for locating buildings on the Penn State Main Campus. 

1. In your Penn State ArcGIS Online organizational account, create a new map.
2. Add the campus building data as a layer by going to Add > Add Layer from Web and pasting this ArcGIS Server map service:
   http://maps.pasda.psu.edu/arcgis/rest/services/pasda/PSU_Campus/MapServer/1
3. Zoom to the central part of campus and style the layer as desired.
4. Save the map with the name PSU Buildings.  Be sure to add some tags that would aid in discovering the map (e.g., Penn State, buildings) and optionally enter a summary.
5. Click Share, then check the Everyone box to ensure your map is viewable to the public.
6. Click Create a Web App.  You'll be presented with a gallery of app templates on which you can base your own app.  Browse the templates to get a sense of the variety of apps available.  Note that how your map will look within a given template can be previewed by clicking on the desired template and selecting Preview. 
   
   We're going to create a Finder application so that users can search for buildings by name.
7. Click on the Finder template and select CREATE WEB APP.
8. Assign a title to the app (e.g., Penn State Main Campus Building Finder), add some tags that would aid in discovering the app (e.g., Penn State, buildings), optionally enter a summary, then click DONE.  After a few moments, you'll be presented with a Configure page.  The full set of configuration options for this template are organized into App Settings and Search Settings (links on the upper left of the page).  Let's start with App Settings, already shown by default.
9. The app initializes with a generic default logo and heading.  Set the Application title to Penn State Main Campus Building Finder.
10. Set the URL of application logo to http://www.e-education.psu.edu/geog863_gmaps/sites/www.e-education.psu.edu.geog863_gmaps/files/psu-facebook-avatar-180x180.jpg
    
    Note that while the image is actually 180 pixels x 180 pixels, it will be dynamically resized to 48 pixels x 48 pixels.
11. The Sea Blues option is the best match to the University's colors, so leave that as the Color Scheme.
    
    The Finder app includes a widget that allows the user to change the basemap.  The next two GUI options are used to specify a custom basemap collection, if your organization has one.  Our Penn State organization does not, so we will stick with Esri's default basemaps and skip to the Help Widget Text.
12. Under the Help Widget Text heading, enter:
    Penn State Main Campus Building Finder<hr><br>Click on the magnifying glass icon to find all buildings on the PSU University Park campus whose name contains your search text.
    
    The Finder app provides a box for the user to enter search text, displays a list of matching features and re-centers and zooms in to the selected feature.  As the developer, you get to specify what columns to search, how to display the matching features, the zoom level to zoom to and whether a popup window should open over the selected feature.  
13. Click the Search Settings link (upper left) to access these options.
14. Set the Hint to Enter part of a building name.
15. Leave the Zoom Level set to 16 and confirm that a popup window will be displayed.
16. Under the Find layers and fields heading, check the box next to PSU_Campus - PSU OPP Buildings 2016 to expand the list of columns in that layer.
17. Check the BLDG_NAME_ column.  (That's the column you want to search.)
18. Select the same layer and column under the Result display layers and fields heading.  (You want the building name to be shown in the list of matching features.)
    
    With that, you've made all the necessary settings to tailor this template to your specific purpose. 
19. Click Save and View.  You'll see a preview of your app embedded within the same Configure page, making it easy to go back to the app's settings should you see something you want to change. 
20. Click Close once you're satisfied with the app's settings.  You'll be taken to your app's "item details" page (also accessible from your "My Content" page).
21. To see the app as an end user would see it, click the View Application button to open it in a new browser tab and test your new app by clicking on the Find (magnifying glass) icon in the upper right of the window.
22. Try entering the name 'walker' and you'll see that the app finds two buildings that make up the Walker Clubhouse (associated with the PSU golf courses) and Walker Building (home of the Geography and Meteorology departments).  Note how the settings you made when configuring are reflected in the app.
23. Returning to the Details page, note the various pieces of metadata that can be edited (thumbnail, description, access use and constraints, etc.). 
24. Note also that you would come here and click the Configure App button if you wanted to make changes to the app. 
25. Finally, and importantly, if you want others to be able to use your app, you'll need to click the Share button.  In the Share dialog, you can select whether you want the app to be visible to Everyone, your Penn State group, or some other group to which you belong.  Select Everyone in this case.
26. And just to test your app's visibility, scroll to the bottom of the app's Details page and find the URL in the bottom right.  Click the Copy button to copy the URL to your clipboard, then paste that URL into a different browser where you are not signed in to ArcGIS Online.  If the app works properly, then you can safely share that URL with your end users.

Creating an app with the Web AppBuilder

Now let's try Esri's more open-ended option for creating apps.

1. Re-open your Buildings map and click again on the Share button.
2. Click Create a Web App and this time click on the Web AppBuilder tab rather than the Configurable Apps tab. 
3. Assign a Title of PSU Main Campus Buildings, add some tags that would aid in discovering the app (e.g., Penn State, buildings), optionally enter a summary, then click Get Started.  
   
   The Web AppBuilder will open with configuration options organized within tabs on the left side of the window and a preview of your new app on the right side.  The app is dynamically linked to the configuration options so that changes made on the left will be reflected on the right immediately.  The first of the configuration tabs is Theme, which provides access to settings that deal mainly with the app's appearance.
4. Try out some or all of the available themes (Billboard, Box, Dart, etc.).  The controls on the app preview are functional, so you can click on the Legend and Layer List controls to see how they would behave.  Depending on the theme chosen, you will see different options under the Style and Layout headings.
5. Click on the Map tab and note that it is possible to change the app's underlying Web Map and to override the map's initial extent and visible scale levels.
6. Next, click on the Widget tab.  This is where the real power of the Web AppBuilder becomes apparent. 
   
   The widgets available in Web AppBuilder can be categorized as off-panel or in-panel.  Off-panel widgets are built into the app and can only be toggled on/off.  Examples include the Scalebar and Coordinate widgets.  In-panel widgets, on the other hand, can be added to or removed from the app.  When adding an in-panel widget, the developer can position the widget within a container.  If you experimented with the various themes, you saw that the shape and positioning of the widget container is something that differs across the themes.  And for some themes, in-panel widgets can also be placed in numbered positions outside of the theme's container.
7. Hover your mouse over some of the off-panel widgets and note the following:
   - An eye icon appears in the widget's upper-right corner.  The widget can be toggled on/off by clicking on this icon.  Widgets that have been turned on are shaded dark blue, while those that are turned off are light blue.
   - Widgets that are toggled on will have their position within the app highlighted in red.
   - A pencil icon appears in the widget's lower-right corner.  The widget can be configured by clicking on this icon.  (For example, the Scalebar widget can be configured to show distance measured in English units, metric units, or both.)
8. Turn on the following widgets: Attribute Table, Coordinate, My Location, Scalebar, Overview Map.
9. Configure the widgets as follows:
   - Attach the Overview Map to the top-right corner and initialize it in its expanded state.
   - Modify the Attribute Table so that only the building name and abbreviation columns are visible.  (Note that this can also be done for the web map itself, which is an important consideration if you're using the map as the basis for multiple apps serving multiple purposes/audiences.) 
   
   Now let's modify the widgets that are held within your theme's widget container (or controller).
10. Regardless of the theme you selected, you should see a Set the widgets in this controller link near the top of the tab.  Click on this link.  You should see the Legend and Layers List widgets by default.
    
    For this simple map in which the title makes it clear what's being shown, a legend is unnecessary.
11. Hover your mouse over the Legend widget and click on the X in the upper right to remove it from the app.
    
    For the same reason, you could probably also remove the Layer List widget.  However, this widget provides a context menu of options that could be of interest to users.
12. Hover your mouse over the Layer List widget and click on the pencil icon to change its configuration.
    
    Note that the widget makes it possible to view a legend for each layer (by clicking on a small arrow to the left of the layer name) and to access a set of layer-specific actions through the context menu.  All of these items are turned on by default.
13. Uncheck the Show Legend box (again, not much point in a legend), the Enable/Disable Pop-up box and the Move up/Move down box (with only one layer on the map, these options will be disabled anyway).
14. Click OK to dismiss the Layer List dialog, then Save your app. 
15. Click the Launch button to open your app in a new tab and confirm that the various settings you've made have taken effect.
    
    Now let's check out some of the other in-panel widgets that are available.
16. Close the tab containing your running app and return to the Web AppBuilder tab.
17. Under the Widgets heading, click on the + sign to add a new widget.  In addition to the Layer List and Legend widgets that we've already seen, you should see many others including Basemap Gallery, Edit and Geoprocessing, among others.  Being able to switch basemaps is a nice feature to have, even in a very simple demo like this, so let's provide that capability.
18. Click on the Basemap Gallery widget and click OK.  You'll be taken immediately to a configuration panel, which for this widget provides the ability to remove basemap options.
19. Remove the Imagery with Labels (it differs little from Imagery in this area), Oceans (not applicable to this area) and Terrain with Labels (not intended for use at this scale) basemaps as options and click OK.
20. Click again on the + sign, add the Draw widget, check the box to Add the drawing as an operational layer of the map and click OK.  This will enable the user to add custom features and annotation as a separate layer.
    
    Now let's say you want the widgets to appear in a different order.
21. Click on one of the widgets and drag it to a new position.  You should see a red vertical line indicating where the widget will end up when you release the mouse button.
    
    Before leaving the Widgets tab, there are a few more points worth mentioning:
    - The Analysis widget provides access to several analytical tools that may be useful depending on the app's purpose (e.g., Create Buffers, Create Viewshed, etc.).  Keep in mind though that usage of these tools may consume service credits allocated to your ArcGIS Online organization.
    - The Edit widget can be used to develop online editing apps.
    - The Geoprocessing widget can be used to "wire up" your app to a geoprocessing task
    - Full documentation for all of Esri's widgets can be found at http://doc.arcgis.com/en/web-appbuilder/create-apps/widget-overview.htm
22. Click on the Attribute tab to move on to a set of options that help with branding your app.
23. Enter a sensible Title, such as Penn State University Park Buildings.
24. If you're not interested in advertising for Esri, clear the text in the Subtitle box or assign your own.
25. Download the Nittany Lion shield and assign it as the app's logo by hovering over the Logo icon, clicking the button that appears in the lower right and browsing to the image on your computer.  (It's not possible to link to an image hosted elsewhere as we did earlier with the configurable app.)  Note that the logo is not displayed for all themes.
26. Click on Add New Link, enter www.psu.edu in the first box (the text that you want to display) and the URL http://www.psu.edu in the second box.  Again, note that links are not displayed for all themes.
27. Finally, Save your app, then click Launch to see the app as an end user would.