Goal
This lab exercise was designed mainly to introduce students to the process of creating a Web GIS application that is responsive on mobile platforms. Students developed a search app to search for and display addresses, congressional districts, information about senators, and locations of universities in the United States, as well as an application to query and display graphical and text information for Wisconsin counties.
Methods
Part 1 of the lab exercise involved creating a basic search application that allows the user to find addresses, congressional districts, senator locations, and the locations of universities in the US. The first section is where students were shown how to create the search application for congressional districts and senators. Figure 1 shows the HTML code for this application and figure 2 shows the JavaScript code for this application. To get the application to display, students had to reference a congressional districts and a senators feature service from ArcGIS, shown in figure 1.
 |
| Figure 1. The HTML code for the congressional district/senator location search application. |
 |
| Figure 2. The JavaScript code for the congressional district/senator location search app, referenced in figure 1. |
The second section required students to do the same thing as in section 1, except they had to create and publish their own feature service to ArcGIS, and then reference it in their code. Figures 3 and 4 show the HTML and JavaScript code for this search app, which are mostly the same except for the feature service reference.
 |
| Figure 3. The HTML code for the section 2 search application. |
 |
| Figure 4. The JavaScript code for the section 2 search application. |
Part 2 of the lab exercise is where students were required to create the query application in which the end user can hover over counties in Wisconsin to view their population and the percentage of Wisconsin's total population. Students were required to pull in the counties, but had to limit them to Wisconsin counties so that the application did not display every county in the United States. Students also were able to import the analog gauge widget from the DojoX library. This widget is what displays the percentage of Wisconsin's total population when a county is hovered over. Students then had to create a cascading stylesheet for this application where the colors, fonts, margins and other objects were styled. This CSS document was then referenced in the HTML document so that the changes would be applied to the application. Figures 5, 6, and 7 show the code that went into the creation of this application.
 |
| Figure 5. The HTML code for the population query application. |
 |
| Figure 6. The very lengthy JavaScript code for the population query application. |
 |
| Figure 7. The CSS document for the styling of the population query application. |
Results
Figure 8 shows the application where the end user can search for a congressional district or a senator. You can see the popup window that is displayed when a point is clicked that displays information about that senator.
 |
| Figure 8. A screenshot of the search application where the end user can search for the location of a senator or congressional district, then view information on it when the point is clicked. |
Figure 9 shows the same search application, but the feature service used is for universities in the US. The end user can search for, then click on a point, and they can view information about that school.
 |
| Figure 9. This application does very much the same thing as the one shown in figure 8, however, this one allows the user to search for universities and see their address information. |
Finally, figure 10 shows the query application that allows users to hover over Wisconsin counties and see that county's population data. The data shown is the population of that county, as well as the percentage of that county compared to the total population of Wisconsin.
 |
| Figure 10. This is the query application described in the above paragraph. |
Sources
University Feature Class: ESRI InfoGroup Business Locations Dataset
Congressional Districts Feature Class: 2010 Census
Comments
Post a Comment