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.

In this lesson, we’ll walk through the configuration of a web map that can be viewed using Esri's Field Maps mobile app and used to record observations made in the field.  This will give you exposure to another app development framework, one that has a specific mobile device focus.

We'll actually be replicating work done recently by a Penn State MGIS student for his capstone experience.  To set the stage for what we'll be doing, let's begin with a bit of background.

The Pennsylvania Department of Conservation of Natural Resources (DCNR) is the state agency charged with maintaining the state’s parks.  One of their maintenance tasks is the remediation of invasive plant species.  Unfortunately, limited funding makes it impossible to conduct remediation in all of the park locations where invasives are observed.  For this reason, DCNR worked together with a Penn State College of Agricultural Sciences researcher to devise a methodology for prioritizing which of the infestations should receive the agency’s attention. 

Within each park of interest, DCNR staff first delineate areas of similar ecological characteristics (habitat management zones, or HMZs).  Each HMZ is assigned to one of 7 habitat types: Mature Forest, Pole Forest, Young Forest, Wetland, Riparian Corridor, Lakeshore, and Herbaceous Opening. 

In developing an invasive species management plan (ISMP), priority scores ranging from 0-9 (?) are derived based on the following factors:

• Stewardship value – What is the HMZ’s value from an ecological stewardship standpoint?
  2 = highest ecological value
  1 = medium ecological value
  0 = lowest ecological value
• Outreach value – How much interest does this HMZ generate with outside groups (as a funding or volunteer source)?
  2 = highest interest
  1 = medium interest
  0 = lowest interest
• Extent value – How large is the species infestation?
  2 = not present or in very low numbers
  1 = medium presence level
  0 = large infestation
• Impact value – How severely does the species affect the HMZ’s native plant community?
  1 = Super Bad
  0 = Regular Bad
  The impact a species has on the various habitat types is a known relationship that can be looked up as needed.  For example, the Japanese knotweed has an impact value of 1 in an HMZ of the Lakeshore type, but 0 in the Forest types.
• Restoration effort value – What level of effort will be required to eliminate the invasive?
  3 = lowest effort; native plants fill in on their own after the invasive is suppressed
  2 = at least two seasons of suppression required
  1 = elimination of invasive possible, but likely requires seeding/planting native plants
  0 = highest effort; complete elimination of invasive unlikely
  These values are also known ahead of time and vary based on the species and its extent value.  For example, the Norway maple has a restoration score of 1 when its extent is rated as 0 (large infestation), a score of 2 when its extent is rated as 1, and a score of 3 when its extent is rated as 2 (in low numbers). 

The priority score is calculated as follows:
priority = stewardship + outreach + extent + impact + restoration

The original form of this ISMP was an Excel workbook in which staff entered HMZ info and species observations into multiple tabs.  VBA macros automated the priority score calculations.  Unfortunately, this system had no spatial component.

More recently, a Penn State MGIS student devised a version of the ISMP for ArcGIS Field Maps.  Through this application, DCNR staff can conduct their work in a spatial context by clicking/tapping an HMZ of interest on the map, recording the species found within it, and automatically obtaining a remediation priority score.

Objectives

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

• build their own online/mobile map using Field Maps
• have a better understanding of the various map development/deployment frameworks available
• be able to choose an appropriate map framework for a particular task
• use Esri's Arcade scripting language to populate form fields automatically

Questions?

If you have any questions now or at any point during this week, please feel free to post them to the Lesson 2 Discussion Forum.

Lesson 2 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.

Take a few moments to explore the feature classes, tables, and domains in the ismp file geodatabase that you downloaded (link on the Checklist page) in ArcGIS Pro.  The HMZ feature class contains 14 habitat management zone polygons covering Nescopeck State Park.  Note that the HMZs are assigned an integer ID and a name.  The feature class also contains empty fields for the stewardship and outreach indices discussed earlier.

The Species table contains the common and scientific names of the invasive plant species that may be found in the state.

The Species_HMZ table is where observations of invasive species within a HMZ can be recorded (via the Common_Name and HMZ_ID fields).  Also in this table are fields for recording the various ratings discussed earlier: the extent of the invasive, its impact rating, its restoration rating, and finally, its cleanup priority score.

The last two tables – Impact and Restoration – are lookup tables that allow for determining the impact rating of a species given the habitat type it’s found in and the restoration effort rating of a species given its extent. 

Lastly, the geodatabase contains several domains, which we’ll use to place limits on what can be entered in the various fields we’ve discussed (and to provide dropdown lists of options). 

1. Apply the HabitatTypes domain to the Type field in the HMZ feature class (right-click on HMZ, Data Design > Fields, then choose HabitatTypes under Domain for the Type field).  Likewise, apply the StewardshipVals domain to the Stewardship field and the OutreachVals domain to the Outreach field.  Be sure to save your domain settings.
2. Next, similarly open the field design dialog for the Species_HMZ table and apply domains to the fields as follows:
   SpeciesNames to Common_Name
   ExtentVals to Extent_Value
   ImpactVals to Impact_Value
   RestorationVals to Restoration_Value
   
   Our goal for this app is for the end user to be able to tap on an HMZ polygon, record a 0-2 stewardship rating and a 0-2 outreach rating for that HMZ, then record any number of invasive species observed in that HMZ (including the various other ratings found in the Species_HMZ table).  One requirement imposed by Field Maps is that each layer/table you’d like to edit must contain a GlobalID field.  This is a field, managed by ArcGIS, that stores a globally unique identifier, or GUID, for each feature/row.
3. Right-click on the HMZ feature class in the Catalog pane and select Manage.  This will open the Manage tab of the Feature Class Properties dialog.  Check the Global IDs checkbox and click OK to add a GlobalID field to the feature class. (You might open the attribute table and confirm that the field has been added.)
   
   Another important step in preparing our database will be to create a relationship class between the HMZ feature class and the Species_HMZ table.  As part of this step, we’ll be specifying the primary key field for the HMZ feature class.  This will be the GlobalID field we just added to that feature class.  We’ll also need to specify the field in the Species_HMZ table that should be used to maintain the HMZ-Species_HMZ relationship (i.e., to link each Species_HMZ record to the correct HMZ).

4. Go into the Species_HMZ table’s field design dialog and add a new field with these parameters:
   Name: HMZ_GUID
   Alias: HMZ_GUID
   Data Type: Guid

   Both GlobalID fields and Guid fields store GUID values.  The difference is that GlobalID fields are automatically managed by ArcGIS, whereas Guid fields are not.  The purpose of this field we’re adding here is, as was just mentioned, to act as the linkage between the rows in the Species_HMZ table and the associated features in the HMZ feature class.

5. Create the relationship class by right-clicking on your geodatabase and selecting New > Relationship Class.  In the Create Relationship Class tool dialog, make the following settings:
   Origin Table: HMZ
   Destination Table: Species_HMZ
   Output Relationship Class: HMZ_Species_HMZ_RC
   Cardinality: One to many
   Origin Primary Key: GlobalID
   Origin Foreign Key: HMZ_GUID
   
   Leave all other options set to their defaults, then click Run to create the relationship class.
6. If you haven’t already, add the HMZ feature class to a new map. Also, add the 4 tables: Impact, Restoration, Species, and Species_HMZ.
7. Change the display of the HMZ layer so that it uses a Unique Values symbology based on the Type field (or the HMZ_ID field, your choice).  (I’m partial to the Cool Tones color scheme myself.)
   
   We’re now ready to publish the contents of the map to ArcGIS Online (AGO) so that it can be used in a Field Maps app.
8. Go to Share > Web Layer > Publish Web Layer. 
9. In the Share As Web Layer tool dialog, make the following settings under the General tab:
   Name: ISMP Web Layer <your username>
   Folder: Create a new folder called fieldmaps
   
   Accept the defaults for all other options on this tab, but do not publish yet. The reason we're calling our layer something like "ISMP Web Layer aaa123" is that all of our layers need to have a unique name in AGO.
10. Under the Configuration tab, click the pencil icon next to the Feature layer to access a number of configuration options.  Check the Enable editing checkbox, leaving all of the edit types checked and the Attributes and geometry option selected. 

11. Click Analyze to run a check of whether the map can be successfully published. 

    You should get 2 warnings of “Layer’s data source is not supported.”  This is in reference to the two background layers that are included in ArcGIS Pro maps by default.  It’s not strictly necessary, but remove these layers from the map.

    The other issue you’ll see noted in the Analyzer results is an error that “Unique numeric IDs are not assigned.”  Let’s take a moment to reflect on what we’re doing here.  We’re hoping to make all the items loaded in the map -- the polygon layer and standalone tables–– available for use in AGO.  The singular name of “web layer” may seem confusing since our map could have any number of layers/tables in it, but that is the term for what is being produced in AGO.  Each layer/table found in this Pro map is going to be published to AGO.  One of the requirements before we can publish is that each layer/table needs a unique ID assigned to it.  This can be done through a Map Properties setting, which we can access via a shortcut in the Analyzer results.

12. In the Analyzer results, hover your mouse over the error, click the … button, then select Open Map Properties to Allow Assignment.

13. Under the General settings, put a check in the Allow assignment of unique numeric IDs… checkbox, then click OK to dismiss the Map Properties dialog.

    You should see the red X in the Analyzer results change to a green checkmark. 

14. Click Analyze again.  You should now receive no errors or warnings. 

15. Click Publish.  The Share As Web Layer tool will churn for a minute or two, before you should see a message that the web layer was published successfully.

    You should now be able to browse to your AGO account and see a hosted feature layer and service definition, both with the name ISMP Web Layer.

    Field Maps operates on web maps, so before we can create an app with Field Maps, we’ll first need to create a web map containing our new web/feature layer.

16. While looking at the items in your fieldmaps AGO folder, click the … next to the feature layer and select Open in Map Viewer.
17. At this point, we could modify the layer’s symbology or how info is displayed in its pop-ups.  However, let's hold off on doing any such configuration for now. Simply click the Save and open button, assign a name of ISMP Web Map, specify that you want to put it in the fieldmaps folder, then click Save. 
18. Return to your AGO Content page ("hamburger" icon in the upper left > Content), where you should now see the newly created web map.  Click the … next to it and select Open in Field Maps Designer.

Note: There are a couple of variations on this workflow that you may want to consider:

• Using the Share as Web Map tool in Pro instead of Share as Web Layer. This both creates the new AGO feature layer and a web map containing that layer. On the plus side, this cuts out the need to add the new feature layer to the Map Viewer and save a web map as separate steps. On the downside, the feature layer is assigned a name based on the name given to the web map -- with _WFL appended to the end -- that you may not be happy with. 
• Creating the relationship class as many-to-many rather than 1-to-many.  Each HMZ can have many species, and each species can appear in many HMZs.  Creating the relationship class in this way would automatically create an intermediate table that would store the HMZ-species combinations.  When I attempted to go this route, feature edits did not work as required, unfortunately.

With the necessary data published to AGO and a web map created from it, we're now ready to configure the web map for staff who will be opening it in the Field Maps app on their mobile devices.

The primary type of configuration that is required in building a Field Maps app is creating forms for the end user to record their observations. 

1. Picking up where you left off in the AGO Field Maps Designer, click on the Forms button.  You should see the HMZ layer under the Layers heading.  And if you expand the Tables, you should see the map’s four tables, with only Species HMZ being enabled for form creation. 

2. Re-expand the Layers listing and click on HMZ to select it.  You should see a design canvas appear in the middle of the window delineated by a box with a dashed outline.  To the right of the design canvas, you’ll see a Form builder panel containing several different types of Form elements (or controls).  Scrolling down through the Form builder controls, you should see the layer’s Fields at the bottom.  One option for configuring a form is to drag and drop controls from the Form builder panel onto the design canvas.  However, what we’ll do here instead is ask Field Maps to create a form from the layer’s popup.

3. Click the blue Convert pop-up button in the middle of the design canvas.  You should see fields from the HMZ attribute table have been added to the canvas as text boxes (for fields without an associated domain) and as combo boxes (for fields with an associated domain). 

4. Click the Save button in the upper right of the design canvas to save the form.

5. Expand the Tables listing and go through the same process to create a form for the Species_HMZ table. 

   You may not realize it, but you now have an app that you can test!

6. Open Field Maps on your mobile device.  After logging in to your AGO account, you should be presented with a list of web maps. 

7. Find your ISMP Web Map and tap it to open it.
   
   Unless you happen to live in the vicinity of the Nescopeck State Park, you won’t be able to see the HMZ features. 

8. Open the Field Maps menu using the … button in the upper right and choose Bookmarks > Default Map Extent.  This will zoom you to the park.

9. Tap the Campground Management Area (the square-ish polygon in the north-central part of the map) to select it. 
   
   You should see a popup appear showing the data associated with that HMZ.  A DCNR employee using the app would want to record the Stewardship and Outreach ratings for the HMZ. 

10. To do that, tap the Edit button at the bottom of the screen (pencil icon).  You’ll have the ability to modify the HMZ’s boundary, though there is no need to do so. 

11. Instead, drag the popup panel up so that you're able to focus on attribute entry, then tap on the Stewardship box and choose 2 - highest eco value from the options (which came from the domain you configured). 

12. Then tap on the Outreach box and choose 0 - lowest interest from the options.  Click Submit to commit your entries to the hosted feature layer in AGO.
    
    The DCNR staffer would next want to record the invasive species observed in the HMZ.  With the popup panel up, scroll down past the HMZ attributes.  You should see a Related heading followed by a Species HMZ link. 

13. Tap that link to access the related records from the Species_HMZ table.  There aren’t any records as of yet, but you should see an Add button, enabling you to enter a new record. 

14. Upon tapping Add, you should see a form containing the Species_HMZ fields.  The HMZ_ID field will hold 0.  You can either change that to the appropriate value (12) or just ignore it for now.  We’ll come back to this in the next section.  Make the following entries in the form:
    Common_Name: exotic biennials
    Extent_Value: 2
    Impact_Value: 0 
    Restoration_Value: 2
    Priority: 6
    
    Note that the HMZ_GUID value will be automatically populated with the Campground Management Area’s GlobalID value, which happens because of the foreign key setting we made when configuring the relationship class.

15. Tap Submit to commit this data to the Species_HMZ table as a new record.

    With that, you will hopefully have successfully tested your app!

As you were testing, you probably saw some aspects of the app that could be improved. We already noted that the HMZ_ID of a new Species_HMZ record defaulted to 0 and in this section we'll correct this shortcoming by configuring a calculated expression written in Esri's Arcade scripting language.

Also, returning to the project background, you may recall that the Impact rating is based on the HMZ’s habitat type.  Similarly, the Restoration rating is based on the species and its extent.  So after the relatively simple HMZ_ID expression, we'll up the ante a bit to create more complex expressions that populate the Impact_Value and Restoration_Value fields by querying the Impact and Restoration lookup tables.  We’ll also then be able to carry out the Priority score calculation using the various ratings entered by the user and derived from the lookup tables. 

