In this course, we'll be spending the bulk of our time learning how GIS web applications can be built using a mapping Software Development Kit (SDK) created by Esri in combination with the core web development technologies of HTML, CSS, and JavaScript. However, before digging into those programming languages and that SDK, it's worth noting that Esri also provides non-programming tools for creating mapping apps. These tools don't provide the same level of control over the final product as one developed using code written on top of the SDK, but they might meet some of your app development needs. And as we'll see later in the course, it is possible to use tools in ArcGIS Online to handle certain parts of the app development (layer symbology, popup window content, etc.) and develop the rest of the app through coding.

Objectives

At the successful completion of this lesson, you should be able to:

• overlay your own data on top of an Esri basemap using ArcGIS Online;
• embed your maps within a web page;
• build applications around your maps (providing greater interactivity and functionality) through the use of development tools from Esri.

Questions?

Conversation and comments in this course will take place within the course discussion forums. If you have any questions now or at any point during this week, please feel free to post them to the Lesson 1 Discussion Forum. (That forum can be accessed at any time by clicking on the Discussions tab.)

Lesson 1 is one week in length. (See the Calendar in Canvas for specific due dates.) To finish this lesson, you must complete the activities listed below. You may find it useful to print this page out first so that you can follow along with the directions.

1.1 Building a Web Map

