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.

Lab 4: ArcGIS Flex API

Goal and Background
The purpose of this lab was is to familiarize us with ArcGIS Flex API with the goal of developing a Web GIS application. To build the application, Adobe Flash Builder was used. Although Flash Builder 4.6 works with ArcGIS Flex API, the version 4.7 was used in this lab.

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

Methods & Results

After downloading the data for this lab, the first thing that needed to be done was to create a new project in Flash Builder. Flash builder is a program within the Adobe CS6 software package. Next, we created a new Flex project and adjusted the version of Flex SDK to version Flex 4.6 which is the minimum requirement for ArcGIS Flex API. After setting the output folder to ‘bin-debug’, we were ready to import the Flex API library (agslib-3.4-2013-06-30.swc) that would be referenced when coding within Flex API. After connecting to our folders on the M-drive and then navigating through the Flex Build Path tutorial, we were able to add the library.

With our project created and saved with the reference API library, we were able to begin coding. First, the map UI component created in the first section was brought in by adding the ESRI namespace. The next step was to add a map component to our Flex application’s UI to serve as blank slate to allow for map content to be added later. The specific layers added were the ArcGISTiledMapServiceLayer that functioned as a baselayer, and the ArcGISDynamicMapServiceLayer that would show world population density. The specific code entered can be seen in Fig. 1.

Fig. 1: Code entered to add the map component to the application's UI

After running the code in Flash Builder to check for any errors present, the application opened in the web browser and displayed the map below. Although attribute data for the map was included, pop-ups did not display when you clicked on the map due to the fact that they were not configured within the code to show.

Map 1: Map created after running our application with the new code added.

After closing out of the previous project, we created another within Flash Builder. The same steps outlined above were followed to add the Flex API library. Next, a map hosted in ArcGIS Online was added to the project by referencing its identification number using the ActionScript block of code shown below in Fig. 2. Lastly, code needed to stylize and add a title to the map was added. The final code block for this section is shown below in Fig. 3. The map below is the application that was created from that code. Interactive pop-ups show on this map due to the fact that they were configured within the code we used for this application.

Fig. 2: Block of ActionScript code added to identify the ArcGIS Online map.
 

Fig. 3: Final block of code that includes the stylistic elements needed to add style and a title to the map. 

The final section of this lab taught us how to add our own map to display within a Flex application. We used the Wisconsin Web Map we created in Lab 2 to replace the Map ID to display our own map. Next, we customized an event handler graphic listener to create a mouse over function to be applied to our application. The mouse over code provided to us would be used, but needed to be modified to display information on Wisconsin counties instead of the counties in South Carolina which it was originally configured for. By editing the code in Notepad++ we were able to modify it to fit the extent of our application. Edited within the code were the functions of zoom, extent, map id, and definition expression to switch all mouse over controls from South Carolina to Wisconsin. Shown Below in Fig. 4 is a snapshot of what is displayed when you hold the mouse icon over Dane County.

Fig. 4: Snapshot of the mouse over function added to the application showing attribute data on Dane County, WI.

Sources
1. Lab4data.zip (Provided by Dr. C. Wilson)

2. Wilson. C. (2013). Lab 4:ArcGIS Flex API. GEOG 455: Web GIS, UW- Eau Claire.

Lab 3: ArcGIS Flex Viewer

Goal and Background

            The purpose of this lab is to expose us to the one of the techniques used when creating a web GIS application. Using ArcGIS Flex Application Builder, the steps needed to configure a web application will be outlined. In addition to teaching how to configure a web application using ArcGIS Flex Application Builder, methods for finding and using data analytical services to further develop a web GIS application will also be done. Also, the structure of Flex XML 9extensible markup language) will also be introduced to configure custom widgets using XML script.

Methods and Results

**Data for this lab exercise was provided to us in the form of a compressed .zip file by Dr. C. Wilson. Services for the second portion of this lab were located in ESRI ArcGIS REST sample servers.

Once the data for this lab had been downloaded, the next step was to connect to our personal folders on the Universities virtual server. By connecting to this server, we would gain access to the ArcGIS Flex Application Builder interface. Once connected, we were able to open ArcGIS Viewer for Flex- Application Builder where each of the applications created would be displayed. Since this was our first time opening this program, no applications were displayed because there had been no projects created. After clicking the ‘Create a New application’ tab, and following the tutorial to name, save, and add operational basemaps/ layers, we were able to create our application. For this application, census block point data containing information on our study area (City of Eau Claire) was also added. Specifically, we chose to include Census 2000 Block Population data to include the attributes of population, the number of households, and also the total number of housing units. Next we set out to configure the widgets that would be contained within the application. Included in were the draw and locator widgets.