Tools like those built into Field Maps often set UI element properties to commonly used values in order to minimize the effort needed to produce a working app.  However, just as a cartographer shouldn't leave .shp in the names of layers being shown in a legend, a developer should consider what changes can be made in default settings to produce a more professional and user-friendly UI.  

If you haven't already, take a few moments to examine how the ISMP Web Map looks when open in Field Maps on your mobile device.  Are there any fields being shown that would not be of interest to the end user? Are there any control labels that could be better tailored to the map's purpose or made more user friendly?  Are the dropdown options presented in an intuitive order?  On this page of the lesson we'll address the issues that I noted.  If you think there are any other ways to improve the map, feel free to post your ideas to the discussion forum.

The first thing we'll do is look for fields in the HMZ form that aren't needed and only serve to clutter it.  Looking at the map in the Field Maps app on your mobile device, the OBJECTID, GlobalID, Shape_Area, and Shape_Length fields offer little, if any, value, so let's get rid of them.  But how?  We have a few different options:

• Open the map in the AGO Field Maps form designer and remove the unneeded fields from the HMZ layer's form.  This would cause the fields to no longer appear in Field Maps, but they would still appear in other contexts where the map is found. 
• Open the map in the AGO Map Viewer and remove the unneeded fields from the HMZ layer's popup.  This would cause the fields to no longer appear anywhere the map is found.
• Open the feature layer with the Map Viewer and remove the unneeded fields from the layer's popup.  This would cause the fields to no longer appear everywhere the ISMP Web Map is used and in any other maps that include the layer. 

All of a layer's fields are included in its popup by default.  Interestingly, if you open the map with the Field Maps form designer, you'll see that the fields I mentioned (OBJECTID, etc.) do not appear on the form.  Recall that we populated the form with controls by choosing to convert the layer's popup.  The fields I mentioned aren't on the form and also aren't available to add.  And yet, they do show up when the map is opened in the Field Maps mobile app.  I don't know if this is an intentional design decision or a bug.  In any case, to get these fields off the form, it means we'll need to modify the layer's popup.  

1. Open the ISMP Web Map in the AGO Map Viewer.
2. The HMZ layer should be selected by default.  Click the Pop-ups button found on the strip of buttons running along the right side of the map.  A popup preview showing data from an example feature should appear over the map along with a panel of properties that can be set.
3. Click on the Fields List button to expand the list.  
4. Click the X next to the OBJECTID field.  You should see it disappear from the popup preview.
5. Repeat for the GlobalID, Shape_Area, and Shape_Length fields.  
6. Close the Pop-ups panel. 
   
   The Save and open button running along the left of the Map Viewer (folder icon) should now have a blue dot over it, indicating that there are unsaved changes.
    
7. Click that button, then Save.
   
   There are likewise a few unneeded fields that appear on the Species HMZ form -- OBJECTID, GlobalID, and HMZ_GUID.  
    
8. Click the Tables button on the left side of the Map Viewer to access the tables included in the map.
9. Select the Species HMZ table, then go through the same process used above to remove the three unneeded fields from the popup.
10. Save your changes.
    
    One thing you may not have noticed when configuring the forms in Field Maps is that the controls were all embedded within a Group layout element.  On each form, this element was assigned a default label of Group 1.  This label appears in the Field Maps mobile app, but interestingly, only for the Species HMZ form, not for the HMZ form.  (The group label for the HMZ form is Fields, not Group 1, for whatever reason.)  The mobile app user can tap this label to expand/collapse the field controls found within that group.  
     
11. Exit out of the Map Viewer and open the ISMP Web Map in Field Maps again.
12. Open the Species HMZ form and select the Group control (the item on the design canvas with the label Group 1).
13. In the Properties panel to the right, change the Display Name to Species-HMZ Attributes.
14. Click the Save button in the upper right of the design canvas to commit your change.
    
    One last improvement that we'll make concerns the selection of the species.  The Common_Name dropdown list, which is populated based on the SpeciesNames domain you applied in Pro prior to publishing the web layer, is not in alphabetical order, making it quite tedious to find the desired species.  There doesn't appear to be a convenient way in AGO to order the names.  It can be done using the Python API for ArcGIS, but diving into that coding platform would be outside the scope of this class.  Fortunately, there is a tool in Pro built for this purpose.  And most importantly, making such a change won't require going through the entire workflow again.  We can simply re-publish the web layer, choosing to overwrite it, and the change will be reflected in our web map (and any other web maps that happen to include the web layer).
     
15. Return to ArcGIS Pro and open the geoprocessing toolbox (Analysis > Tools).  
16. Searching on the keyword sort, locate and open the Sort Coded Value Domain tool.
17. Browse to your ismp geodatabase, selecting the SpeciesNames domain, and Run the tool so that the Code-Description pairs are sorted by Code in Ascending order.
18. Re-publish the web layer by going to Share > Web Layer > Overwrite Web Layer.  
19. Looking within Portal > My Content, navigate into your fieldmaps folder and select your ISMP Web Layer.  
    
    A message will appear, warning that what you're about to do will cause you to lose changes that were made after the layer was initially published.  This means losing the features/records that were added to the HMZ layer and the Species_HMZ table.  This isn't really problematic as those were just test edits.  Perhaps more consequential is the possibility of losing changes made in popup configuration.  We just made changes of that kind, though recall that we made them by opening the ISMP Web Map in the Map Viewer rather than the ISMP Web Layer. That meant that we were taking the popup settings the web layer brought with it and overriding them within the current web map only.  It also means that the changes we made should "survive" an overwrite of the web layer.
     
20. You could click Cancel to back out of the overwrite now if you wanted, but go ahead and click OK.
21. In the Overwrite Web Layer panel that appears, accept all of the default settings and click Publish. 
22. Go back to the Field Maps mobile app, reload the map, and test again.  Confirm that the Common_Name dropdown list is now sorted and that the unwanted fields are not being shown.  (You should expect any data edits you had made in earlier testing to have been lost.)  

WIth that, we've finished our walkthrough of configuring a field data collection app.  In the next section, you'll be prompted to take what you've learned and apply it to a different scenario.

Credit: Donation Boxes by Rick Obst is licensed under CC BY 2.0

If you're like me, every so often you bag up a bunch of old clothes to donate.  But figuring out where to take them can be a challenge.  Donation bin locations change fairly frequently, and I've had limited success finding them through online searches.  The scenario for this assignment is that you work for some organization -- perhaps a local government agency or a nonprofit -- interested in compiling the locations and other attributes of such donation sites in your local area.

Following a workflow similar to what you saw in the lesson, devise a Field Maps-based solution that can be used by staff working on tablets to compile the data.  Here are some details on what is expected:

• You are welcome to expand this to include other household goods (e.g., electronics), but the basic requirement is to account for clothing and shoes.
• In addition to bins like the ones pictured above, you should also build in support for capturing data on stores (e.g., Goodwill) and consignment shops.  At minimum, this will require recording the name of the organization taking the donation, its hours of operation, and whether drop-offs can be made outside of those hours.
• This should be a less complex scenario than the invasive plant species one you just walked through, so don't overthink your solution.
• There is no need for complex Arcade expressions like those from the invasives scenario.  However, I do want you to store the ID/name of the signed-in user and the date when an edit is performed.  Guidance on how to do this, using Arcade, can be found in the documentation. 
• Be sure to share your web map with the GEOG 863 AGO group for the current term so that your grader can access it!

Deliverables

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

1. Submit a document (Word or PDF) that contains the URL of your web map to the Assignment 2 Submission area in Canvas. (80 points)
2. Include in the document some reflection on what you learned from the lesson and/or any concepts that you found to be confusing (minimum 200 words). (20 of 100 points)
3. Complete the Lesson 2 quiz.

A web mapping application is essentially a web page containing special scripts that dynamically add a map to the page. The bulk of this course will be concerned with writing these map-building scripts (using JavaScript). However, web maps are embedded within pages written in the web publishing languages of HTML and CSS, so it makes sense to first spend some time discussing those languages.

This lesson covers a lot of material, so be sure to set aside enough time for it. At the end of the lesson, you'll be given a document and asked to apply what you've learned to produce a web page that replicates the formatting of your assigned document.

Objectives

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

• understand the basic rules/terminology of Hypertext Transfer Markup Language (HTML);
• author a simple web page containing paragraphs, lists, tables, images, and links without the aid of an HTML editor;
• describe notation schemes that are not handled well by HTML;
• explain the need for and uses of eXtensible Markup Language (XML);
• describe the motivation behind the development of eXtensible HTML (XHTML) and its syntax differences from HTML;
• describe the benefits of using Cascading Style Sheet (CSS) technology;
• author a simple web page using XHTML and CSS.

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 3 Discussion Forum. (That forum can be accessed at any time by clicking on the Discussions tab.)

Lesson 3 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.

HTML Basics

HyperText Markup Language (HTML) is the core language involved in the authoring of pages published on the World Wide Web. HTML is simply plain text in which the text is "marked up" to define various types of content, such as headings, paragraphs, links, images, lists, and tables. The markup occurs in the form of tags, special character strings that signal the beginning and end of a content element. For example, the <h1>...<h6> tags are used to define heading elements:

Figure 3.1 How HTML heading elements are rendered in a browser

• The characters that denote an HTML tag (< and >) are referred to as angle brackets.
• Tags usually come in pairs (e.g., <body> and </body>, where <body> is the start tag and </body> is the end tag).
• HTML is not case sensitive (i.e., <title> is the same as <TITLE>), though lowercase is the recommended standard.
• Tags and their associated text form HTML elements.

Figure 3.2 An HTML element composed of its start tag, end tag, and text content

A simple HTML document

All HTML documents should be enclosed within <html></html> tags and should contain a head section and a body section. The head section contains metadata about the document and is defined using the <head> tag. The <title> tag is used frequently in the head section to define the title of the document. The body section contains the information you want to appear on the page itself and is defined using the <body> tag. Below is an example of a very basic HTML document:

Figure 3.3 Source code of a simple HTML document shown alongside the document rendered in a browser

Commonly used tags

As we saw earlier, the <h1>...<h6> tags are used to define headings. Other tags that are often used to define elements in the body of a document include:

• <p></p> to define paragraphs of text
• <em></em> to give text emphasis (displayed in italics by default)
• <strong></strong> to give text strong emphasis (displayed in bold by default)
• <br> to insert a line break
• <hr> to insert a horizontal rule (line)

Note that a couple of these tags refer to the default presentation of their associated text. Later in the lesson, we'll see how stylesheets can be used to override these defaults.

Displaying lists

HTML allows authors to define two types of lists -- ordered and unordered. Ordered lists are most appropriate when listing a set of steps or items that can be ranked in some way. The <ol> tag is used to begin an ordered list and the </ol> tag is used to end it. Within those tags, each item should be enclosed within <li> and </li> tags. By default, web browsers number the items automatically beginning with 1.

Ordered list code

Code	Display
<html> <body> <h4>Ordered List</h4> <ol> <li>Citizen Kane</li> <li>Casablanca</li> <li>The Godfather</li> </ol> </body> </html>

Figure 3.4 Ordered lists in HTML

Unordered lists are most appropriate when listing items that cannot be ranked meaningfully. List items are defined the same way with <li></li>, but the items are enclosed by <ul></ul> rather than <ol></ol>. By default, web browsers mark the items with bullets.

Unordered list code

Code	Display
<html> <body> <h4>Unordered List</h4> <ul> <li>Ford</li> <li>GM</li> <li>Chrysler</li> </ul> </body> </html>

Figure 3.5 Unordered lists in HTML

Note: The indentation of the list items in the examples above is done merely to improve the readability of the HTML code and is not responsible for the indentation of the items in the output. Writing the code such that the li elements appear flush with the left margin would result in the same output.

Displaying images

Images are added to a web page using the <img> tag. For example:

<img src="brown_MarkerA.png">

Some important points to note about this example:

1. img elements don't have an end tag.
2. src is an example of an element attribute.
3. Attribute values should be specified in quotes, preferably double quotes.
4. The web browser will look for brown_MarkerA.png in the same folder that the HTML document is in.
5. It is also possible to load images using a full web address (URL):

<img src="http:/detwilergeog863.webhostapp.com/icons/brown_MarkerA.png">

Adding links

Links are added to a web page using the anchor tag (<a>) and its href attribute:

<a href="http://www.psu.edu/">Penn State</a>

Note that the text that you want to display as a link should be placed between the <a> and </a> tags. The URL that you want to load should be used to specify the href attribute value.

You've probably encountered pages with links that jump to a specific location in the page (e.g., a "Back to top" link). This is called a bookmark link, and creating one is a two-step process:

1. Create an anchor somewhere in the document: <a id="top"></a>
2. Link to that anchor: <a href="#top">Back to top</a>

Note that the value assigned to the id attribute ("top" in this case) is entirely up to you. The key is to plug the same value into the href attribute and precede that value with a pound sign to specify that you're linking to an anchor in the same document.

This will also work to link to a specific location in another page. A bookmark link will also work to link to another page, such as Lesson 3 Deliverables, using:

<a href="/geog863/node/1886#L2deliverables">Lesson 3 Deliverables</a>

HTML entities

Some of the characters you might want to display on your page require special coding because they have special meanings in HTML. For example, if you wanted to display an algebraic expression like x > 5, you'd need to use the code &gt; since angle brackets are used to produce start and end tags.

Another aspect of HTML that can prompt the use of one of these entities is the fact that consecutive spaces in your HTML source code are treated as one. You can get around this by inserting one or more non-breaking spaces with the entity &nbsp;.

Some other commonly used entities include:

Output char	HTML code
&	&
"	"
©	©
÷	÷
×	×

Figure 3.6 Commonly used HTML entities

HTML tables

Tables are commonly used in mapping applications to display information associated with features on the map. A table is defined using the <table> and </table> tags. A row can be added to the table using the <tr> and </tr> tags. Individual cells of data can be added to a row using the <td> and </td> tags. Here is a very simple example:

Simple HTML table code, no borders

Code	Display
<table>     <tr>         <td>Penn State</td>         <td>Nittany Lions</td>     </tr>     <tr>         <td>Ohio State</td>         <td>Buckeyes</td>     </tr> </table>

Figure 3.7 A simple HTML table

To add a border to a table, you set its border attribute to some whole number (of pixels):

Simple HTML table code with borders

Code	Display
<table border="1">     <tr>         <td>Penn State</td>         <td>Nittany Lions</td>     </tr>     <tr>         <td>Ohio State</td>         <td>Buckeyes</td>     </tr> </table>

Figure 3.8 Table with border added

To include column headings, add a row containing <th> elements instead of <td> elements. By default, web browsers will display the <th> elements in bold:

Code	Display
<table border="1">     <tr>         <th>School</th>         <th>Mascot</th>     </tr>     <tr>         <td>Penn State</td>         <td>Nittany Lions</td>     </tr>     <tr>         <td>Ohio State</td>         <td>Buckeyes</td>     </tr> </table>

Figure 3.9 Table with headings

<td> and <th> elements have an attribute called colspan that can be used to spread the element's text across multiple columns:

Code	Display
<table border="1">     <tr>         <th colspan="2">2000</th>         <th colspan="2">2006</th>     </tr>     <tr>         <th>Males</th>         <th>Females</th>         <th>Males</th>         <th>Females</th>     </tr>     <tr>         <td>5,929,663</td>         <td>6,351,391</td>         <td>6,043,132</td>         <td>6,397,489</td>     </tr> </table>

Figure 3.10 Table with multi-column heading

Likewise, <td> and <th> elements also have a rowspan attribute for spreading text across multiple rows.

Miscellaneous notes

Comments (text that you want to be visible when viewing the source code, but not in the rendered page) can be inserted into an HTML document using the following syntax:

<!-- This is a comment. -->

Also, as mentioned above, consecutive spaces are ignored by web browsers. This means that you should feel free to indent your HTML code (as shown in the table examples) and use line spacing to make it easier to read and follow.

Online tutorials/cheatsheets

This section of the lesson is just an introduction to the basics of HTML. There are many other helpful online HTML tutorials that can help you learn the language, along with cheatsheets that can be used for quick reference once you've gained some coding experience. Here is a list of sites that I've found to be helpful:

• w3schools.com (HTML Tutorial)
• killersites.com (HTML Codes Cheat Sheet)
• mindprod.com (HTML Cheat Sheet)

What is XML?

HTML handles the needs of most web authors, but there are some kinds of information that it is not well-suited for presenting (e.g., mathematical notations, chemical formulae, musical scores). The eXtensible Markup Language (XML) was developed to address this shortcoming. XML is a language used to define other languages, a meta-language. Just as HTML has its own syntax rules, you can create your own markup language with its own set of rules.

For example, here is an example of a markup language used to store information about CDs in a CD catalog. Unlike HTML, in which the root element is called <html>, this language has a root element called <CATALOG>. A <CATALOG> element is composed of one or more <CD> elements. Each <CD> element in turn has a <TITLE>, <ARTIST>, <COUNTRY>, <COMPANY>, <PRICE>, and <YEAR>.

So, like HTML, XML documents use tags to define data elements. The difference is that you create the tag set. It is possible (though not required) to specify the rules of your XML language in a document type definition (DTD) file or an XML schema definition (XSD) file. For example, you might decide that a <CD> element can have one and only one <ARTIST> element within it.

While XML is quite similar in syntax to HTML (i.e., its use of tags), there are some syntax differences that make XML a bit more strict. Among these differences are:

• XML elements must have an end tag. Recall that the <img> element in HTML doesn't require an end tag.
• XML tags are case sensitive. <CATALOG> is not the same as <catalog> in XML, whereas <EM> is the same as <em> in HTML.
• XML elements must be nested properly. In HTML, an author can get away with code like <strong><em>Total</strong></em>, whereas in XML the </em> tag must come before the </strong> tag.

XML's Uses

XML has become an important format for the exchange of data across the Internet. And, as the CD catalog example discussed above implies, it can also be used as a means for storing data. We'll use XML later in the course for both of these purposes. Right now, we're going to focus on XML's use in creating a new flavor of HTML called XHTML.

An early development in the growth of web publishing was that desktop web browsers were designed to correct poorly written HTML. For example, in a bit of content containing paragraphs of text, it is possible to omit the </p> tag for paragraph elements, and all of the popular desktop web browsers will render the content the same as if the </p> tags were present. This is not a surprising development if you think about it for a moment. Which browser would you prefer to use: one that displays a readable page the vast majority of the time or one that displays an error message when it encounters poorly written HTML?

Flash forward to the 2000s, the dawn of portable handheld devices like tablets and smartphones and wireless Internet. Slower data transfers and less computing power in these devices combined to produce lesser performance when rendering HTML content. This was one of the factors leading to the development of XHTML.

What is XHTML?

XHTML (eXtensible Hypertext Markup Language) is simply a version of HTML that follows the stricter syntax rules of XML. An XML/XHTML document that meets all of the syntax rules is said to be well-formed. Well-formed documents can be interpreted more quickly than documents containing syntax errors that must be corrected.

The introduction of this new XHTML language came after years of the development of plain HTML content. Thus, web authors interested in creating well-formed XHTML had to adjust their practices a bit, both because of the sloppy habits that forgiving browsers had enabled and the outright differences with HTML. These adjustments include:

• Elements that don't require an end tag in HTML must have one in XHTML (e.g., <p> needs a matching </p>).
• Empty elements in HTML must be terminated in XHTML (e.g., <br> must be changed to <br></br> or its shortcut <br />).
• Elements must be properly nested.
  <strong><em>Some text</strong></em> INCORRECT
  <strong><em>Some text</em></strong> CORRECT
• Attribute values must be quoted.
  <table rows=3> INCORRECT
  <table rows="3"> CORRECT
• XHTML is case sensitive. <a> and <A> are different tags. The standard is to use lowercase.

Flavors of XHTML

HTML was originally developed such that the actual informational content of a document was mixed with presentational settings. For example, the <i> tag was used to tell the browser to display bits of text in italics and the <b> tag was used to produce bold text. An important aspect in the development of web publishing has been its push for the separation of content from presentation. This resulted in the creation of an <em> tag to define emphasized text and a <strong> tag to define strongly emphasized text. It turns out that the default behavior of browsers is to display text tagged with <em> in italics and text tagged with <strong> in bold, which may leave you wondering what purpose these new tags serve if they only replicate the behavior of <i> and <b>.

The answer lies in the use of Cascading Style Sheets (CSS). With CSS, web authors can override the browsers' default settings to display elements differently. Authors can also develop multiple style sheets for the same content (e.g., one for desktop browsers, one intended for printing, etc.). The usage of style sheets also makes it much easier to make sweeping changes to the look of a series of related pages. We'll talk more about CSS in the next section.

So, while it is possible to override the behavior of the <i> and <b> tags just as easily as any other tags, the <em> and <strong> tags were added and recommended over <i> and <b> to encourage web authors to move away from the practice of mixing content with presentation.

XHTML has two main dialects that differ from one another in terms of whether they allow the use of some presentational elements or not. As its name implies, the XHTML Strict dialect does not allow the usage of elements like <font> and <center>. It also does not allow the usage of element attributes like align and bgcolor. Presentation details like font size/type and alignment must be handled using CSS. The Strict dialect also requires that all text and images be embedded within either a <p> element or a <div> element (used to define divisions or sections of a document).

The XHTML Transitional dialect does not prohibit the use of presentational elements and attributes like those described in the previous paragraph. Generally speaking, XHTML Transitional was intended for developers who want to convert their old pages to a newer version, but would probably not bother to do it if they had to eliminate every presentational setting. XHTML Strict was intended for developers creating new pages.

XHTML developers specify which set of rules their page follows by adding a DOCTYPE line to the top of the page. For example, here are the DOCTYPE statements for XHTML Strict and XHTML Transitional, respectively:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

OR

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Browse this article, Transitional vs. Strict Markup, for more details on the differences between the two dialects.

The basic skeleton of an XHTML Strict document looks like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <meta http-equiv="content-type"
                content="text/html; charset=utf-8"/>
            <title>Your title here</title>
        </head>
        <body>
            Your content here
        </body>
    </html>

Page validation and conversion

XHTML and its dialects were developed by a standards organization called the World Wide Web Consortium (W3C). They also provide tools for web authors to validate that their pages follow the syntax rules of their selected DOCTYPE and to convert their pages from sloppy HTML to clean XHTML. This conversion tool is called HTML Tidy and can be run on the desktop or online (see links below).

HTML Tidy

HTML Tidy (online version)

Recent developments

Though XHTML was originally intended to be "the next step in the evolution of the Internet," it never gained a strong foothold in the web development community. A major factor that discouraged its adoption was that in order to reap the full benefit of an XML-based document, it needed to be served to browsers as "application/xhtml+xml" rather than "text/html." Most major browsers, such as Firefox, Chrome, and Safari, were built to handle the "application/xhtml+xml" content type. The notable exception was Internet Explorer, which, until version 9, did not support "application/xhtml+xml" content — users were asked if they wanted to save the file when documents of that type were encountered.

In addition to the content type issue, technological advances have undercut the argument that small handheld devices cannot load web pages at an acceptable speed without the use of an XML-based parser. Today's smartphone browsers utilize the same HTML parsers as their desktop counterparts.

Thus, in recent years, the notion of a world in which browsers parse all web pages as XML and page developers must author well-formed documents appears less and less likely. The W3C halted its development of a new version of XHTML and shifted their focus towards a new version of HTML (HTML5). This led some to declare that "XHTML is dead." HTML5 requires browsers to continue correcting poorly written HTML. This has the effect of allowing sloppy page authors to continue in their sloppy habits. That said, browsers will continue to accept pages authored with XHTML-style coding, so developers who see value in serving their pages as XML may continue to do so. To learn more about HTML5, see the HTML 5 Introduction at the w3schools site.

So what language should we use?

HTML5 is the current standard for web publishing, and you should certainly be looking to employ it in the web pages you develop. I have the content on XHTML in this lesson for a few reasons:

1. to give you an appreciation for the evolution of web publishing standards,
2. to encourage you to write clean HTML code. Doing so will enable you to achieve a higher level of consistency in the rendering of your pages than if you allowed yourself to pick up bad habits, and
3. you may encounter XHTML in other people's source code.

At the end of this lesson, you'll be asked to write a web page from scratch using what you learned from the lesson. I'm going to require you to write that page in XHTML Strict. However, for subsequent projects, you will be able to use the less rigid HTML5.

The need for CSS

During the early years of the World Wide Web, maintaining a site where all of the pages shared the same style was tedious and inefficient. For example, if a web author wanted to change the background color of each page on his/her site, that would involve performing the same edit to each page.

Creating alternate versions of the same page (e.g., one for the visually impaired) was also frustrating since it involved maintaining multiple copies of the same content. Any time the content required modification, the same edits would need to be made in multiple files.

Also, the mixing of page content with its presentational settings resulted in bloated pages. This was problematic for a couple of important reasons:

• It decreased the readability of the HTML source code, for example, when performing edits.
• It increased the page's file size, which in turn increased the time required to download it.

The Cascading Style Sheet (CSS) language was developed to address all of these issues. By storing presentational settings in a separate file that can be applied to any desired page, it is much easier to give multiple related pages the same look, create multiple views of the same content, and reduce the bloating of pages.

How does CSS work?

To see how CSS works, go to this W3Schools CSS demo. Click on a few of the "Stylesheet" links beneath the Same Page Different Stylesheets heading and note how the same exact content is displayed in a different way through the use of different style sheets.

Have a look at the page as rendered by "Stylesheet1," if you're not already, and view the page's source code (right-click on the page and select View Page Source) to see the CSS code stored in that style sheet. The beginning of this stylesheet tells the browser to display text within the document's body element at 100% of the size set by the user (as opposed to shrinking or enlarging it) and in the Lucida Sans font. It also applies a 20-pixel margin and a line-height of 26 pixels. Scrolling down to the bottom of the stylesheet, note that the a element is set to display in black (#000000) and with an underline. If you scan through the rest of the document, you should notice some other useful settings. Don't worry if you don't follow all of the settings at this point; you should have a clearer understanding after working through this page of the lesson.

The basic syntax used in CSS coding is:

selector {property: value}

where selector is some element, property is one of its attributes and value is the value that you want to assign to the attribute. I'll again refer you to the w3schools site for more CSS syntax and selector details. Pay particular attention to the "class selector," which is used when you don't want every element of a particular type to be styled in the same way (e.g., if you wanted some paragraphs to be aligned to the left and some to the right), and the "id selector," which is used to style a specific element.

Where to put CSS

CSS code can be written in three places:

• External style sheet - in an entirely separate file from the HTML document
• Internal style sheet - in the HTML document's head section
• Inline - the style is made an attribute of the desired HTML element

When the CSS code is stored in an external style sheet, a critical step is to add a reference to that style sheet in the HTML document's head section. The table below (adapted from the w3schools site) highlights this important setting.

<html>
<head>
<link rel="stylesheet" type="text/css"
href="ex2.css" />
</head>

<body>
<h1>This is a header 1</h1>
<hr />

<p>You can see that the style sheet
formats the text</p>

<p><a href="http://www.w3schools.com"
target="_blank">This is a link</a></p>

</body>
</html>

body {background-color: tan;}
h1 {color:maroon; font-size: 20pt}
hr {color:navy}
p {font-size: 11pt; margin-left:15px}
a:link   {color:green}
a:visited {color:yellow}
a:hover  {color:black}
a:active {color:blue}

Figure 3.11 External style sheet example (Adapted from w3schools)

To implement an internal style sheet, the actual CSS code should be stored in the head section of the HTML document rather than a link to an external file. The code should be surrounded by <style></style> tags as in this example:

<head>
  <style type="text/css">
    hr {color: sienna}
    p {margin-left: 20px}
    body {background-image: url("images/back40.gif")}
  </style>
</head>

Finally, to apply an inline style, the required CSS code should be assigned to the style attribute of the desired HTML element. Here is an example that changes the color and left margin settings for a paragraph element:

<p style="color: sienna; margin-left: 20px"> This is a paragraph </p>

Cascade order

The CSS language gets its name from the behavior exhibited when a page has styles applied from more than one of the sources described above. Styles are applied in the following order:

external — internal — inline

This order becomes important when the same selector appears in more than one style source. Consider the following example in which a page acquires styles from both an external and an internal style sheet:

h3
{
color:red;
text-align: left;
font-size: 8pt
}

h3
{
text-align: right;
font-size: 20pt
}

color: red;
text-align: right;
font-size: 20pt

Figure 3.12 An element acquiring style settings from both external and internal style sheets

All h3 elements on the page will be colored red based on the setting found in the external sheet. The cascading nature of CSS comes into play with the text-align and font-size attributes. The page's h3 elements will take on the settings from the internal style sheet, since those styles were applied after the styles found in the external style sheet.

Now that you've seen how CSS works, the rest of this section will cover some of the more commonly used styles.

Background styles