Several GIS technology vendors provide the means for non-programmers to create web maps without writing any code (e.g., Google's My Maps, CartoDB, ArcGIS Online), and the capabilities of these map authoring applications are increasing constantly. In this part of the lesson, we will explore Esri's ArcGIS Online (which I'll abbreviate as AGO hereafter).

1. Follow this link to the Penn State home page at AGO. You'll need to authenticate through Penn State WebAccess if you haven't already today. Once logged in, you should see the Home tab selected for the Penn State organizational account.
   
   If you completed GEOG 483, your first hands-on GIS project involved helping "Jen and Barry" find the best place to open an ice cream shop in a parallel universe where the cities and counties of Pennsylvania have different names. We're going to work with the data from that scenario again here (and later in the course), since it contains examples of each geometry type and some good attribute data for demonstration purposes.
2. Download and unzip the Jen and Barry's data. (Even if you still have these shapefiles from an earlier course, you may want to download this copy since the shapefiles are zipped and ready for upload to AGO.)
   
   This zip file contains a point shapefile (cities), a line shapefile (interstates), and two polygon shapefiles (recareas and counties). You can check out these shapefiles if you haven't encountered this scenario before, but hang on to the zip files since we'll be uploading them to AGO.
3. Click on the Map tab to open a new, empty web map.

4. On the Layer panel, click the down arrow next to the Add button, followed by Add Layer from File (see Fig. 1.1).
    

   

   Credit: J. Detwiler © Penn State is licensed under CC BY-NC-SA 4.0

5. Drag and drop the zipped cities shapefiles onto the Add Layer dialog.
6. AGO should recognize the contents of the zip as a shapefile. Click Next.
   
   As noted in the next panel, AGO is going to create a "hosted feature layer" from the uploaded shapefile. This is a layer published on the AGO platform that you'll be able to incorporate into web maps for use in various different development contexts.
7. Assign a Title to the layer -- it should default to match that of the shapefile, though you're welcome to give it a different name. You can also specify a folder, tags, and a summary, if you wish. Click Create and add to the map when done.
   
   Note that your hosted feature layer must have a title that's unique across the Penn State AGO organization. You may want to add your surname to the title to make it unique.
   
   After churning for a few moments, you should see the fictitious Jen and Barry's cities added to the map.
8. AGO will display the cities using a single symbol by default. To modify the symbology, click on the name of your layer within the Layers panel or click the Options (3 dots) button followed by Show properties. The right side of the map should change to display various properties of your layer, in categories such as Information, Symbology, Appearance, etc.
   
   Speaking of the "3 dots" button, note that this menu is where you'd go if you wanted to view the layer's attribute table or remove the layer from the map, among other options.
   
   As in desktop software, you can create a thematic styling of your data in AGO. For example, you might choose to symbolize the Jen and Barry's cities based on the POPULATION field, selecting a style of Colors and Amounts (size) or Colors and Amounts (color). We won't do that here, instead sticking with the Location (single symbol) style, but let's modify that symbol.
9. Expand the Symbology property group, if necessary, and click on Edit layer style.

10. Next, click on Style Options, then click on the current symbol that was assigned by default. A panel of symbol properties should pop out on the left of the symbol (see Fig. 1.2). 
    
    Note that through this panel, you can choose from several symbol categories (Basic Shapes, Firefly, Government, etc.). You can also customize a number of other properties, such as size, rotation, transparency, fill color, and the symbol outline.
     

    

    Credit: J. Detwiler © Penn State is licensed under CC BY-NC-SA 4.0

11. Select whichever symbol suits you.
12. To apply your change and wrap up your work with the layer's properties, click the X in the upper right of the symbol options panel, then click Done twice. 
    
    We're going to add the other Jen and Barry's data next, but first, we should save this web map.

13. About halfway down the black strip of buttons on the left side of the window, you should see a folder icon with a blue dot over it. (The blue dot indicates you have unsaved changes in this map.) Click this button, then on Save as.
     

    

    Credit: J. Detwiler © Penn State is licensed under CC BY-NC-SA 4.0

     

14. In the resulting Save map dialog, assign a Title of Jen and Barry - <your name or ID>. Optionally, add some tags and a summary, or change the folder where the map will be saved.
15. Click Save map when finished. You should now see the title you assigned in the upper left of the window.
    
    To add the interstate data, we need to import it to AGO as we did earlier for the cities.
16. Follow the steps used earlier to incorporate new hosted feature layers into your map from the interstate and county shapefiles. You're welcome to also import the recareas, though you won't be asked to work with them in this walkthrough.
17. With the interstates and counties added, let's symbolize the interstate layer using values from its TYPE field.
18. Select the interstates layer in the Layers panel to display its information in the properties panel on the right side of the map. Under Choose Attributes, click the + Field button.

19. Select the TYPE field, then click Add. Note that AGO intelligently applies the Unique symbols drawing style (based on the field holding text strings rather than numbers).

    

    Credit: J. Detwiler © Penn State is licensed under CC BY-NC-SA 4.0

20. Click Style options. You should see a separate symbol for each of the two unique values in the TYPE field: State Route and Interstate. An Other symbol will also be created automatically.
21. Modify the symbols to your liking. (A thicker line is intuitive for the Interstate features, a setting that can be made by changing the Width property.)
22. Again, click X and Done twice when you're finished symbolizing the interstate layer.
23. Following the same sort of procedure, add the counties layer to the map and set its symbology so that the county features are drawn using a hollow fill. (Polygon layers are symbolized with a fill color by default, but that can be disabled by clicking the No color button under the Fill Color heading.) You may also want to modify the outline properties.
    
    Next, let's explore the pop-up windows that appear when the user clicks on a map feature.
24. Click on one of the city's features to bring up a pop-up window.
    
    Because the cities' features overlap with the counties' features, the pop-up results will include features from both layers. You should see text at the top of the window like "1 of 2" or "1 of 3" indicating this.
25. Click on the right arrow to cycle through the pop-up results and note that the matching feature is highlighted on the map.
    
    There are a number of improvements that could be made to the information displayed in this pop-up.
26. Display the properties of the cities layer as you did earlier. It will probably default to showing the drawing styles.

27. In the strip of buttons running along the right side of the window, click Pop-ups.
    
    Values from columns in the layer's attribute table are displayed in the pop-up by enclosing the column within braces. Thus, the pop-up Title is set to display the value from the layer's NAME column using the expression {NAME}.
     

    

    Credit: J. Detwiler © Penn State is licensed under CC BY-NC-SA 4.0

    All of the layer's fields -- with the exception of FID -- will be included in the pop-up by default, but this can be customized.

28. Click on Fields list, then on the x beside the ID, X, and Y fields, to exclude those fields from the pop-up content. Note that the pop-up that appears over the map is updated dynamically in response to your modifications.
29. It's possible that the fields won't be listed in a logical order. Clicking on the 6 dots just to the left of the field name, click and drag the fields as necessary to order them as follows: NAME, POPULATION, UNIVERSITY, TOTAL_CRIM, CRIME_INDE.
    
    There are other settings that can be applied to make the pop-up more human-friendly. For example, some of the field names are abbreviated and/or include underscores. And the numeric fields display two digits after the decimal point, but that is meaningless for those fields.
30. Looking again at the strip of buttons along the right, click on the Configure Fields button (one below the Popups button).

31. Click on the TOTAL_CRIM field and, in the panel that appears to the left, give it a new Display name and set the Significant digits property to 0 decimal places. Click Done to dismiss this panel.
     

    

    Credit: J. Detwiler © Penn State is licensed under CC BY-NC-SA 4.0

    Following a similar process, make similar improvements to other fields as appropriate.

     

32. Once done modifying the layer's settings, click on its entry in the Layers panel to toggle off its properties panel.
    
    Test your changes by clicking once again on a city's feature.
    
    Note that it is possible to customize pop-ups further (e.g., to string together values from multiple columns) or to display media such as images and charts. 
    
    Challenge: The UNIVERSITY field holds a 1 for cities that have a university and a 0 for cities that do not. This would be a bit more human-friendly if it displayed as Yes/No (or True/False). If you can work out how to implement such a change, feel free to share your solution in the Lesson 1 Discussion Forum.
    
    We can also choose to utilize a different base map.

33. In the strip of buttons running down the left side of the window, click on the Basemap button and choose one of the options. (A light base map is often preferable to a dark one, since your layers will stand out better.)
     

    

    Credit: J. Detwiler © Penn State is licensed under CC BY-NC-SA 4.0

34. Be sure to Save the changes you've made to your web map.
35. Finally, make your map visible to others by clicking Share map (also on the left-hand toolbar).
36. Set the map's visibility to Everyone (public), as we'll be embedding this map in a web page in a moment, then click Save.
    
    Unless you also made the map's layers public -- the walkthrough didn't tell you to -- you should see a dialog warning you that they won't be visible, but also giving you a chance to rectify that.
37. Click the Review sharing button to see what layers also need to be shared, then click Update sharing to make them public as well.
38. To confirm that others will be able to see your map, try opening the URL in another browser (e.g., use Edge if you're currently working in Chrome).

In this section, we've been able to build a useful interactive web map without any programming. Move on to the next page to see how to take your ArcGIS Online map further -- still without programming -- by embedding it within a web page and using it as the basis for a web application.

The map created earlier in the lesson offers interactivity in the form of zooming in/out, toggling layers on/off, accessing information about map features by clicking on them, changing the base map, etc.  This part of the lesson will begin by showing you how to embed your map 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.

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 web page. 

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. If your ArcGIS Online map is no longer open in the Map Viewer, please reopen it now.
    

4. On the black strip running along the left side of the window, click More (the three dots below the Share button), then Embed Map.

   Credit: J. Detwiler © Penn State is licensed under CC BY-NC-SA 4.0

   
   Note that AGO provides a few options for customizing the embedded map.  For example, it's possible to include the map's title and a legend. 
    

5. After making settings to your liking, click the Copy HTML button in the lower right of the window to copy the HTML code to your machine's clipboard.

   

   Credit: J. Detwiler © Penn State is licensed under CC BY-NC-SA 4.0

6. Paste that code into your HTML document just beneath the My ArcGIS Online Map heading.  Double-check the URL to your map.  If it doesn't include the http: protocol, you will need to add it in front of //pennstate.maps.arcgis.com in the html code for your map to connect properly.

   

   Credit: J. Detwiler © Penn State is licensed under CC BY-NC-SA 4.0

7. Save your HTML document with a name like lesson1.html.
    
8. 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.)

The interactivity offered by this map 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 number of different non-programming options for those looking to build apps with greater functionality. Among these is Instant Apps. As the app developer, you select the desired template and make a relatively small number of configurations to tailor the app to your needs. Another option is to use Experience Builder. 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 Instant App templates and demonstrate their use by creating an app for locating buildings on the Penn State Main Campus.  

1. In your Penn State AGOL organizational account, open a new Map in the Map Viewer.
2. Add the campus building data as a layer by choosing Add layer from URL from the Add dropdown menu on the Layers panel and specify this ArcGIS Server map service:
   https://mapservices.pasda.psu.edu/server/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 map, then check the Everyone box to ensure your map is viewable to the public.

6. Click More > Create app. (Again, More is the button below Share map.)

   

   Credit: J. Detwiler © Penn State is licensed under CC BY-NC-SA 4.0

    

   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 templates 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 Sidebar application and configure it so that users can search for buildings by name.  The Basic template would be appropriate too, though it doesn't appear to offer a way of displaying usage instructions through a splash screen, something I'd recommend doing here.

7. Locate the Sidebar template and click Choose.
8. Assign a title to the app (e.g., Penn State Main Campus Building Finder Instant App), add some tags that would aid in discovering the app (e.g., Penn State, buildings), optionally enter a summary, then click Create App. After a few moments, you'll be presented with a page for Configuring the app.  The app configuration process defaults to an Express mode, which presents a set of essential settings to consider in five categories.
   
   If it's your first time with Instant Apps, you'll be presented with a dialog of tips before you can begin configuring.
9. Read over the tips, clicking Next to move from one to the next, then Done when you've read the last tip.
10. Go to the Step 1 settings and note that the Map is already selected.  This makes sense as you just chose to create an app from the Map Viewer, but you'd have the ability here to select a different map if you wanted.
11. Click Step 2. About to move on to Step 2, which involves providing info that will help the user understand the purpose behind your app.
12. Confirm the Header is toggled on and set the App title to Penn State Main Campus Building Finder.  
    
    The Step 2 settings offer one way to provide user instructions through an Introduction window.  This adds an I icon to the map that the user can click on to get info on the map's purpose and/or instructions.  Unfortunately, it can't be set to open when the app loads.  There is another option that I like a bit better, so leave the Introduction panel toggled off.
13. Click Next to move on to Step 3.
14. A legend is probably not necessary in this scenario, so toggle the Legend option off.
15. Displaying info on selected buildings in a side panel is a nice feature, so leave the Pop-up panel toggled on.
16. The Details panel should be enabled by default.  It is the other way to provide user instructions.  Edit its content to appear as follows:
    
    Welcome! Enter a text string in the search box to find all buildings containing your search string.
    
    Specify that it should also be open by setting the Select which panel to open at start option (top of the Step 3 settings) to Details.
17. Click Next again to move on to Step 4, which presents a number of interactivity settings.  Take a moment to look over the available options, clicking on their info buttons if you're unsure what they mean.  
    
    The goal of this app is to provide the user with the ability to find a building by name, so we want the Search widget to be enabled.  (It is by default.)  However, its default behavior is to pass the entered text to the ArcGIS World Geocoding Service, which is not what we're looking for.  Let's configure the app to use the buildings layer from the map as a Search source.
18. Under the ArcGIS World Geocoding Service source, click Add a source.  You should be presented with options for specifying a layer source from a URL or from the map.
19. Choose Map.  In this case, the map contains just a single layer, which you should see listed.
20. Click on that buildings layer to select it.
21. Set the Layer Name to PSU Campus Buildings.
22. We could set the Placeholder text to something more context-specific, but it would only appear if we were going to allow the user to select from multiple search sources (which we won't be doing).  So leave this setting unchanged.
23. From the Search field dropdown list, select BLDG_NAME_ .  Note that you could add other fields to search as well, if desired.
24. Click Done to complete the addition of the new source for the Search widget.  You should now see both the geocoding service and the buildings listed as sources.
25. As we don't really need to support geocoding, click on the three dots next to the Geocoding Service source, then click Delete.
26. Finally, confirm that the Search open at start option is toggled on.
27. Click Next to move on to the last group of settings, which control the theme and layout of the app's widgets.  We'll leave these settings on their defaults, but note that we could choose a Light or Dark theme and move the widgets (a Home button, Zoom controls, the Search widget, and a Scalebar widget) to different positions.
28. Click Publish and then Confirm to complete the configuration of the app.
    
    After a few moments, you should be presented with a dialog containing some sharing options.  Note that the app is not shared with the public by default.  You have the ability to change that here if you wish.  You'll also see buttons for sharing through social media and code that you could copy if you wanted to embed the app in a webpage like we embedded a web map earlier in the lesson.
     
29. Click Launch to have a look at your app as an end user would see it.
    
    The Details panel should be open on load, showing the user instructions.
     
30. Try testing the search box (e.g., for Pattee Library) to confirm that it's working properly. 

Now that you've seen how to quickly put together an app using a couple of different configurable templates, let's have a look at an option that provides a bit more flexibility.

As you may have seen while working through the earlier parts of the lesson, another platform where your web maps can be utilized is the Experience Builder.  This is a good option if you're looking for greater flexibility than is available with the Instant App templates, though that comes with the cost of having to handle more of the development yourself.  Let's walk through creating a similar building finder app on that platform.

1. Re-open your Buildings map using the Map Viewer, select More > Create app, then Experience Builder.
   
   You'll be presented with several templates to use as a starting point.  Each one is shown in wireframe form to give you a quick preview of its widget layout.  Note that you can hover over these wireframes to get a description of the template or click the Preview buttons to get a better idea of the template's layout.  A number of templates could work here; let's go with Foldable.
2. Click the Create button associated with the Foldable template.
3. Feel free to go through the short tour of how Experience Builder works, or click Skip.
   
   Where Instant Apps are designed to get an app up and running quickly by walking through a short set of numbered steps, Experience Builder is much more open-ended and can appear overwhelming at first.  But let's break down the most important aspects of the interface.
   
   The largest panel, in the middle, shows your app in a sort of design view referred to as the canvas. 
   
   To the left of the canvas is the sidebar, a panel whose contents depends on which of the tabs on the very left side of the window is selected.  These tabs, working from top to bottom, allow you to add new widgets to the app, access the widgets already included in it, define the data used by the app, set an app theme, and make general app settings.
   
   To the right of the canvas is a settings panel, which shows settings associated with whatever widget is selected either in the sidebar or the canvas.

4. If it's not already selected, select the Page tab.
    

   

   Credit: J. Detwiler © Penn State is licensed under CC BY-NC-SA 4.0

   
   On the canvas, you should note a "fixed window" -- having an ID of  Window -- resembling a splash screen.

5. If the canvas is zoomed in on your app and you'd prefer to see all of its elements, you might like the Fit width to current window button, the second button in from the right side of the window, in the narrow strip of controls running along the bottom of the window.
   
   "Window" contains a placeholder text element with a default ID of "Text 5" that you can modify to your liking. 
    
6. Double-click on the Text 5 element to enter editing mode on the element.
7. Highlight the title text at the top of the element and set it to Campus Buildings Map.
8. Click on the image embedded within the Text 5 element to select it.  You should see that many of the properties in the Text format section of the Properties panel become grayed out because they don't apply to images.  However, if you look closely, you should be able to find the Image button in the middle right of the Properties panel.
9. Click the Image button, then in the Select an image pop-out panel, go to the URL tab and set the URL to /geog863/sites/geog863/files/PSU_UPO_RGB_2C.png.
10. Replace the paragraphs of Latin placeholder text below the image with Enter a text string in the search box to find all buildings containing your search string.
    
    We won't change anything else in the Window widget, but you may want to take a moment to check out some of the other settings available to you, such as the additional settings that appear if you toggle on the Interaction switch.
11. Finally, looking again at the sidebar panel (to the left of the canvas), hover your mouse over the Window entry.  You should see a small "word balloon" icon that is identified as the Set as splash button.  Click on this icon to turn the Window widget into a splash screen.  (You should see the word balloon icon persist in a lit-up state after clicking, indicating that the splash setting is turned on.) 
    
    Having made the Window into a splash screen, you'll want to make it possible for the user to dismiss that screen!
12. Select the Window widget, then check the Click outside to close Window checkbox in the Properties panel.
13. To access the map and other widgets in the background, click on the Page tab at the top of the sidebar.  (The Window tab has been selected up to this point.)  Again, the Fit width to current window button could come in handy here.

14. Looking at the info in the sidebar, note that the app is composed of a single page, and that page contains a Sidebar widget (named Sidebar), not to be confused with the sidebar panel that is part of the larger Experience Builder interface.  The Sidebar widget covers the entire canvas and is a container for other widgets.  As its name implies, it can be used to display widgets in a primary panel and a secondary panel (on the side).  
    
    The widgets nested within "Sidebar" can be viewed by expanding the containers listed in the Experience Builder sidebar.
     

    

    Credit: J. Detwiler © Penn State is licensed under CC BY-NC-SA 4.0

15. The First (primary) container holds a Fixed Panel widget (the strip running across the top of the app) and a Map widget.  The Second (collapsible side) container holds a Table widget.
16. Click on Sidebar in the sidebar and note in the Properties panel that, among many other settings, it's possible to specify which side the Second container is docked on, the size of the Second container, and whether it is Collapsed or Expanded by default.  Feel free to change any of these settings if you like.
    
    As noted, the Second container holds a Table.  Let's make sure that the widget is configured properly.
17. Select Table in the sidebar to view its settings.
    
    You should see that the table is automatically in Interact with a Map widget mode and wired up to your PSU Buildings web map.  You can confirm this by clicking the Expand button running along the bottom of the map, which should bring the buildings attribute table into view.  
    
    The info displayed in the table is less than ideal in a couple of ways: a) it includes several fields that aren't really of interest, and b) the first several records are associated with unnamed buildings.  Let's address these issues, starting with filtering out the unnamed buildings.  To do that, we'll need to create a new "view" of the buildings layer.
     
18. Change the Table widget's Mode from Interact with a Map widget to Select layers.
19. Click the New Sheet button, then Select data on the Sheet configuration pop-out panel.  You should see the name of your PSU Buildings map appear.
20. Click the + icon to the left of the map name to reveal the layers it contains.  (We only added 1 layer -- the one from PASDA whose title starts with PSU Campus...)
21. Click on that layer to select it, then click the X to close the Select data panel.  You should be seeing the Sheet configuration panel again.
22. At the top of the Sheet configuration panel, where the PSU Campus layer is shown as the data source, there is a dropdown list with Default selected.  The Default refers to the default view of the data.  Let's modify the default view so that it includes only named buildings.

23. Click on the view dropdown.  The Default view should appear with a small Settings button (gear icon) next to it.
     

    

    Credit: J. Detwiler © Penn State is licensed under CC BY-NC-SA 4.0

24. Click on the Settings button.  
    
    The resulting dialog contains 3 tabs: Filter, Sort, and Records.  Under the Filter tab, we could build a query that limits the rows returned to some subset, like just big buildings.  Under the Sort tab, we can define sorting rules, and under the Records tab, we can control the number of rows that the table displays.
     
25. Add a new clause under the Filter tab, specifying BLDG_NAME_ in the first box, followed by is none of in the second box.
26. Before entering anything in the third box, select Unique from the Source type dropdown.  This will generate a list of unique values for you to choose from, throwing them into the third box as options in a dropdown.
    
    The first two options will both appear empty.  I'm not sure exactly what's going on there; the first could be an empty string (''), while the second is a single space (' ').  Whatever the case, select both of those options, indicating that you want to exclude rows with those values from the table.  You should see unnamed buildings disappear in the preview of the table to the right.
     
27. Switch to the Sort tab and sort the records on BLDG_NAME_ in ascending order.  This will make the table much more user-friendly.
28. Click Apply Changes to finalize your changes to the default view of the buildings layer.  
    
    Back in the Sheet configuration panel, let's ensure that only fields of interest are being shown.
     
29. Under the Configure fields heading, select Customize.  You should see that there are several fields selected for initial display.  A field's visibility can be toggled off by clicking on the "eye" icon to the right of its name.    
30. Toggle off the visibility of most of the fields, leaving only the following visible: BLDG_NAME_ and Shape_Area.
    
    The table widget is now much improved.  Unfortunately, the settings made to filter out unnamed buildings and sort the table don't show up on the canvas when doing configuration of the experience.  
     
31. To confirm that those settings produced the desired effect, let's look at a preview of it. First, give the app a more descriptive name by clicking on the Untitled experience 1 text in the upper left of the window and entering a new name like Penn State Main Campus Building Finder (Exp Builder).
32. Next, click the Save button in the upper right to save the work you've done.
33. Now, click the Preview button (the "Play" icon just to the right of Save) to open your app for testing in a new tab.  
    
    You should see "Window" appear in the foreground as a splash screen.  (If you don't, you'll need to go back to Experience Builder, to the Window tab, then click the Set as splash button for the Window widget.)  And you should be able to access the table by clicking the small arrow in the bottom middle of the app.
    
    Now let's shift our focus to other parts of the app.  (Don't worry, we're almost done!)
     
34. Click on Image in the sidebar (found at Sidebar > First > Fixed Panel > Flow Row).
35. Set this image to display the PSU shield we used earlier in the lesson by going to the Properties panel > Select an image > URL tab.  Here's the URL again:
    /geog863/sites/geog863/files/psu-facebook-avatar-180x180.jpg
36. And let's make this image a link that opens the Penn State home page:
    Set link > Link to URL > https://www.psu.edu > Open in new window
37. Set the Title widget (named Text) to Penn State Campus Buildings and the Subtitle (named Text 2) to University Park.  You may need to widen the Text element and shift the Text 2 element a bit to the right to get the text to show up properly.
    
    Tip: If copying/pasting the title and subtitle text, try using Ctrl-Shift-V instead of Ctrl-V.  That will paste the text without also including the formatting.
    
    As in our earlier apps, the Legend and Layer List widgets aren't really needed here.  They could be removed individually by hovering over them in the canvas and clicking the X that appears in their upper-right corner or via the 3 dots menu in the sidebar.  Or...
38. Since we don't need any widgets here, click on the 3 dots menu next to Widget Controller in the sidebar, then Delete to remove that complete set of widgets from the app.  When asked whether you really want to do that, click Delete again.  
    
    The primary functionality that we want to build into this app is the ability to find a building by name.  You may notice that there's already a Search icon in the upper right of the map, which seems promising.  Let's see if we can configure that tool.
39. Select the Map widget in the sidebar.  In the settings panel, note that we could choose to use a different web map or web scene as the source for this widget.  
    
    Scrolling down through the settings, note the Tools section, where we can see that the Zoom and Home tools are toggled on.  Many other tools are available as well.  However, there doesn't appear to be a way to customize the Search tool.  Let's test out the app to see how that tool works.
40. Click Save and Preview again.
41. Open the Search tool and enter a test search term (e.g., Walker, for Walker Building, home of the Geography Department on the west side of campus).  Depending on your search term, you may get a hit on a campus building, but you'll also get back matches on streets, towns, etc.  It appears that the Search tool built into the Map widget is hardwired to use the ArcGIS World Geocoding Service. 
    
    How will we provide a way to search for matches in the buildings layer, then?  Well, we can configure the Map widget's built-in Search tool as we did earlier for the Instant App.
42. Return to the Experience Builder tab in your browser and expand the widget list within the Map in the sidebar.  You should see an entry for the Search widget you just tested.
43. Click on the Search widget to open its properties.
44. Click Add custom search sources, then the New search source button, and go through the same steps you followed earlier so that the widget is configured to search the BLDG_NAME_ field in the buildings layer.
45. Save your work and confirm that the app now allows for searching the building layer.
    
    One thing we haven't mentioned to this point is the device being used to view the app.  In your testing so far, you've probably viewed it using a relatively large screen (e.g., on a laptop).  However, apps may be, and often are, viewed on smaller-screen devices such as tablets and smartphones.
46. Looking at the app preview window/tab, slowly shrink the size of the window (particularly the width).  This is a relatively simple UI, so you won't see much difference at smaller sizes.  However, at roughly half the width of an average laptop screen, you should see that the Text 2 widget (which we set to display the text "University Park") should disappear.  This is the behavior you should expect when viewing the app on a typical tablet (e.g., an iPad).  
    
    If you continue shrinking the window to 1/4-1/3 your laptop width, you should see the UI change again, with the Zoom and Home buttons shifting from the upper left of the map to the lower right.
47. Return to the Experience Builder and note the three screen icons in the top middle region of the interface.  The leftmost, selected by default, is the button to select to configure the app for viewing on large screens.  The middle button is for configuring the app for medium (tablet-sized) screens, while the rightmost button is for small (phone-sized) screens.
48. Switch to the medium view and note that the Text 4 widget (subtitle) disappears, consistent with what you should have seen when resizing the app preview window.  In Esri's terminology, the widget's been moved to the app's Pending list.
49. To see this list, toggle off the Lock Layout switch (top-middle of the EB GUI).  Then open the Insert widget panel (+ icon) and select the Pending tab.  It's important to note that widgets on the Pending list should not be deleted altogether or they won't be visible on any device.
    
    Depending on the complexity of your app, you may need to switch to the medium and/or small views and reconfigure aspects of the UI.  As a very simple example, you might adjust the sizes of the Text and Text 4 widgets and shift the Text 4 widget beneath the Text widget in the medium and small views (and leaving them side by side in the large view).  (Alternatively, you might also be able to adjust the sizes such that they can fit next to each other at all screen sizes.)  You should experiment with adjusting the interface in the medium and/or small view to get a feel for the design process.

With that, you've built a few apps that could be implemented in real-world scenarios using both newer and older Esri technologies.  Best of all, you didn't have to write a line of code.  One thing I hope you'll take away from this exercise is to remember that these no-coding tools exist and to look for opportunities to take advantage of them.

Move on to the next page of the lesson to solidify what you've learned here with an assignment that requires you to build another app using data and requirements of your own choosing.

This lesson's graded assignment is in two parts. Here are some instructions for completing the assignment.

Part I

First, I'd like you to build a web mapping app with Esri technology - using one of the configurable (non-programming) solutions you learned about in this lesson. You are welcome to select the app's subject matter (perhaps something from your work) and the functionality it provides. If you're unsure of what to map, you might try searching ArcGIS Online or The Living Atlas, where there is a wealth of data. 

Details matter! Make sure your app looks professional by modifying anything that looks unfinished. Text a user sees, whether in a widget, pop-up, or elsewhere, should be human-readable (or have good aliases) and not look like a default or coded name. Also, choose appropriate symbology and consider hiding unneeded fields. 

You will have another opportunity to select your own final project at the end of the term. Keep that in mind when selecting data and/or functionality to incorporate into this project.

Note: Please make sure to share your app with Everyone or the Penn State org; otherwise, we will not be able to see it.  You'll also need to share any web maps and/or layers that the app references.  A good way to confirm that the app is viewable is to open it in a browser you don't typically use (i.e., where you're not logged in to AGO).

Part II

There are other web mapping platforms that offer features similar to ArcGIS Online (e.g., CARTO, MapBox, SimpleMappr, MangoMap, MapHub, and MapLine). For the second part of this week's assignment, I'd like you to experiment with one of these platforms, then share your thoughts on it in a recorded video. Here are some detailed instructions:

1. Please go to the Assignment 1 Platform Review Sign-up page in the Lesson 1 module in Canvas to sign up for a platform. The sign-ups will be set up such that each platform will be covered by roughly the same number of students. (If there's another platform that you'd like to evaluate, check with the instructor first.)
2. Limit your video to 5 minutes.
3. In your video, be sure to discuss the following points:
   - Cost
   - Ease of use
   - Data formats supported
   - How it compares to ArcGIS Online (similarities, differences, things you like better)
   - Can you build an app or just a map? (I.e., Is it possible to add functionality similar to Esri's Experience Builder widgets?)
4. What I'm looking for in this video is for you to talk through a demo of the platform. You may choose to summarize your major points through slides, though that's not required. You are not expected to have any face time in the video, though you certainly can if you like. There is a short tutorial on recording videos with ScreenPal in the course orientation, though you're welcome to record your video with some other software.

Deliverables

This project is one week in length. Please refer to the Canvas course Calendar for the due date.

1. Post a link to your Esri app to the Lesson 1 Discussion Forum. (40 of 100 points)
2. Post a link to your video review of a non-Esri web mapping platform to the Lesson 1 Discussion Forum (and/or Media Gallery in Canvas). This could be in the same or a different post as #1 above. (40 of 100 points)
3. As part of your discussion forum post, include some reflection on what you learned from the lesson, how you might apply what you learned to your job, and/or concepts that you found to be confusing (minimum 200 words). (20 of 100 points)
4. Complete the Lesson 1 quiz.

With that, you've finished working through the content on developing geospatial apps without programming.  For some of you, especially those who work in an organization with an ArcGIS Online account, what you've learned in this lesson will sufficiently meet your app development needs.  However, if you find that the available widgets can't quite be added together to form the app you want, you'll need to learn about web programming technologies.  In the next lesson, you'll learn about HTML and CSS, languages that are used to define the content and presentation style of web pages.  With that foundation laid, you'll be ready to spend the rest of the course learning about Esri's JavaScript-based Application Programming Interface (API), which provides developers a finer level of control over their apps than is possible with their non-programming options.

IMPORTANT: Beginning in Lesson 3, you'll be expected to post some of your assignments to a web server.  If you haven't already done so, please have a look at the page on e-Portfolios.  Getting web space and familiarizing yourself with it's use may take a business day or two, so you should get this taken care of in advance of having to post your Lesson 3 assignment.