Lab 6: Volunteered Geographic Information (VGI) Application Creation

Goal and Background

The purpose of this lab was to develop a web GIS VGI application. Specifically, the creation of enterprise geodatabase features that contain settings outlining domains and subtypes capable of being edited will be shown. Next, a web GIS VGI JavaScript template was modified to incorporate the feature service that we published to the UWEC ArcGIS Server to allow for the specific data to be collected by the public using the application.

Methods and Results

Part 1 & 2

First, a map document to support the feature services and web editing was authored. Specifically the features to be edited and authored included types of fire hydrants, conditions of sidewalks, and the health of green spaces. Within each feature, domains and subtypes were created to define specific rules that govern the values within the fields of a feature class or non-spatial attribute table. For fire hydrants the domain “Type” was set to include coded value subtypes for the description of either Red or Yellow. For sidewalks the domain “Condition” was set to included coded value subtypes for the description of either very good or needs repair. For green spaces the domain of “Health” was set to include coded value subtypes for the description of lush or needs fixing. After the domains and subtypes were set within our map document, point, line, and polygon feature classes were created to represent the various types of fire hydrants, sidewalks, and green spaces within our geodatabase. All feature classes were projected using the WGS 1984 Web Mercator (auxiliary sphere) projection, and included a corresponding field name to incorporate its respective domain and subtype as well as a comments field name. After symbolizing each feature with a representative symbol for a cartographically pleasing application that included the Light Gray Canvas ESRI Basemap, the entire enterprise geodatabase was ready to be published to the UWEC ArcGIS Server. The feature service was published using the same guidelines as outlined by Lab 2 shown in the blog post below. Next, it was necessary to customize a web GIS VGI JavaScript template to incorporate our feature enabled service created earlier in this lab. To reposition the map to center on UWEC, the Lat & Long coordinates were collected from Latlong.net. Next, the URL address was obtained for each feature layer from the UWEC GIS Server REST endpoint to then be input within the template to replace the existing code with that of the desired feature. After adjusting some stylistic elements of the code to change the title container. The application can be accessed by the following link: file:///Z:/Topper_index.html

Part 3

In this part of the lab, another independent VGI application to collect additional data was created. Using the same methodology outlined above, I chose to create a VGI application to map benches, paths, and trees in Madison, WI. This application can be accessed by the following link: file:///Z:/Topper2_index.html

Sources

1.       Lab6data.zip (provided by Dr. C. Wilson)

2.       Wilson. C. (2013). Lab 6: Voulunteered Geographic Information (VGI). GEOG455: Web GIS, UW-Eau Claire.

Lab 5: ArcGIS API for JavaScript

Goal and Background

The purpose of this lab was to show us how to embed GIS applications into websites using ArcGIS JavaScript API. In addition to modifying a web GIS application already created by another user, another goal of this lab was to familiarize us with the structure of html files, and the embedding JavaScript into html and the associated cascading style sheets (CSS).

**Data for this lab was provide to us by Dr. C. Wilson in a compressed format, and was downloaded online.

Methods & Results

Part 1: The aim of the first part of this lab was to create a basic application. First we had to set up an html document. Setting this up was relatively easy, and only required us to open up Notepad++. Once the program was opened, the code below was entered to begin the document.

Figure 1: Code to set an html document

 

Next, a reference to the ArcGIS API for JavaScript and CSS style sheet that would display this web application was included. Specifically, ArcGIS API for JavaScript version 3.7 and the claro Dojo Dijit theme were referenced. Show below is both blocks of code.

Figure 2: Code to reference CSS style sheet in html document

 

Figure 3: Code to reference ArcGIS API for JavaScript in html document

After the page had been styled, the Dojo modules were loaded into the document to include the basemap, zoom level, map center, and dojo function. Shown below is the final block of code that also includes script that defined the page content.

 

Figure 4: Final block of code for application

Map 1: Display of final application for Part 1 with URL shown

Part 2: The focus of the next part of the lab was to display and interact with a web map. This application was created much like the one in part 1 and required us to first enter code in a new blank Notepad++ document that referenced the ArcGIS API for JavaScript, CSS from ESRI and the dojo functions. In addition to those script elements, code that loaded the esri.arcgis.utils module to access the esri.arcgis.utils.createMap method was also included. Specific to this application was the basemap that would be used. To create the basemap, we had to include the map ID, 1a40fa5cc1ab4569b79f45444d728067, from ArcGIS Online. The final block of code written for this application is below.

Figure 5: Final block of code for the application created in Part 2

Map 2: Display of final application for Part 2 with URL shown

 

 

Missing from that application was a legend for the layer to interpret the symbols displayed. To include a legend, reference to a legend widget within the code was necessary. The new final block of code that includes script for the legend widget can be seen below.

Figure 6: Final block of code including script for legend widget for Part 2

 

 

Map 3: Display of final application for Part 2 including legend widget with URL shown

 Part 3: The objective of the last part of the lab was to build a web mapping application. Included below are the methods followed to develop a full-page web GIS application that would display a new feature service for schools in Eau Claire County that would be published to the UWEC ArcGIS Server REST endpoint to then be projected on an ESRI basemap. Also included was a pop up window for the schools feature service, and also a scale bar for the map.
After distributing a list of schools in Eau Claire County to the class, each member of the class was required to find the corresponding address to each school they had been assigned. Due to the fact that the shapefile of geocoded schools did not have a populated address field for each school, a join between the excel file with the corresponding addresses for each needed to be done. I chose to join the table and shape file using the Name field because the FID number for each corresponding school did not match. Once joined, the map document was then published to the UWEC REST end point.

Next, we had to modify the html document that would be used as the basis of our application. The application that would be modified was a web map of tree species locations in San Francisco, CA that included a WidgetinfoWindow that displayed that attribute information.

Our task was to first reposition the basemap to have an extent of Eau Claire County, and then to modify the code to call on the Eau Claire schools feature service we published to display schools and their corresponding attributes in a pop up window.

To reposition the basemap, the map coordinates used to center the map needed to be modified from those of San Francisco to instead include the coordinates of the City of Eau Claire. Coordinates for Eau Claire, WI were obtained at http://www.latlong.net/. Next, the schools feature service was referenced by including the web address of the published service within the block of code in addition to changing the script that configured the name, elevation, and address lables in the pop up window. Lastly, a scale bar was added to the application by including code that would reference a dojo dijit for a scale bar. Shown below is the final block of code for this application, and also a snapshot of the application.

Figure 7: Final block of code including script for legend widget for Part 3. Lines 1-45 shown

Figure 8: Final block of code including script for legend widget for Part 3. Lines 46-87 shown

Figure 9: Final block of code including script for legend widget for Part 3. Lines 87- 95 shown

Map 4: Display of final application for Part 3 including pop up widget showing Name, Elevation, and Address. URL application also shown

Sources

1. Lab5data.zip (Provided by Dr. C. Wilson)
2. Wilson. C. (2013). Lab 5: ArcGIS API for JavaScript. GEOG 455: Web GIS, UW- Eau Claire.