Result: http://gistest/STUDENTS/GEOG455Fall13/toppernd/Topper_Eau_ClaireApp1/

After creating our first application to become familiar with ArcGIS Flex Application Builder, the next task for this lab was to configure Arc GIS Flex Application Builder XML config files. Since this was our first time being exposed to MXML and ActionScrip languages, only basic manipulation of the code would be done to add a custom widget to the application through the use of reference services through a Flex Application configuration file. After entering the code pictured below into Notepad++ and then adding references to the swf, xml, and png files in the config.xml file we created earlier, the custom widget was added. The resulting application can be viewed at: http://gistest/STUDENTS/GEOG455Fall13/toppernd/Topper_Eau_ClaireApp1_Config/

Figure 1: XML code that specifies the color, selected census Block Points, and configuration of the specific fields. (Dr. C. Wilson, 2013)

 

The final task for this lab was to add and configure a custom widge directly in application builder. Using a topographic basemap, a detailed counties layer was added. Once this layer had been added, a thematic widget was added to show demographics of each county within the study area of northwestern Wisconsin. The application for this section of the lab can be viewed at: http://gistest/STUDENTS/GEOG455Fall13/toppernd/Topper_Thematic1/

Sources

1. http://sampleserver1.arcgisonline.com/ArcGIS/rest/services (Accessed October 2013)

2. Lab3data.zip (Provided by Dr. C. Wilson)

3. Wilson. C. (2013). Lab 3: ArcGIS Flex Viewer. GEOG 455: Web GIS, UW- Eau Claire.

Lab 2: Geospatial Web Services

Goal and Background

To build upon the basics and fundamentals of web based maps learned in Lab 1, this week’s lab set out to expose us to processing geospatial data with the end goal of creating and hosting a geospatial web service via ArcGIS server and ArcGIS Online for Organizations. Included in this blog post will be technical report outlining the goal and background, methods, results, and sources used in the creation of the geospatial web service. Using ArcMap and ArcGIS Server to process, analyze and publish data provided by Dr. C. Wilson in the form of shape and Excel CSV files, the documentation of the skills learned to create a geospatial web service will be shown.

Methods & Results

To start, it was first necessary to download and unzip the Lab2_data.zip served to us by Dr. C. Wilson. Next, the Wisconsin Transit data was preliminarily viewed in ArcMap to become familiar with the four feature classes representing cities, interstates, highways and counties in Wisconsin. Once the data had been viewed, ArcMap was closed to allow for the data to be added to and published within ArcGIS.com. When publishing the data to create a data service of Wisconsin Transportation Data, specific tags were incorporated within the service to allow for the data to be searched for within ArcGIS online. The Tags used were ‘Cities’, ‘Interstate’, ‘US Highways’ and ‘City’. The map created can be found at: http://bit.ly/1btMflC

The second task of this lab was to publish a feature hosted service using a CSV file. Downloaded and unzipped in the same Lab2_data.zip was the data needed for this section. First the data needed to be opened in Microsoft Excel and then saved as a CSV file with the name ‘WI_fire_occ_2004.csv’. Next, the fire occurrence csv file was input into ArcGIS Online and was assigned two relevant tags. After configuring the attributes to only show the date of fires in the pop-up window, the data was ready to be published. The map created can be found at: http://bit.ly/1btNlho

The third task of this lab was to publish a feature hosted service using an ArcMap document. Again using the data served by Dr. Wilson, the ‘Rivers_and_streams_and_Lakes.shp’ needed for this task were input to and ArcMap session. Next, the input features were shared through the file share as service within Arc. After following the sequence of pop-up windows that allowed for certain parameters such as service editor, capabilities, and feature access to be manipulated, the data was analyzed to expose any errors, and then published. Once published, the map was then shared to allow for it to be viewed freely by certain ArcGIS Online Groups. The map created for this section can be found at: http://bit.ly/1btObe5

The final task of this lab was to publish a tiled map service using ArcGIS Server. To begin, it was first necessary to connect to our personal SDE database on ArcGIS server. Once connected, land use land cover data of the lower Chippewa River near Eau Claire, WI was added in the form of a raster image. After reclassifying the classes of land use land cover to include agriculture, forest, green vegetation, other urban, residential, and water, the map was published using the publish a service tutorial within ArcMap. The map created for this section can be found at: http://bit.ly/1aOFpTx

Sources

Environmental Science Research Institute, ArcMap USA geodatabase, Wisconsin Department of Natural Resources, Wisconsin Lakes.shp created by Dr. C. Wilson (2013), Rivers and streams.shp- United States Geological Surveys (USGS, 2008), Earth Resources Observation and Science Center (EROS). 2011. Processed by Dr. C. Wilson. 2012.