GEOG 863:
Web Application Development for Geospatial Professionals

Assignment: Plot Your Hometown


Assignment: Plot Your Hometown

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 API 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 SDK 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). 


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.