The background color for any element (though most especially for the page's body) can be set as in the following example from w3schools:

<html>
    <head>
    
        <style type="text/css">
            body {background-color:yellow}
            h1 {background-color: #00ff00}
            h2 {background-color: transparent}
            p {background-color: rgb(250,0,255)}
        </style>
    
    </head>

    <body>

    	<h1>This is header 1</h1>
    	<h2>This is header 2</h2>
    	<p>This is a paragraph</p>

    </body>
</html>

Note the different ways that the background-color property can be set. Valid values include names, 6-character hexadecimal values, and RGB values. A list of valid color names can be found at w3schools.

Text styles

The color of text can be altered using the color property. As with background colors, text colors can be specified using names, hexadecimal values or RGB values:

Code	Display
<html> <head> <style type="text/css"> h1 {color: #00ff00} h2 {color: #dda0dd} p {color: rgb(0,0,255)} </style> </head> <body> <h1>This is header 1</h1> <h2>This is header 2</h2> <p>This is a paragraph</p> </body> </html>

Figure 3.14 Text style example code (color)

Text can be aligned to the left, right, or center using the text-align property:

Code	Display
<html> <head> <style type="text/css"> h1 {text-align: center} h2 {text-align: left} p {text-align: right} </style> </head> <body> <h1>This is header 1</h1> <h2>This is header 2</h2> <p>This is a paragraph</p> </body> </html>

Figure 3.15 Text style example code (alignment)

Underlining text and producing a strikethrough effect is accomplished using the text-decoration property. Note that this is also the property used to remove the underline that is placed beneath linked text by default. Removing this underline is sometimes desirable, particularly when lots of links are clustered near each other.

Code	Display
<html> <head> <style type="text/css"> h1 {text-decoration: overline} h2 {text-decoration: line-through} h3 {text-decoration: underline} a {text-decoration: none} </style> </head> <body> <h1>This is header 1</h1> <h2>This is header 2</h2> <h3>This is header 3</h3> <p><a href="http://www.w3schools.com/default.asp">This is a link</a></p> </body> </html>

Figure 3.16 Text style example code (decoration)

The font used to display the text of an element can be set using the font-family property. Because the fonts loaded on the client device are unpredictable, it is a good idea to list multiple fonts in case the preferred one is not available.

Text can be sized using the font-size property. Note that valid values include percentages in relation to the parent element, lengths in pixel units, and names like small, large, smaller, and larger.

<html> <head> <style type="text/css"> h1 {font-size: 150%} h2 {font-size: 14px} p {font-size: small} </style> </head> <body> <h1>This is header 1</h1> <h2>This is header 2</h2> <p>This is a paragraph</p> </body> </html>

Figure 3.17 Text style example code (font-family)

To change the weight of text (i.e., its boldness), the font-weight property is used. Valid values include names like bold, bolder, lighter, or multiples of 100 ranging from 100 to 900, with 400 being normal weight and 700 being bold.

Code	Display
<html> <head> <style type="text/css"> p.normal {font-weight: normal} p.thick {font-weight: bold} p.thicker {font-weight: 900} </style> </head> <body> <p class="normal">This is a paragraph</p> <p class="thick">This is a paragraph</p> <p class="thicker">This is a paragraph</p> </body> </html>

Figure 3.18 Text style example code (font-weight)

For more details on font-related styling, refer to w3schools.

Margin styles

The space around elements can be specified using the margin-top, margin-right, margin-bottom, and margin-left attributes. These margin attributes can be set using values in pixel units, centimeters or as a percentage of the element's container. For example:

{margin-left: 2cm}
{margin-left: 20px}
{margin-left: 10%}

Note that all four margins can be set at once using the margin property. The values should be specified in the order top, right, bottom, and left:

{margin: 2px 4px 2px 4px}

Table styles

Some of the more important styles to understand in a web mapping context are those involving tables. The border properties are used to control the width, color, and style (e.g., solid or dashed) of the borders of tables and their cells. Different settings can be applied to each side with separate declarations, or the same settings applied to all sides in one declaration. The latter option, which is the most common, has this syntax:

border: thin solid gray

See w3schools' CSS Border page for more details on the usage of the border properties.

Tables drawn with a border have their cells detached or separated from one another by default. Personally, I find this behavior to be annoying and prefer to collapse the borders using the setting:

border-collapse: collapse

Table without a border-collapse setting (or set to border-collapse: separate)

Table with border-collapse: collapse setting

Figure 3.19 The table element's border-collapse style

Another default behavior that I find annoying is that empty cells are not displayed with a border. (This actually only applies to tables with detached borders; when borders are collapsed, empty cells will be visible no matter what.) To override this behavior, the empty-cells property is used:

empty-cells: show

Finally, the padding properties are used to specify the amount of space between the outside of an element's container and its content. Applying padding settings to td elements is commonly done to control the amount of space between a table cell border and its text. Again, padding can be controlled on a side-to-side basis or in a single declaration. The most common setting is to pad the cells equally on all four sides, which can be done as follows:

padding: 5px

The following CSS styling example applies some of these styles and some that were described earlier to produce a visually appealing table:

table {
    background-color:#FFFFFF;
    border: solid #000 3px;
    width: 400px;
}

table td {
    padding: 5px;
    border: solid #000 1px;
}

.data {
    color: #000000;
    text-align: right;
    background-color: #CCCCCC;
}

.toprow {
    font-style: italic;
    text-align: center;
    background-color: #FFFFCC;
}

.leftcol {
    font-weight: bold;
    text-align: left;
    width: 150px;
    background-color: #CCCCCC;
}

<table cellspacing="2">
  <tr class="toprow">
    <td>&nbsp;</td>
    <td>John</td>
    <td>Jane</td>
    <td>Total</td>
  </tr>
  <tr>
    <td class="leftcol">January</td>
    <td class="data">123</td>
    <td class="data">234</td>
    <td class="data">357</td>
  </tr>
  <tr>
    <td class="leftcol">February</td>
    <td class="data">135</td>
    <td class="data">246</td>
    <td class="data">381</td>
  </tr>
  <tr>
    <td class="leftcol">March</td>
    <td class="data">257</td>
    <td class="data">368</td>
    <td class="data">625</td>
  </tr>
  <tr>
    <td class="leftcol">Total</td>
    <td class="data">515</td>
    <td class="data">848</td>
    <td class="data">1363</td>
  </tr>
</table>

By now, you should have been sent a document containing text that I’d like you to convert to a valid XHTML Strict document. Match the formatting found in the document as closely as possible, paying particular attention to text alignment, font size, and font weight. Some of the formatting will require CSS, which you should write in either an external file (this is preferred) or in the head section of the XHTML doc. 

The goal of this project is to test your ability to code the document from scratch, so avoid using applications that generate the HTML code for you, such as Word. They almost invariably generate more code than is actually needed and your grade will be docked considerably if you use one. Instead, I recommend you use a basic text editor like Notepad or an editor designed for HTML coding if you have experience with one.  (We'll discuss some of these later in the course.)

You can refer to the links below for an example in which I've replicated a document similar to the one you've been assigned:
Example document
My solution: XHTML and CSS 

To see the source code of the solution, you can save the files locally and open them in a text editor.  Or simply follow the XHTML link to open it in your browser, use Ctrl-U to view the source code, then follow the link to the CSS file to see the style settings.

You may be tempted to find your assigned document online and copy its source code. To discourage this, I’ve made small modifications to each document. If I find that you’ve submitted a document that matches the original and not the one that I sent you, I will consider it an academic integrity violation (resulting in a grade of 0).

For full credit, your page must pass through the World Wide Web Consortium’s page validator without errors.

Your Portfolio

From this point on in the course, you should be publishing your assignments to your Portfolio site. 

1. Following the instructions in Portfolios, connect to your web space.
2. There will possibly be a default index.html page in your www or htdocs (InfinityFree) folder.  Modify this page (or create a new index.html page altogether) to include links to your first three assignments, along with anything else you want to include on your page.
3. After uploading your index.html page, I will be able to view it through the URL you setup while setting up your portfolio. For example, if you picked the subdomain xyz123geog863 and the domaine free.nf, then the URL to view your web page would be http://xyz123geog863.free.nf  (You should test this to confirm - not this example does not go anywhere.)
4. Note that when a URL ends in a folder name rather than a file name, the web browser looks for a file by the name of index.html or index.htm in that folder.  This is why index.html can be omitted when attempting to view that page.

Deliverables

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

1. Click on the Assignment 3 Submission to submit a link to your project page (a link to your portfolio index page is OK too if it contains a link to your project). (70 of 100 points)
2. I will be checking your page against the World Wide Web Consortium’s page validator. For full credit, your page must pass through without errors. (25 of 100 points)
3. Be sure to include a link to your app from Lesson 1 in your portfolio (5 of 100 points).
4. Complete the Lesson 3 quiz.

In this lesson, you learned about the core languages involved in web publishing. While knowledge of these languages isn't completely necessary for producing web mapping apps, you are now likely to have a much better understanding of the pages in which your maps will reside and you'll also be better equipped to develop pages of a higher quality.

In Lesson 4, you'll be introduced to Esri's ArcGIS API for JavaScript and use it to create a map of your hometown.

Over the rest of this course, we’ll be working with version 4.x of the ArcGIS Maps SDK (Software Development Kit) for JavaScript. This version represents a major change from the previous one (3.x) in terms of both coding syntax and what you can do with the SDK. Probably the biggest upgrade was in the ability to develop 3D apps that run directly in the browser without the need for a plugin. One of the best resources for ArcGIS Maps SDK for JS developers is the SDK’s documentation (https://developers.arcgis.com/javascript/latest/). It provides a slew of sample pages that demonstrate how to accomplish various tasks with the SDK. A good method for learning the SDK, especially for novice developers, is to find a sample that does something close to what you’d like and modify it to your liking. So we’ll develop our first simple apps by taking that approach.

Note: Esri began using the ArcGIS Maps SDK for JavaScript branding for this technology in December 2022.  Prior to that, it was referred to as the ArcGIS API for JavaScript, or simply the JavaScript API.  I've  attempted to update the name to the current nomenclature throughout the class lessons, but if you happen to see the old name, rest assured that we're talking about the same technology.   

Objectives

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

• incorporate the Esri ArcGIS Maps SDK for JavaScript into a web page through a content delivery network or downloaded locally;
• describe how Asynchronous Module Declaration (AMD) works;
• orient yourself to the ArcGIS Maps SDK for JavaScript documentation at https://developers.arcgis.com/javascript/latest/;
• navigate and interpret the Maps SDK for JS Core API Reference;
• modify Esri samples in their code sandbox and/or CodePen;
• identify the foundational classes in the SDK (Map, MapView, SceneView) and describe the relationships between them;
• incorporate web maps like you created in Lesson 1 and web scenes into a JS app;
• navigate a 3D scene;
• set object properties through their constructor or after initialization;
• use autocasting to avoid explicitly importing certain modules

Questions?

If you have any questions now or at any point during this week, please feel free to post them to the Lesson 4 Discussion Forum. (That forum can be accessed at any time by clicking on the Discussions tab.)

Lesson 4 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.

As mentioned earlier, modifying existing sample code is a common way to begin learning a new programming language or SDK.  Thankfully, Esri offers a "sandbox" environment for experimenting with the samples found in their SDK.  Let's use this sandbox to start our work.

1. On the SDK home page, click on the Sample Code tab.

   

   Image developed by J. Detwiler © Penn State with ArcGIS and licensed under CC BY-NC-SA 4.0

   There, you should see a list of Get started... samples.

2. Click on the Intro to MapView (2D) link. Like the other Samples pages, you should see a map embedded at the top of the page. Beneath the map, you should see buttons labeled Explore in the sandbox, Open in CodePen, View live and Download ESM sample.
3. Click the Open in CodePen button. CodePen shows you the same map you just saw at the bottom of the page and the source code that produces that map on the top. The size of the "Preview" panel can be adjusted by dragging the horizontal bar separating that panel from the source code panels up or down. The power of CodePen is the ability to modify the source code and quickly see the result.
   
   CodePen is built to encourage the separation of HTML, CSS, and JS code (a good development practice) with separate panels for each.  However, note that it's OK to include CSS and JS in with the HTML, which is what happens when you open an Esri sample in CodePen.  
   
   Also note that it's possible to reconfigure CodePen such that the code panels are on the left or right rather than on the top.  (I prefer having them on the left and the Preview panel on the right.)  Making this change is done by clicking the Change View button (found next to the Settings button).
   
   The sample is coded so that the map is centered over Scandinavia at a zoom level of 4. What if you wanted to display the United States instead? That’s easy!
4. Modify line 30 (or thereabouts - as the documentation does occasionally get updated) so that the MapView’s center property is set to a lon/lat array of [-95, 40].  You should see that the Preview panel automatically updates as you edit the code.  I find this to be annoying when working on map pages, so I go into Settings > Behavior, and toggle the Auto-Updating Preview setting to off.  When making this setting, you'll need to click the Run button to see the result of your code changes.
   
   Now, let’s say you wanted to use a different basemap.
5. Change line 23 so that the Map’s basemap property is set to "terrain" and again click the Run button. As you can see, the CodePen sandbox makes it very convenient to “play around” with the code samples.
   
   Note: We’ll see shortly how you’d know what other values can be used to set the basemap property.

An exciting feature of version 4 of Esri's SDK for JavaScript is its support for 3D scenes. Let’s have a look at a basic 3D sample.

1. Go back to the Sample Code Overview page and click on the Intro to SceneView (3D) link.
2. Using the same approach that you used for the 2D map, view the sample code in the CodePen sandbox and change the map’s center to the same coordinates and the scale to 4000000.

Note: Most of you have probably explored a 3D map like this one, though you may not be aware of all of the navigation options available to you. Read about the various mouse and keyboard controls and their associated effects in the documentation of the SceneView class, and be sure to try them out!

Also note that in addition to the Open in CodePen option, the sample pages also offer an Explore in the sandbox option.  This is Esri's own sandbox for experimenting with their samples, much like CodePen.

The samples in the SDK documentation are written with the CSS and JavaScript code embedded within the HTML code. This is fine for simple apps, but for more complex apps it is recommended that you write the CSS and JavaScript in separate files. Among the benefits to this approach are:

• improved organization, making it easier to find your CSS or JS code rather than having to hunt in your HTML code for it;
• the ability to reuse code that is applicable across projects;
• shorter page load time through caching of the external files; and
• the ability to “minify” the code, making it a smaller download for client devices.

Let's revisit the Intro to MapView (2D) sample in CodePen, looking to follow a code separation approach.  

1. Return to CodePen.  (Here's the CodePen homepage if you no longer have the earlier samples open.)
2. If you don’t yet have a CodePen account, click the Sign Up button and supply the info needed to establish a free account.
   
   After signing up, your browser window should open up to a new Pen (environment for authoring a new web page).
3. Click the Change View button in the upper right and select your preferred Editor Layout option.
4. Click the Save button. This will give your pen a randomly generated name (in the upper left).
5. Click on the pencil icon to the right of the pen name and assign it a new name of hello_map.
6. Go back to the Intro to MapView (2D) sample sandbox. Copy and Paste the three components of the sample into their respective panels in CodePen. Note the following:
   - You should omit the DOCTYPE declaration from the HTML piece.
   - Do not include the style and script tags surrounding the CSS and JS code, respectively.
   - Make sure that the <script src=....></script> tag is in the HTML window
   - You may find it most convenient to copy the complete sample (CSS and JS included) to the HTML panel, then cut and paste the CSS and JS pieces to their respective panels. (You can remove the empty style and script elements from your HTML when done.)
   - The code panels are resizable; if you’ve set the Editor Layout such that the code panels are arranged vertically to the side of the Preview panel, note that you can double-click on any of the panel headings to maximize that panel.

Playgrounds like Esri’s SDK for JS sandbox and CodePen are great tools for experimenting with samples and developing your own apps from scratch, but when you want to “go live” with an app so that others can use it, you’ll want to host your code on a web server. You used a web hosting service in the previous lesson and we’re going to use that service again now.

When building apps, a convention that many developers follow is to create a folder on the web server for their site/app, and into that folder place an HTML file called index.html (or default.html). For example, in building my “app_to_end_all_apps” site, I’d create a sub-folder by that name in my www folder, then upload my app’s HTML markup in a file named index.html to that sub-folder. I could then view my app using the URL: http://detwilergeog863.000webhostapp.com/app_to_end_all_apps/. (Note: This app doesn't actually exist, so you should expect a File Not Found error if you follow the link.) I could omit the index.html from the URL since browsers are built to look for a file by that name when the URL ends in a folder.

1. On your computer, wherever you’re storing your coursework, create a folder called hello_map. (The name for this app is a play on computer programming's Hello, World tradition.)
2. Create a new blank text file, copy your HTML code from CodePen into that file, and save it as index.html in your hello_map folder. Be sure to add a <!DOCTYPE html> line at the top of the file to declare your code as HTML 5.
3. Create another blank text file, copy your CSS code into that file, and save it as main.css, again in the hello_map folder.
4. Finally, create a third text file for your JS code. Call it main.js.
   
   Unlike the CodePen environment, the end user’s browser won’t know that there is a CSS file and a JS file that goes along with the HTML file unless you tell it.
5. To reference your CSS code, add the following line above the line that references Esri’s main.css stylesheet:

   <link rel="stylesheet" href="main.css"></link>

6. To reference your JS code, add the following line after the line that references Esri’s SDK for JS:

   <script src="main.js"></script>

   Note: These references use relative paths to locate the files; the browser will look for the files in the same folder as the HTML file since no folders were included in the paths. Because the architecture of this app is not particularly complicated, I’m directing you to store all of the files together. But you should keep in mind that many developers prefer to store their files in sub-folders (e.g., css/, js/ or styles/, scripts/) for organizational reasons.
7. Open this local copy of your app in a browser (right-click on the file in Windows Explorer and select Open with). As you develop your app, you can leave it open in your browser and Refresh (F5) whenever you want to see the result of your changes.
8. To publish your app to a public facing location, open a connection to your www space on the 000webhost web server (using either FileZilla or your webspace file manager).
9. Replicate the directory structure you have locally by creating a folder called hello_map.
10. Upload the three files associated with the app to that folder.
11. Test the app by pointing your browser to <yourwebspaceURL>/hello_map, replacing <yourwebspaceURL> with your website you created.

For extra practice, go through the process of copying the 3D sample code to CodePen and then create a site called hello_scene in your web space.

Now that you’ve had a chance to dive right into building your own map apps, it’s time to learn more about what’s happening in those apps before you can go further with the SDK. Let's examine these start-up pages and discuss their HTML, CSS and JS pieces, beginning with the HTML of the 2D sample. Be sure to open up each of the three files so you can follow along with the discussion.

We’ve already been exposed to the Map, MapView and SceneView classes in experimenting with and discussing the Esri samples. Now, let’s learn some more about these fundamental classes.

In version 4.x of Esri’s SDK, the Map class is used to store a basemap and layers. The actual rendering of the Map on the page is done through the use of a View: either a MapView (2D) or a SceneView (3D). If you look back at the two samples we’ve been working with, you’ll note that a Map object is created and its basemap property set in both cases. The only difference is that in the 3D example, the Map’s ground property is set in addition to its basemap. Setting the ground property renders the map such that the underlying terrain can be seen. The property can be set to “world-elevation” to use Esri’s default world elevation service, but it is also possible to use other elevation layers. (Setting the ground property in a Map that is displayed in a MapView has no effect since the MapView class only renders Maps in 2D.)

The other commonly used property of the Map class is its layers property. We’ll look at adding layers to a map in depth later in the course.

Looking at the documentation of the MapView class, you’ll see that it contains a whole host of properties. The most commonly set MapView properties include:

• map: set to an object of the Map class
• container: set to a string matching the id of an element on the page (or to a reference to the element itself)
• center: set to an object of the Point class
• zoom: set to a number, typically ranging from 3 (small scale)-18 (large scale)
• rotation: set to a number ranging from 0 to 360 degrees to rotate due North

Note that while center and zoom are commonly used to specify the part of the Map that’s currently visible, it’s also possible to do so using the extent and/or scale properties. Take care that you’re setting these properties logically. As explained in the documentation, if both the zoom and scale are set, then the scale setting will override the zoom setting. Similarly, an extent setting will override any center, zoom or scale setting.

3D SceneViews have the same set of properties as listed above, with the exception of rotation.

While it’s typical for a page to contain just a single View, you should keep in mind that you’re not limited to that sort of layout. It is sometimes useful to employ multiple views on the page, as in this sample that contains both a MapView and a SceneView.

The maps we’ve created so far have been pretty boring, so let's spice it up a tiny bit by plotting a point. We’ll see later in the course how to display features stored in one of Esri’s vector data formats. What I’m talking about doing right now is how you’d display a small number of geometries (points, lines or polygons) whose coordinates you’ve hard coded into the app, or perhaps acquired through user input.

1. Create a copy of your hello_map folder (and its files) called lesson 4.
2. Set the HTML doc’s title to Plotting a point.
   
   Adding geometries the way I’m describing here involves creating one or more objects of the Graphic class.
3. Look up the Graphic class in the documentation by going to References > Core API > esri > Graphic. 
   
   As the overview explains, important properties of the Graphic class are geometry, symbol, and attributes. Attributes are important in situations where you want the user to be able to click on the graphic and see information about it in a popup window. We’re going to keep this simple, so we’ll focus on just the geometry and symbol, starting with the geometry.
   
   Looking at the geometry property's description, you should note its type is listed as GeometryUnion.  This class was added to the SDK at version 4.32 (Feb 2025) and, frankly, is a bit tricky to explain.  Taking a step back, if you were to guess that you could set a Graphic's geometry to a point, polyline, or polygon, you'd be correct.  Speaking in more precise object-oriented terms, you could set the geometry property to an object of the Point class, or Polyline class, or Polygon class.
4. If you click on the GeometryUnion link in the documentation, you should be taken to a page listing several "Union" types, GeometryUnion being one of them.  Note that the Point, Polyline, and Polygon classes are listed as part of the GeometryUnion type definition (among a few other classes, like Extent).
5. We want to add a point to the map, so follow the link to the Point class.  
   
   An important piece of info found in the documentation of the Point class (in the box at the very top) is that it inherits from the Geometry class.
6. Click on the Geometry link to go to that class's documentation page.

Image developed by J. Detwiler © Penn State with ArcGIS API, 2021 and licensed under CC BY-NC-SA 4.0

7. Its description tells you that Geometry is a "base class" and that it has no constructor. What this means is that you can’t create a plain Geometry object. You’d have to create a Point, Polyline, or Polygon object instead. The Geometry class exists in the abstract as a way to define the properties and methods that the Point, Polyline, and Polygon classes share in common (such as the extent property). (You might find it helpful to think of cars as an analogy. If you’re shopping for a new set of wheels, you don’t just buy a generic car; you buy some model of Ford, Toyota, Volkswagen, etc.)
   
   In object-oriented programming terminology, the Geometry class can be described as the parent class or super-class of the Point, Polyline, and Polygon classes (which are themselves child classes or sub-classes). These class relationships are conveyed at the very top of the class pages in the SDK.  (Look for the Inheritance and Subclasses headings.) It turns out that you’ll find all of the properties and methods the Point, Polylin,e and Polygon classes inherit from Geometry on their pages. Not all SDKs are written this way (i.e., the SDK could have been organized such that you’d have to view the property and method lists on both the Point and Geometry pages to know all Point capabilities).
   
   Prior to version 4.32 of the SDK, the Graphic class's geometry property was listed with a type of Geometry (which linked to the Geometry class page).  The reason for the change to GeometryUnion has to do with using the SDK with TypeScript, which you can think of as a cousin of JavaScript (who lives life according to a stricter set of rules than the laid-back JavaScript ).  That's beyond the scope of where we're at right now, so I would simply recommend that you recall that when following the GeometryUnion link, we saw that list of Geometry sub-classes, including Point, Polyline, and Polygon.  That signifies to us that we're allowed to set the geometry property to an object of any of those classes.
8. Getting back to our task of adding a point to the map, follow the Point link to return to that class page.  (Or click Back in your browser.)
   
   The Point class has several properties, but the ones we want here are latitude and longitude.

9. To the bottom of your JS code, add the following:

   const pt = new Point({
     latitude: 40.792,
     longitude: -77.871 
   });

   We’ve just created a Point geometry for our Graphic, but have we forgotten something? Yes, if we want to work with the Point class, we need to include a reference to its module in our require() declaration.

10. Move to the top of your JS code and add "esri/geometry/Point" to the module list, then add Point to the callback function argument list (making sure you match its position in the list with the module’s position in the module list).
11. With the Point geometry created, let’s move on to the symbol. In the documentation, make your way back to the Graphic class’s property list.
    
    Looking at the symbol property, you'll see that its type is listed as SymbolUnion.  Similar to what we saw with the geometry property, the symbol property used to have its type listed as Symbol.  And, in fact, there is a link to the Symbol class page in the description of the symbol property. Following that Symbol link, you should note that, like the Geometry class, Symbol is an abstract parent class for several child classes. We’re trying to symbolize a Point here, so the subclass we need is MarkerSymbol. (We’d need LineSymbol for a Polyline and FillSymbol for a Polygon.)

12. Follow the MarkerSymbol link in the list of subclasses.

    

    Image developed by J. Detwiler © Penn State with ArcGIS API, 2021 and licensed under CC BY-NC-SA 4.0

    Reading over the MarkerSymbol class description, you should note that it is itself another abstract parent class, having subclasses PictureMarkerSymbol and SimpleMarkerSymbol. If you wanted to depict the point using some kind of graphic stored on disk, then you’d use the PictureMarkerSymbol class. We’ll keep our app simple by using the SimpleMarkerSymbol class, which will allow us to choose from a set of predefined shapes and apply a desired color and size.

13. Follow the SimpleMarkerSymbol link in the list of subclasses. Read over the class description and note the color, size and style properties.

14. Create a new SimpleMarker as follows:

    const sym = new SimpleMarkerSymbol({
      color: "blue",
      style: "square",
      size: 12
    });

15. Update your require() declaration so that this newly added SimpleMarkerSymbol code will execute properly. Hint: the information you need is at the top of the class page in the SDK.

16. With the geometry and symbol created, we’re ready to create a new Graphic object:

    const ptGraphic = new Graphic({
      geometry:pt,
      symbol:sym
    });

17. We saw earlier in the lesson that the Map class has a method called add() for adding a layer. One way we could accomplish our goal here would be to add this Graphic to a new GraphicsLayer, then add the GraphicsLayer to our Map. However, a slightly easier alternative is to take advantage of the fact that the MapView has a graphics collection associated with it. We can simply add our Graphic to that collection as follows:

    view.graphics.add(ptGraphic);

18. Be sure to modify your require() declaration so that the browser will be able to find the Graphic class you just referenced.

19. Test your app and confirm that a blue square is added to the map.
    
    Here is the complete main.js file, in case you're unable to get your map working as desired:

    require([
      "esri/Map",
      "esri/views/MapView",
      "esri/geometry/Point",
      "esri/symbols/SimpleMarkerSymbol",
      "esri/Graphic"
    ], (Map, MapView, Point, SimpleMarkerSymbol, Graphic) => {
      const map = new Map({
        basemap: "topo-vector"
      });
    
      const view = new MapView({
        container: "viewDiv",
        map: map,
        zoom: 4,
        center: [15, 65] // longitude, latitude
      });
    
      const pt = new Point({
        latitude: 40.792,
        longitude: -77.871 
      });
    
      const sym = new SimpleMarkerSymbol({
        color: "blue",
        style: "square",
        size: 12
      });	
    
      const ptGraphic = new Graphic({
        geometry: pt,
        symbol: sym
      });
    
      view.graphics.add(ptGraphic);
    });
    

    With that, you've reached the end of this lesson's content.  Move on to the next page to access the assignment associated with this lesson.

The coding assignment for this lesson is in three parts.  Here are some instructions for completing the assignment.

Part I

In an earlier course in our curriculum, you may have learned about the United States Geological Survey's Geographic Names Information System and the Getty Thesaurus of Geographic Names (for places outside the U.S.). Use those tools or any other resources at your disposal to locate the latitude/longitude coordinates of your hometown.  (One handy way to get a location's coordinates is to pull it up in Google Maps, right-click on the location and select What's Here?)

Modify the lesson4 app code from earlier in the lesson so that the map is centered on and a marker points to your hometown. The easiest approach to this problem would be to insert your hometown coordinates in both lines of the script where coordinates are found. However, I hope you'll recognize that repeating values in different parts of a program is generally a bad practice because of situations like this where you end up having to make revisions in multiple places. So, while you're changing the location displayed on the map, revise the code so that it is as efficient as possible.

Part II

As you know, one way that web maps convey information to the user is through popup windows.  We saw in Lesson 1 that layers can have popups configured using GUI-based tools in ArcGIS Online.  In the next lesson, we'll see how the Esri's SDK makes it possible to easily incorporate layers and maps configured in ArcGIS Online into an app.  And later we'll see how to configure layer popups programmatically.  In this lesson, we've dealt with graphics, which don't have an attribute table associated with them.  However, it's still possible to code the display of popups when the user clicks on a graphic.

For Part II, I'd like you to create a copy of the app from Part I and modify it so that clicking on a town marker will display some information about it (e.g., its name, population, when it was established, etc.).  We haven't covered how to do this, but it is something that's demonstrated in an Esri code sample.  You might be tempted to search the Sample Code area of the documentation for "popups," but all of the samples with that tag involve data layers rather than graphics.  The sample I'm thinking of can be found under Graphics in the list of Sample Code categories.  

Part III

Create a pen in CodePen that contains your code from either Part I or Part II (your choice). 

Deliverables

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

1. Post the app containing your hometown map to your e-portfolio. (30 of 100 points)
2. Post the app that displays popup info for your hometown to your e-portfolio. (30 of 100 points)
3. Provide a link to your CodePen map -- or embed the pen itself -- in your e-portfolio. (20 of 100 points)
4. Below one of your maps (or on your e-portfolio index page), include some reflection on what you learned from the lesson and/or any concepts that you found to be confusing (minimum 200 words). (20 of 100 points)
5. Click on the Assignment 4 Submission to submit a link to your project page. (A link to your e-portfolio index page is OK too if it contains a link to your project.)
6. Complete the Lesson 4 quiz.

Note: The examples you've seen so far are all likely to have shown the div element used to display the map/scene filling the whole browser window.  You could add your reflection text beneath that div, but the map would still fill the whole window and it may not be immediately clear to the viewer that there was content below the map.  It's probably a better idea to shrink the height of the map div to something less than 100%.  If you're unsure how to go about this, here is an example that demonstrates one approach to including text on the page with the map.

In this lesson, you built your first apps using Esri's JavaScript API. Even the simple map that you created involves a number of different technologies (HTML, CSS,  JavaScript, the Document Object Model, and the Dojo JavaScript framework) and it is important that you have a firm understanding of this material before moving on. If you skipped over the w3schools tutorials referenced in the lesson, be sure to go back and complete them.  You might also use any free study time to work through other JavaScript references such as the ones recommended in the syllabus.

In Lesson 5, you'll see how to spice up the rather dull product of Lesson 4 by adding data layers.  You'll also learn about a number of coding tools and strategies that will help you as a JavaScript developer.

So far in the course, you've spent the bulk of your time learning about the various web technologies that are involved in the creation of even the simplest web map applications. The last project deliverables were fairly basic, and you're probably itching to create apps that involve layers of your own data.  In Lesson 5, we'll see how to create apps that incorporate web maps configured in ArcGIS Online and how to add various types of data layers to a map using Esri's Maps SDK for JS.  We'll finish with a discussion of some coding tips now that you've gotten your feet wet with web app development.

Objectives

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

• incorporate web maps (like in Lesson1) and web scenes into a JS app;
• use autocasting to avoid explicitly importing certain modules;
• understand how the REST web services protocol works;
• add various data layer types to a map;
• employ strategies to debug apps that aren't working properly;
• identify features in integrated development environments (IDEs) that aid in the coding process.

Questions?

If you have any questions now or at any point during this week, please feel free to post them to the Lesson 5 Discussion Forum. (That forum can be accessed at any time by clicking on the Discussions tab.)

Lesson 5 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.

Back in Lesson 1, you created a web map of the Jen & Barry’s scenario data in ArcGIS Online, then incorporated that web map into an app using some Esri app building options that require no coding: embedding within a website, using a configurable app template, and using Experience Builder. It turns out that even if you are coding your app, it’s quite easy to incorporate web maps like the one from Lesson 1 into your app. In fact, while the API provides the ability to configure your app programmatically (adding layers, symbolizing them, configuring popups, etc.), even the best coder is likely to find it helpful to use the ArcGIS Online GUI to reduce their coding burden.

In looking at the Load a basic web scene sample (or perhaps earlier samples), you may have noticed a comment “autocasts as new PortalItem().” So what does that mean? Certain properties in the SDK for JS have been coded behind the scenes by Esri so that our jobs are made a bit easier. Like all properties, the ones that support autocasting are written expecting to be set to a particular data type (e.g., string, number, object). Where these properties differ is that they can also be set to a JavaScript object that “looks like” the required object type. This is a concept that’s much easier to explain by example, so let’s work through what the Load a basic web scene code would look like if autocasting was not built into the SDK.

1. Open the Core API Reference in the documentation and look up the WebScene class.
2. Find the portalItem property and note that its data type is listed as PortalItem. Ordinarily, this would mean that you’d need to create an object of that class (using new PortalItem) to set the WebScene’s portalItem property. And of course, that would mean adding the PortalItem class to your require() declaration. Here is how the code would need to look if autocasting were not available, alongside how the sample is actually coded:

const [SceneView, WebScene, PortalItem] = await $arcgis.import([
  "@arcgis/core/views/SceneView.js",
  "@arcgis/core/WebScene.js",
  "@arcgis/core/portal/PortalItem.js"
]);

const myPortalItem = new PortalItem({
  id: "3a9976baef9240ab8645ee25c7e9c096"
});

const scene = new WebScene({
  portalItem: myPortalItem
});

const view = new SceneView({
  map: scene,
  container: "viewDiv",
  padding: { top: 40 }
});

const [SceneView, WebScene] = await $arcgis.import([
  "@arcgis/core/views/SceneView.js",
  "@arcgis/core/WebScene.js"
]);

const scene = new WebScene({
  portalItem: {
    id: "3a9976baef9240ab8645ee25c7e9c096"
  }
});

const view = new SceneView({
  map: scene,
  container: "viewDiv",
  padding: { top: 40 }
});

center: [-112, 38]

const [Map, MapView, Point] = await $arcgis.import([
  "@arcgis/core/Map.js",
  "@arcgis/core/views/MapView.js",
  "@arcgis/core/geometry/Point.js"
]);

const map = new Map({
  basemap: "streets"
});

const pt = new Point({
  latitude: 65,
  longitude: 15
});

const view = new MapView({
  container: "viewDiv",
  map: map,
  zoom: 4,
  center: pt
});

const [Map, MapView] = await $arcgis.import([
  "@arcgis/core/Map.js",
  "@arcgis/core/views/MapView.js"
]);

const map = new Map({
  basemap: "streets"
});

const view = new MapView({
  container: "viewDiv",
  map: map,
  zoom: 4,
  center: {
    latitude: 65,
    longitude: 15
  }
});

const [Map, MapView] = await $arcgis.import([
  "@arcgis/core/Map.js",
  "@arcgis/core/views/MapView.js"
]);

const map = new Map({
  basemap: "streets"
});

const view = new MapView({
  container: "viewDiv",
  map: map,
  zoom: 4,
  center: [15, 65]
});

Thus far in the course, the apps we’ve built have consumed map services hosted by Esri on their ArcGIS Online platform. Another common source for map services is ArcGIS Server. Many organizations, in both the private and public sectors, implement their own instances of ArcGIS Server as a means of publishing their geographic data. The JS apps built by these organizations typically consume their own services. 

Esri makes it possible to consume their web services through the two primary architectural styles employed by web developers today: SOAP (Simple Object Access Protocol) and REST (REpresentational State Transfer). The SOAP protocol was developed by Microsoft in the 1990s and can be thought of as object-oriented programming in which the objects live on some web server and the programming code that manipulates them lives on some client machine. REST came later and has overtaken SOAP in popularity because of its ease of use. RESTful web services, as they are sometimes called, progressively expose their functionality through URLs that can be invoked almost like properties and methods. They send responses to the client applications in the form of XML or JSON.

One important aspect of using this framework is that information on the various REST web services published through an ArcGIS Server instance can be discovered through a series of pages called the Services Directory. This directory can be viewed in a web browser using a URL of the form <server name>/arcgis/rest/services.

Developers working with services published through ArcGIS Server do so using Esri’s REST API. Esri had their own short (3-hour) web course that did a nice job of explaining how to use the REST API.  They retired that course, but I did manage to capture the written lesson content from it -- Esri Training: Introduction to the ArcGIS for Server REST API (as PDF).  Please work through this document, paying particular attention to the parts of the course dealing with layer services, as that is what we’ll be focusing on in this lesson. 

You should also be sure to consult the documentation -- ArcGIS Resources: REST API.

ArcGIS Server publishes data layers of several different types, depending on whether the underlying data source is vector or raster, the amount of data being served, the needs of the apps consuming them, etc.  In this part of the lesson, we’re going to walk through the most commonly used types, describing how they differ from one another, how they can be distinguished from layers of other types, under what circumstances they’re intended to be used, and how they are incorporated into an app.

In a moment, we'll take a detailed look at some commonly used layer types one by one.  Before doing so, here are some important properties that are defined under the abstract Layer class that is the parent to all of the layer sub-classes:

• opacity: set to a value from 0 to 1, with 0 making the layer completely transparent and 1 making it completely opaque (solid),
• title: set to a string specifying how the layer is labeled in widgets like the Legend and LayerList,
• visible: set to a Boolean controlling whether or not the layer is turned on/off.

We'll end this lesson with some content that will hopefully make you a bit more successful as a coder. We’ll talk about development environments (where you write your code) and debugging tools. But first, here are a few tips that apply regardless of the kind of programming you're doing:

• Write your code in baby steps. Start with something very simple (or a working sample that you modify slightly), test it, add a small piece, test again, etc. Avoid writing long blocks of code without testing. The more untested code you write, the harder it will be to identify errors.
• When inserting an opening brace, bracket or parenthesis, insert the matching closing character at the same time. If you wait to do that until after you've finished entering the intervening statements, you're apt to forget.
• When the JavaScript console reports multiple errors, fix just the first error, then reload the page. One error can cause several others to appear downstream; fixing it can cause the rest to disappear.
• As with writing in general, the best way to get past a block is often to take a break and come back to the code later. With a fresh look at your code, it may take just minutes to find a bug that you had banged your head against the wall about for hours the night before.

The coding assignment for this lesson is in three parts. Here are some instructions for completing the assignment.

Although we learned about adding WebMaps and WebScenes to our apps, for full credit on Parts I and II you will need to add layers to the Map as discussed in 5.4 Layer Types. This will be useful in the next lessons where we need to access layers for custom symbology, queries, and features.  

Part I

The Transportation Planning and Programming (TPP) division of the Texas Department of Transportation has published vector tile basemaps for Texas as services through ArcGIS Online. Find one of these services and create an app that displays its data in a 3D scene, zoomed in to the City of Houston.  

Hint: You can narrow down your search in ArcGIS Online to different content types like Maps, Layers, Scenes, etc. Some content types are broken into sub-categories as well. Use the ability to search by content type along with appropriate search terms to identify the correct service. (Make sure you're not searching only the Penn State group content!)

If you're unable to find the described service, create a 3D app that displays data from some other vector tile service for partial credit.

Part II

One of Esri's sample ArcGIS Server instances hosts a map service that contains U.S. cities, interstates, and state/county boundaries:

USA (MapServer)

Build an app that displays just the county boundaries on a 2D map. In your solution, you should be taking a snapshot of the data on the server and passing that to the client rather than passing the features themselves. Be sure to read the documentation carefully for how to display just the county sublayer. It might be a good idea to display all of the sublayers first before attempting to filter out some of them. 

Part III

In this lesson, you began using a relatively basic IDE, Notepad++. For the last part of this week's assignment, I'd like you to download and experiment with a different IDE (Visual Studio Code, Sublime, WebStorm, Eclipse, Netbeans, Komodo), then share your thoughts on it in a recorded video. If you know of a different javascript IDE that you'd like to review, let me know! Here are some detailed instructions:

1. Please go to the Assignment 5 IDE Review Sign-up page in the Lesson 5 module in Canvas to sign up for an IDE.  The sign-ups will be set up such that the IDEs receive more or less equal coverage. (If there's another IDE that you'd like to evaluate, check with the instructor first.)
2. Limit your video to 5 minutes.
3. In your demo, be sure to discuss the IDE features that were mentioned in the lesson. And feel free to talk about any interesting features that were not in the lesson.  (If demonstrating the IDE, please use files from a previous assignment rather than this week's.)
4. Give your thoughts on whether you plan to use the IDE instead of Notepad++.

Deliverables

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

NOTE: You'll need to zip the files to upload to the Canvas dropbox.

1. Upload the HTML, CSS, and JavaScript files associated with your TX DOT vector tile app.  Don't post this app to your e-portfolio. (40 of 100 points)
2. Upload the HTML, CSS, and JavaScript files associated with your county boundary app.  Don't post this app to your e-portfolio. (40 of 100 points)
3. Post a link to your IDE evaluation video to the Lesson 5 Discussion Forum. (20 of 100 points)
4. Complete the Lesson 5 quiz.

In the previous lesson, we looked at several of the different types of layers in Esri's Maps SDK for JS that can be added to a map. One of the most important tasks in building a useful geospatial web app is to render the map layers so that they effectively convey the desired information. That will be the focus of this lesson.

Lesson 6 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.

Throughout the course, we’ve talked about using GUI-based tools whenever possible to avoid or simplify coding. In Lesson 1, we used app templates and Experience Builder to compose apps without writing any code. In Lesson 5, we were developing apps using code, but saw that we could greatly simplify the code needed to produce a map by doing the map development in ArcGIS Online and bringing the map into the app via its item ID.

In this lesson on layer visualization, we again have options that greatly reduce the coding burden. If you have ArcGIS Enterprise, you can use desktop tools to visualize your layer, publish that layer as a service through your Enterprise instance, then add your layer to an app as we saw in the last lesson.

If you don’t have ArcGIS Server, you can still easily handle the visualization of layers without coding. The workflow is to upload your shapefile or file geodatabase as a hosted feature layer to ArcGIS Online, symbolize the layer using the same GUI tools we saw in Lesson 1, then add the layer to the map in your code using its item ID. Let’s walk through that workflow.

1. Sign in to ArcGIS Online.
   Recall that in Lesson 1, we created a new map, then added zipped shapefiles to that map. Here, our goal is to upload the shapefiles to AGO so that they can be manipulated as individual Feature Layer items.
2. On your Content page, select New item.
3. Drag and drop the Lesson 1 cities.zip shapefile from the File Explorer onto the appropriate box of the dialog (or click Your device to navigate to and select the zip file).
4. After selecting the shapefile, confirm that the create a hosted layer option is checked.
5. Add your name or initials to the default Title so that it will be unique.  AGO doesn't allow a service name to be duplicated within an organization.
6. Optionally, add tags that could be used to aid in discovering the layer (e.g., GEOG863).
7. Click Save.
8. In your list of content items, you should now see a cities item labeled as a Feature Layer (hosted).
9. Click on your cities feature layer to open its details page.
10. Click on the Visualization tab, then using the GUI, create some kind of thematic display of the cities data.
11. After you’re done styling the layer, click Save Layer.
12. To make it possible for others to view the layer without any authentication, click on the Overview tab, then choose Share > Everyone (public) > Save.
13. Now to bring this hosted feature layer into an app, we just need to create a FeatureLayer object using the item ID:

    const featureLayer = new FeatureLayer({
     portalItem: {
      id: “59d4705e7d2e48beb94faaa6b78307e7” //replace w/ your own layer ID
     }
    });
    
    map.add(featureLayer);
    

If you're wondering where that layer id comes from have a look at your browser window and you'll see something like :

http://pennstategis.maps.arcgis.com/home/webmap/viewer.html?useExisting=1&layers=59d4705e7d2e48beb94faaa6b78307e7

That last part after layers= is the layer id.

A quick and easy way to test this is to open the FeatureLayer sample referenced in Lesson 5, change the way the FeatureLayer is constructed, refresh the map, then zoom out (since the map is zoomed in on North Carolina and the Jen & Barry’s data is in Pennsylvania).

Note that it is also possible to do your layer visualization and publishing to AGO from ArcGIS Pro. The steps involved are described in detail in the AGO help if you’re interested.

Despite the handy methods for producing easy-to-deploy visualizations without coding discussed above, you may find it necessary to code visualizations using classes built into the Maps SDK for JS. As we’ll see, it is possible to develop layer renderings in both 2D Maps and 3D Scenes. The basic workflow entails manipulating Symbol, Renderer, and Layer objects. The rest of this lesson will focus on these classes.

The Symbol objects discussed earlier can be used in conjunction with Graphic objects to depict small numbers of geometries. However, they are more commonly used together with Renderer objects, which are used to visualize Layers. In this part of the lesson, we’ll look at the three Renderer classes: SimpleRenderer, ClassBreaksRenderer and UniqueValuesRenderer.

When setting up a map or scene programmatically, it can be difficult to figure out the initial viewpoint properties (e.g., a map’s center and zoom, or especially a scene’s tilt and heading). One way to determine these values is to write an app in which the MapView or SceneView is exposed through a global variable, run the app, adjust the view to your liking, then use the browser’s developer tools to obtain the values needed. I’ve written an app like this, so let’s walk through the process.

1. Open the Camera Properties Demo page in Chrome.
2. Open Chrome’s Developer Tools (three vertical dots icon > More tools > Developer tools) - or CTRL-SHIFT-I. Use the edge slider to make the developer tools panel wider for easier viewing.
3. Click on the Sources tab. This tab enables you to view all of the HTML, CSS and JS source code associated with the page.
4. In the left-hand pane, under the Page tab, you should see a list of server domains including Esri domains like js.arcgis.com and the free.nf domain.
5. Expand the free.nf domain.
6. Click on main.js to view its source code. (Note: This file hasn’t always appeared for me in my experience. If that happens to you, try refreshing the page with F5.)
   
   The key to this script is in the addition of a view property to the global window variable at the very end.  The property name could be anything that doesn't override an existing window property.  The property is set to the variable that references the app's SceneView object.  We've set the property on the global window variable because it's visible under the Watch tab.
7. In the right-hand pane, you should see a tab labeled Watch.
8. Click the Watch tab if it’s not selected already.
9. Click on the + sign to add a new Watch expression.
10. Type the expression window.view.camera.  You should see view and camera appear as auto-complete options as you type, indicating you're on the right track.
11. Hit Enter and a triangle should appear next to the expression, indicating there are properties that can be viewed.
12. Click on the window.view.camera entry in the Watch list to expand its property list.
13. Click on the (…) beside the heading property. You should see a value of 345, which should come as no surprise as that’s how the property was set in the source code.
14. You can likewise view the value held by the tilt property.
15. The position property was set to a Point object. You’ll need to expand its property list as you did for window.view.camera to see the important latitude, longitude and z settings. Note that these match what was set in the source code (unless you moved the map).
16. Leaving the Developer Tools panel open, go back to the app in the main Chrome window and change the viewpoint (maybe rotate the view from looking from the SE corner of the state to the NW to looking from the SW to the NE).
17. Return to the Developer Tools window and click on the Refresh button found in the Watch section heading. The properties you had viewed earlier should have reset to their closed state, but if you re-open them you should see a new set of values corresponding to the change you just made in the main window.

So… hopefully you can see the idea here. You can use this set of steps to find a viewpoint that meets your app’s purpose, then copy the necessary viewpoint settings into the app’s source code. You might consider creating your own copy of this app in case you want to refer back to it down the road.

Popups are a topic that would also fit in the lesson on UI development, but since they are usually configured along with the layer’s renderer, we’ll talk about them now.

We saw earlier in the course that popups can be associated with graphics, though they are typically used to present information contained in a layer’s attribute table.

The first point to understand on this topic is that views (MapViews and SceneViews) have a Popup object associated with them. Note the wording – “a Popup object.” Only one Popup window can be open at a time.

While it’s possible to set the Popup object’s contents, doing so would lock in what is shown regardless of which feature is clicked. The correct way to configure a layer’s popups is to set its PopupTemplate property. PopupTemplates are most often set up for FeatureLayers, but the ImageryLayer and CsvLayer classes also support them.

Looking at the popupTemplate property in the documentation, you should note that it’s labeled as an autocast property. Thus, we can create a PopupTemplate object without having to add its module to the import() array.

This week's assignment is rather open ended.  I'd like you to do the following:

1. Find/upload/publish a vector data service that interests you either on ArcGIS Online or on an ArcGIS Server instance,
2. Display the data from this service using a ClassBreaksRenderer, UniqueValueRenderer, or through the use of visual variables,
3. Configure popups (programmatically) to display information from the service's attribute table.

If you're having trouble deciding on what to map, you can search for your favorite topic on Esri's Living Atlas of the World. Go to Browse, restrict the search to layers and I'd recommend checking "Esri-only content" for better results. You can also search for a particular topic in the search bar. Then look for anything of interest that is a Feature Service. The renderers you'll need to use won't work with other layer types.

Once you've found something, take a look at it's attribute table to make sure it has a field suitable for one of the renderers.

Deliverables

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

1. Edit your e-Portfolio so that it includes a link to your map and post a link to your e-Portfolio through the Assignment 6 page.  (80 of 100 points)
2. Beneath the map or on your e-Portfolio page, provide a short description of your map and reflect on what you learned from the lesson, what you found challenging, and how you might apply what you learned to your work.  (20 of 100 points)
3. Complete the Lesson 6 quiz.

An important element of many geospatial applications is the ability to search for features that meet certain criteria. The nature of those criteria might be spatial (e.g., land parcels adjacent to a particular street) or non-spatial (e.g., land parcels owned by a particular person).

In Lesson 7, we’ll see how Query objects can be used in an ArcGIS Maps SDK for JS app to answer both spatial and non-spatial questions. Before that, however, we’ll look at the SDK’s Search widget, which can be used to find values in a layer’s attribute table or to find places when configured to work with a locator service.

Objectives

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

• configure the Search widget using sources (layers and/or locators);
• understand the concept of a promise (in a JS context);
• set a layer's definition expression;
• define and execute queries.

Questions?

If you have any questions now or at any point during this week, please feel free to post them to the Lesson 7 Discussion Forum. (That forum can be accessed at any time by clicking on the Discussions tab.)

Lesson 7 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.

A common feature of many mapping apps is the ability to search for a place by entering text in a search box. This feature can be added to an Esri app through the Search widget. This widget can be configured to find locations using a Locator (geocoding) service or features in a FeatureLayer. Let’s take a look at various implementations of this widget.

One of the most common operations performed in GIS is the query. The Maps SDK for JS makes it possible for developers to query layers in a number of different ways. For one, you can set a layer’s definition expression so that it displays just a subset of its data. You can also query a layer to get a count of features meeting the criteria, to get the IDs of the features, or to get the features (attributes & geometries) themselves.

For this week's assignment, please select from one of the scenarios below.  Regardless of the scenario you choose, I'd like you to follow these guidelines:

• Use the JavaScript prompt() method to ask the user for a subset of data to map (e.g., a state).  We'll see better methods for getting user input and return to your selected scenario to "do it right" in the next lesson.
• Configure your app so that appropriate information is displayed through pop-up windows.
• Use ColorBrewer to obtain logical color values.
• Look at the service in the ArcGIS Online Map Viewer or ArcGIS Pro to get a sense of its data fields and values.

Before reading over all of the scenarios, go to the sign-up page in Canvas to see which of them are still available. Here are the scenarios:

1. 2020 U.S. Presidential election
   Using this U.S. Presidential election feature service, prompt the user for a state, then display a county-level map of the voting in that state. Use ClassBreaksRenderer to display the margin of victory for either candidate. Set up class breaks like 0-10%, 10-20% and >20% with smaller-margin counties drawn in a light shade of blue/red and the larger-margin counties in a dark shade. The best way is to set the renderer's valueExpression property to an Arcade expression that calculates the value for mapping.  Note: If you'd prefer to map a different election, such as 2024 (I couldn't find a service with county-level data for that election), that's possible.  Just run your idea by me first.
2. World cities
   Using the World cities feature service, prompt the user for a continent, then display the cities in that continent symbolized by population (varying either size or color). This scenario is a bit trickier than the others in that there is no continent identifier in the Cities layer. To identify the correct cities, you can query this Continents feature service to get the polygon geometry of the selected continent, then use a spatial query to find the appropriate features in the Cities layer.
3. U.S. National Parklands
   Using the U.S. National Park lands feature service, prompt the user for a National Park Service region, then display the parklands within that region. Use different symbols for the common park types (National Monument, National Historic Site, National Park, National Historical Park, National Memorial) and depict all other types in a class called Other.
4. U.S. County Demographics
   Using this Popular Demographics of the United States feature service, prompt the user for a state and display the counties in that state based on the proportion of its population comprised of a generation of your choice (Greatest Generation, Baby Boomer, Gen X, Millennial, or Gen Z). Don't worry that the service is listed as deprecated; the updated version is in beta and requires a subscription.  Make sure you base your app on the county layer, not the web map.  Similar to the election scenario, you can calculate the population percentage using valueExpression and an Arcade expression in either ClassBreaksRenderer or VisualVariable.
5. Alternative fuel stations
   Using the alternative fuel stations feature service, prompt the user for a state, then display the alternative fuel stations in that state. Use PictureMarkerSymbol to show the fuel types as appropriate icons. I've put together a set of free icons.
6. 2016 EU Referendum in the UK
   Using this 2016 EU Referendum feature service, prompt the user for a region (e.g., Northern Ireland, North East, North West), then display the voting districts in that region based on their remain/leave vote. The remain/leave vote percentages add to 100, so you can safely base your ClassBreaksRenderer on one of the two percentage fields.  As with the presidential election scenario above, set up vote margin classes like 0-10%, 10-20%, >20% and use shades of one color to depict the remain districts and shades of another color to depict the leave districts.  Note: this service will not display properly in a SceneView using SDK version 4.8 or higher.  So use a MapView or version 4.7 of the SDK.
7. Wildfires
   Using this Historic Wildfire Perimeter Service, prompt the user for a year (between 2000-2018), then display the fire perimeters from that year.  Render the layer by fire size in acres using either ClassBreaksRenderer or VisualVariable with an appropriate color ramp.
8. Hurricanes
   Using this Hurricane feature service from Living Atlas, prompt the user for a year, then display hurricanes from that year.  The service has a default symbology, but I'd like you to override that using dotted lines (in a 2D Renderer because it's not available in 3D) rather than solid and a light-to-dark color ramp to indicate the hurricane category (using the Wind_Speed field).  You'll find the ClassBreaksRenderer class to be helpful. 

Note: ArcGIS Server-hosted feature services are configured by default to return a maximum of 1000 features.  This limitation comes into play for some of the scenarios above and is clearly not ideal.  The publisher of the service has the ability to override this setting, but app developers like yourselves do not.  One solution for developers is to query the service recursively, such that the full set of features is retrieved in 1000-feature chunks.  If you found that you were able to complete the assignment fairly easily, you might consider researching and attempting such an approach.  But we will not be expecting you to work out a solution to this problem if it affects your app.

Final Project Initial Concept

Review the Final Project requirements. Think about what topic you'd like to use as the basis for the final project app and post your ideas in the Lesson 7 discussion forum. This does not need to be a complete proposal, but I want to know you've started thinking about it. What would you like to do or display? Have you identified any data to use? Is there any specific interactivity you'd like to include or explore? 

This is only a concept, so your idea can evolve or completely change over the next few weeks. You won't be evaluated based on what you propose now, and it's also OK if you don't know some of these details yet. At a minimum, I want to know you are thinking about a topic. I'm sure you're ideas about interactivity will evolve over the next few weeks, too. If you are unsure about something, share that too. 

Please also read through other students' responses and share any helpful thoughts you have about their concepts. 

Deliverables

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

1. Remember to sign up for a scenario before you start working on it.
2. Edit your e-Portfolio so that it includes a link to your map, and post a link to your e-Portfolio through the Assignment 7 page.  (80 of 100 points)
3. Beneath the map or on your e-Portfolio page, provide a short description of your app and how you approached solving this project. Reflect on what you learned from the lesson, what you found challenging, and include what resources you used to get your code right.  (20 of 100 points)
4. Post your initial ideas for the final project app in the Lesson 7 discussion forum. (Ungraded, but -5 if missing)
5. Complete the Lesson 7 quiz.

In Lesson 7, you learned how to add place-finding capability to an app through the use of locator services and the Search widget. You also saw how that widget can be used to search for values in layer attribute tables. Finally, you looked at the use of the Query class in defining queries (spatial, non-spatial, or both at once) and how Query objects can be used as inputs to methods that return feature counts, feature IDs, or the features themselves. Importantly, you learned how promises play a prominent role in handling the results of asynchronous operations both in geospatial and more generic JavaScript applications.

One last note on the topic of queries: in looking at the SDK or the source code of other apps, you may come across a class called QueryTask. This class was used in earlier versions of Esri's API to execute queries defined in Query objects. While queries can still be executed using a QueryTask, you should note that the QueryTask class supports only layers derived from ArcGIS Server services (i.e., it does not support ArcGIS Online layers).

One aspect of this lesson that you may have found dissatisfying was that the queries were all hard-coded into the apps. There was no way for users to supply their own query parameters, as we're all used to seeing in more sophisticated apps. The good news is that Lesson 8 is all about UI development. With the knowledge you'll gain from that lesson, combined with what you learned here in Lesson 7, you should be well on your way to developing your own killer apps.

Through this point in the course, we've worked with many of the most commonly used parts of Esri's Maps SDK for JavaScript. In Lesson 8, we're going to shift gears a bit to look at ways to enhance the user experience. We'll talk about some mapping widgets from Esri, HTML form elements for obtaining user input, and Calcite components for designing page layouts. My hope is that this lesson will be one of the more valuable ones, inspiring you to think about user interface designs that might work well for your data and setting the stage for you to draw from everything you've learned over the last several weeks in a final project of your choosing.

Objectives

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

• work with several of the widgets built into Esri's Maps SDK for JS;
• build HTML form elements into an app to obtain user input;
• handle important UI events, such as button clicks and selections from dropdown lists;
• use Calcite components to aid in designing your app's layout.

Questions?

If you have any questions now or at any point during this week, please feel free to post them to the Lesson 8 Discussion Forum. (That forum can be accessed at any time by clicking on the Discussions tab.)

Lesson 8 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 out this page so that you can follow along with the directions.

8.1 Implementing API Widgets

Esri provides several widgets that can be added to the GUI with little coding to improve the user experience. A common use for widgets is in enabling the user to change basemaps. The BasemapToggle widget is used when you have exactly two basemaps that you’d like the user to be able to switch between. The BasemapGallery widget allows the user to choose from any number of basemap options. Let’s have a look at how these and a few other widgets are implemented.

Note: You'll see that some of the widgets discussed here, such as the BasemapToggle, have been deprecated. This means that their use will still be supported for a short time, but you are encouraged to implement the functionality in a newer way. Esri is in the process of phasing out of all of its widgets in favor of web components. We'll talk more about web components, including how to implement a BasemapToggle using one, later in the lesson. We still cover the older widgets here because a) not all of them have a web component replacement yet, and b) you're likely to see widgets used in other people's apps. For all deprecated widgets, which we'll note, you should read over the discussion in this section as an FYI. For Assignment 8 and any other apps you develop going forward, you should be using the web components discussed in the next section whenever possible.

In the rest of this lesson, we’re going to look at a lot of examples that demonstrate how GUIs can be built. Studying these examples and practicing with the elements they demonstrate should really ramp up your ability to develop geospatial web apps.

Learn More

Before getting to the examples, please work through the HTML Forms tutorial at w3schools. There are many different form elements discussed in the tutorial that you might be able to incorporate into an app. Parts of the tutorial that you should disregard in this context are the parts dealing with form submission. The tutorial discusses submitting form values to a server, where they might be processed by a server-side language like PHP or Ruby. In our context, we’ll be processing the form values on the client device using JavaScript instead. So feel free to skip over the discussion of the Submit button, the action and method attributes, and GET vs. POST.

One UI design seen frequently in geospatial apps is a sidebar containing a list of map features. The items in the list can be clicked to see where the feature is located on the map.

Below is an example that shows counties in Jen & Barry’s world that meet the 500-farm criterion. FYI, this example builds on an earlier one and is modeled after this Esri sample.

See the Pen Clickable sidebar demo by Jim Detwiler (@jimdetwiler) on CodePen.

Initial setup

In the HTML, the div that holds the map (id="viewDiv") is embedded within a parent div (class="panel-container"). Another div (class="panel-side") is also defined within the panel-container div. The panel-side div contains a header element along with an unordered list element (id="list_counties").

In the stylesheet, the important settings are:

• The panel-side div is given a width of 300px, a height of 100%, absolute positioning, and a top and right position of 0. (This causes it to be 300px-wide box in the upper right of the window.)
• Its overflow property is set to auto, which means that if its content can’t be fit into the div, a scrollbar will appear, allowing the user to scroll to see the rest of the content.
• ul elements within the panel-side div are given a list-style of none. This means you won’t see the default bullet symbol (or any other symbol).
• The list items are padded 5px on top and bottom, and 20px on left and right.
• Elements with a class of panel-result (which we’ll see momentarily when we look at the JS code) have a cursor property setting that causes the cursor to change to a pointer if the user hovers over the element.
• The panel-result elements also have their text turn orange if the user hovers over the element (or the element gets focus from the keyboard).

Changes made from the earlier example

You may recall this same map was displayed in an example from Lesson 6, which was focused on querying.  In that example, the features meeting the Query criterion were added to a GraphicsLayer.  In this example, the features are instead used to create a new FeatureLayer.  The farmQuery variable is defined on line 43.  Some important differences in this version of the farmQuery are:

• It has its outFields property set to a subset of the layer's available fields (just those needed to populate the sidebar list and the popups).
• Its orderByFields property is set so that the features in the sidebar are listed in an intuitive way.
• The outSpatialReference property is set to match that of the basemap.  It turns out this isn't necessary for this particular app since the county data and the basemap are in the same spatial reference.  However, if that were not the case, clicks on the sidebar items would result in the pop-up not being anchored in the correct location.  

console.log('Basemap SR: ' +view.map.basemap.baseLayers.items[0].spatialReference.wkid);
console.log('Counties SR: ' + counties.spatialReference.wkid);

Populating the list

The bulk of the list population logic is found in the displayResults() function (lines 54-82). The basic idea is that a new li element will be created for each item in the FeatureSet returned by the Query, then all of the li elements will be inserted into the ul element embedded within the panel-side div.

To accomplish this, the DOM’s createDocumentFragment() method is used to create a new empty object to store the li elements. A forEach loop is used to iterate through the Query’s FeatureSet. Within that loop, an li element is created using the createElement() method. After the li element is created, DOM methods are used to set some of its attributes. First, it is assigned to the CSS class panel-result. (We saw the cursor property setting assigned to this class above.)  Next, it's given a tabIndex of 0, which means it will be the first item in the list to receive focus in the event the Tab key is used to cycle through the list items. Third, the element is assigned a custom attribute (data-result-id = index). (The index variable is automatically updated on each iteration through the forEach loop, so each li element will get a unique data-result-id value.)  This will come into play momentarily when we look at the code that handles clicks on the list. Finally, the text of the li element is set to a concatenation of the name and farm count for the current county. The li element is then added to the DocumentFragment created just before the loop on line 70 using the appendChild() method.

After iterating through all of the counties returned by the query and creating a li element for each, the task is to plug those li elements into the ul element that was hard-coded into the page's HTML. This is accomplished by first getting a reference to that ul element (line 30), then using appendChild() again, this time to append the DocumentFragment to the ul. (Recall that the page initialized with a "Loading..." message; this text is cleared out before the list items are added by setting the element's innerHTML to an empty string.)

A couple of final important things happening in the loop through the query results is that a) each county graphic has its popupTemplate set to match the one assigned to the counties layer, and b) the graphic is added to the array stored in the variable graphics (created on line 52) using the array method push(), which adds the graphic to the end of the array.  

Handling clicks on the list items

The last part of the app to code is setting up a listener for clicks on the sidebar list. Line 85 uses the DOM method addEventListener() to trigger execution of a function called onListClickHandler() when the user clicks on the list. Looking at that function, the expression event.target returns a reference to the li element that was clicked. target.getAttribute("data-result-id") then gets the custom id value that was assigned to that li element.

The key to having the pop-up open over the correct county is that the data-result-id value matches the position of the county in the graphics array. On the first pass through, the query results loop assigned that county's list item a data-result-id of 0 and its graphic was added to the graphics array at position 0. On the second pass, that county's data-result-id was set to 1 and its graphic was added to the graphics array at position 1, etc.

Before we get to the opening of the pop-up, though, we have to look at line 90. This line is a bit tricky with its use of the logical operator &&. This operator is more commonly used in an if construct; for example, in situations where you want both condition A AND condition B to be true. Here it's being used in an assignment statement. The Mozilla Developer Network JavaScript tutorial does a pretty good job of explaining how logical operators work in this context, and I encourage you to read through the page if you're interested in understanding that line well.

The short (OK, not really all that short) summary is this: the expression resultId && graphics && graphics[parseInt(resultId, 10)] gets evaluated from left to right. If the resultId variable holds a null value (which it would if you didn't click on an li element), then the other pieces of the expression won't even be considered, and the result variable will be assigned a value of false. If resultId holds some number (which it would if you did click on an li element), then the first part of the expression will evaluate to true, and the next piece of the expression will be evaluated.

Similarly, if the graphics variable holds an empty array (e.g., no counties returned by the query), then the graphics piece of the expression will evaluate to false, the last part of the expression will be ignored, and result will be assigned false. If there are county graphics in the graphics variable, then the last part of the expression will be evaluated.

The last part of the statement uses the parseInt() method to convert the value from the data-result-id into an integer. (HTML attributes are always stored as strings, but we need the id value as a number.)  The 10 argument in parseInt(resultId,10) says that you want the parsing to be done in base 10 math. So basically, that expression is changing values like "1" to 1, "7" to 7, etc. The number returned by parseInt() then gets plugged into the square brackets. So, a resultId of "1" will ultimately yield the county graphic that was at position 1 in the graphics array, the resultId of "7" will yield the county graphic at position 7 in the array, etc. In those cases, the expression on line 90 will evaluate to a county graphic, which is then what is assigned to the result variable.

After all that, we finally get to the pop-up code. Line 92 first ensures that everything is OK with the click on the list. If so, then the Popup object associated with the MapView is opened using its open() method. Passed into the openPopup() method is the county graphic (stored in the result variable and used to set the Popup's features property) and the centroid of the geometry associated with that graphic (used to set the Popup's location property).

Phew! Hopefully, you were able to follow all of that. If not, don't hesitate to ask for help on the discussion forum.

You may have situations, especially when your app requires user interaction with the map, that call for displaying some sort of instructions. In the example below, note the bit of text along the top of the map enclosed within a semi-transparent box.

See the Pen Text Overlay Demo by Jim Detwiler (@jimdetwiler) on CodePen.

This text box is created through two steps:

1. In the HTML, a div element is defined and assigned an id. Within the div, the desired text is placed inside a p element.
2. In the CSS, the div is placed through absolute positioning 10 pixels from the top of the page and 62 pixels from the left. A padding of 12 pixels is added to the left and right of the div so that the text isn’t rendered too close to the edge. The text is given a white color, while the background of the element is made black with a transparency value of 0.5. This allows the text to be displayed to the user without completely obstructing the view of the map underneath.

See the Pen Custom Map Widgets by Jim Detwiler (@jimdetwiler) on CodePen.

Earlier we saw how to provide users with a set of options through a dropdown list (select element). As in that example, it is sometimes easy and appropriate to hard-code the list options into the page's HTML. However, there are also times when the list is quite long or changes over time. In such cases, it makes more sense to populate the list programmatically.

Also earlier in the lesson, we looked at a sample that involved querying earthquakes based on different attribute and spatial criteria. I want to return to that sample now because the well type dropdown list was constructed by identifying the unique values in one of the wells layer’s fields. If you’re going to populate your own lists "on the fly," you’ll want to implement similar logic.

See the Pen Untitled by Jim Detwiler (@jimdetwiler) on CodePen.

First, an empty select element (no child option elements) is defined in the HTML at the bottom of the code.

Within the JS code, a FeatureLayer containing the wells is created on lines 58-65. That layer is added to a new Map and the Map is associated with a new MapView. Then on lines 86-96 comes a chain of promises. The first is associated with the loading of the MapView. Within its callback function, its return object is set to the wells layer. It in turn has a promise defined such that when the layer is finished loading a Query object is created and used in a call to queryFeatures(). Because the Query has no filtering properties set, queryFeatures() returns all features from the wells layer.

Once the query returns its features, they are passed along to a function called getValues(), which is defined just below the promise chain. The getValues() function uses the map() method to iterate through all of the wells features, retrieving the values in the STATUS2 field and producing a new array containing those values. (The values in this array are the same ones you see in the well type dropdown list, though each value is in the array potentially many times.)

The array produced by the map() method in getValues() then gets passed along to the getUniqueValues() function. That function first creates a new empty array that will be used to store each unique value from the STATUS2 field just once. It uses the forEach() method to iterate over all of the values. Within the forEach loop, the idea is to check whether the current value is in the unique value array yet, add it to the array if it’s not, and skip over it if it is.

Looking at the if expression on lines 111-116, it is composed of three smaller expressions:

• uniqueValues.length < 1
• uniqueValues.indexOf(item) === -1
• item !== ""

uniqueValues.length returns the number of items in the array.

uniqueValues.indexOf(item) returns the position of the first occurrence of item in the array. If item is not in the array, the expression will return -1.

The === operator may be new to you. Recall that a single = character is used for assigning values to variables or setting properties. When you want to test for equivalence between two entities, you need to use == or ===. The difference is that === requires a match in not only the values but also the data types, while == requires a match in just the values. For example, consider the following variables:

x = 0;
y = false;

And note how the following expressions evaluate:

if (x == y) { // this evaluates to true
if (x === y) { // this evaluates to false

So, the indexOf() condition in this example is written with extra caution to ensure the value being examined is truly not yet in the array.

The first two of these expressions are actually evaluated together (note the placement of parentheses) such that if the unique value array is empty or the item is not yet in the array, then the first part of the if condition should evaluate to true.

The last of the three expressions is then examined. It checks to make sure item is not an empty string (i.e., that the STATUS2 value wasn’t blank for the current record).

The use of the && operator means that the first part of the if condition:

uniqueValues.length < 1 || uniqueValues.indexOf(item) === -1

and the second part:

item !== ""

must both be true.

Given the setup of this loop, each value from the STATUS2 field will be added to the uniqueValues array exactly once.

That array is then passed along to the addToSelect() function. That function first uses the array sort() method on the values to put them in alphabetical order, then iterates through them using another forEach loop. In this loop, an option element is created using the createElement() method we saw earlier in the lesson, the text of the element is set to the current iteration value, and the option is added to the select element. Once all of the values have been processed by the loop, the list is fully populated.

One recent development associated with the Maps SDK for JavaScript is the Calcite Design System.  This is a set of Esri resources, including a web component library, that simplify the development of rich user interfaces.  Web components are defined by the Mozilla Development Network as:

a suite of different technologies allowing you to create reusable custom elements — with their functionality encapsulated away from the rest of your code — and utilize them in your web apps.

If it wasn’t clear, we’re talking about custom HTML elements, which can be implemented in a similar way to native HTML elements.  To give an example, one commonly used Calcite component is the Panel, which can be instantiated in your HTML code like so:

    <calcite-panel>
    ...
    </calcite-panel>

An important concept to understand in dealing with web components is that of the slot, which is a placeholder for defining content associated with an element.  Slots are implemented in native HTML, too.  For example, the select element discussed earlier in the lesson is used to display dropdown lists:

    <select>
        <option value="psu">Penn State</option>
        <option value="osu">Ohio State</option>
        <option value="um">Michigan</option>
    </select>

The embedded child option elements in the code above can be said to be in the select element’s default slot.  Returning to the Calcite Panel component, it similarly has a default slot.  Here, we’re putting an h3 element in a Panel’s default slot:

    <calcite-panel>
        <h3>Layer Filter Options</h3>
    </calcite-panel>

In addition to the default slot, web components can be programmed with other named slots.  The Calcite Panel component has several, including, for example, “footer.”  As you may have guessed, this slot can be used to add content to the bottom of the Panel element.  Here, we’re putting a Calcite Button component in a Panel’s footer slot:

    <calcite-panel>
        <calcite-button slot="footer">Cancel</calcite-button>
    </calcite-panel>

In this section of the lesson, we'll see a few example apps that implement Calcite.  We'll start by walking step by step through the creation of a simple app built from some Calcite components.  Later, I’ll discuss a few other finished apps that demonstrate the implementation of some other components.  As part of the discussion, I’ll be referring to Esri’s Calcite Design System documentation.

Paralleling their Calcite development, Esri has made a strong push to produce map-centric web components with the goal of simplifying the app development experience for 3^rd-party developers. 

In this section of the lesson, we’ll dive into Esri’s map components, looking at their basic implementation, their documentation, how to combine them with objects from the Core API we’ve been dealing with thus far in the course, and finally looking specifically at the components that replace the deprecated widgets covered earlier in this lesson.

For this week's assignment, I want you to return to the scenario you selected for the Lesson 7 assignment.  Regardless of the scenario, I'd like you to follow these guidelines:

• Instead of acquiring the user's input on what to map via the JavaScript prompt() method, use one of the more appropriate UI elements covered here in Lesson 8.
• Include a sidebar that lists the features displayed on the map.  Clicks on items in the sidebar should open a popup over their associated features on the map.  (If you're looking for extra credit or just to challenge yourself, try displaying the sidebar information in a table.  For example, you might use the Calcite Table component, which can be used to provide a table with sortable and resizable columns, among other features.)
• Include a user-friendly legend.
• Include any other widgets or UI features that you think would enhance your app.

Deliverables

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

1. Edit your e-Portfolio so that it includes a link to your map and post a link to your e-Portfolio through the Assignment 8 page.  (80 of 100 points)
2. Beneath the map or on your e-Portfolio page, provide a short description of your app and how you approached solving this project. Reflect on what you learned from the lesson, what you found challenging, and include what resources you used to complete the assignment.  (20 of 100 points)
3. Complete the Lesson 8 quiz.

In Lesson 8, you learned how your apps can be "taken to the next level" through the addition of many different types of user interface elements. I hope you'll come away from this lesson and associated assignment excited and thinking of ways you can apply what you've learned to your own work. You'll have an opportunity to do just that in your own final project in a couple of weeks. But first, you'll have one last lesson that focuses on building analytical capabilities into your web apps.