Lab 7: Volunteered Geographic Information

Introduction:

This lab introduced a workflow and skills for the creation of a very basic Volunteered Geographic Information (VGI) application that could be used by citizens of Eau Claire to collect information for the city. The information that is needed to be collected is the locations of fire hydrants and their color, green spaces and their condition, and sidewalks and their condition. This application can be viewed and edited by anyone give that they have the URL for the page. Features that are created can have images attached to aid the city's efforts. The VGI was made by publishing an enterprise geodatabase with specialized domains and subtypes to an ArcGIS server and publishing a map service with feature access enabled (feature servers created) for the document with the three feature classes. These services were then used in JavaScript code that interacted with html and CSS to create a webpage with VGI functionality.

Methods:

Part 1 Section 1:

This section created the attribute domains and subtypes for the new enterprise geodatabase. Domains were created for each of the tree feature types by going to the domains tab of the database properties window and making coded domain values for each feature type. The coded domain for the hydrants was Red/Yellow, for the sidewalk the domain was named condition and the options given were Very good/Needs repair, and for the green spaces the domain was health and the options that were given were Lush/Needs fixing. The domains that were created can be seen in the list at the top of Figure 1, and below can be seen the coded options and properties for the sidewalk condition domain.

Figure 1

Part 1 Section 2:

This section created the feature classes and templates for the three types of features. All feature classes created in the enterprise geodatabase were projected as the WGS 1984 Web Mercator (auxiliary sphere). The three types of features that were to be collected lent themselves to being able to help show off all types of feature classes basic types: points, lines, and polygons. Domains were next configured for the three feature classes by setting one of the fields to that domain. Fields were also created for comments (text type with 80 characters) for each feature class as well as appropriate symbolization and feature templates for future in app editing, then all feature templates and all fields and attachments within them were tested in an edit session. Figure 2 shows the finalized templates for each feature in an edit session as well as the attributes of one of the sidewalks created, with the attachment highlighted. Figure 3 shows how the attachments were turned on for each feature class.

Figure 2

Figure 3

Part 2 Section 1:

In this section the ArcGIS server was connected to, and the feature access (create, delete, query, update abilities) map service was published for the document with appropriate summary, tags, description, access and use constraints, and credits documentation included.

Part 3 Section 1:

In this section a user interface was developed on a development server. The html written for the section is shown below in Figure 4. The CSS written for the section is shown in Figures 5 and 6. Finally, the JavaScript is shown in Figures 7 and 8. 

Figure 4

The html codes for browser and platform compatibility in its meta tags. It then references the claro and ESRI JavaScript API 3.22 CSS files as well as the personally created CSS file explained below. For scripting, the ArcGIS API 3.22 for JavaScript URL is referenced, then the JavaScript file shown and explained below is used. In the body, divisions were created and identified for the main window area with the map, and all panels. Some panels were configured in html, and some were identified and left to be configured in CSS.

Figure 5

Figure 6

 The CSS above codes for the special placement of each ID specified in the html document, as well as classes introduced with the JavaScript code.

Figure 7

Figure 8

The JavaScript file codes for most of the functionality of the application. Modules are imported, snapping is enabled, a sample ESRI geometry service is referenced, and a basemap is created on which everything else will be displayed. Lines 41 through 51 add the feature services which the application will edit. A function is then created for adding layers.

Part 3 Section 2:

In this section the application was edited for compatibility with smart phones. A toggle function for the sidebar was added with the addition of the following code, referenced in the html file under the other JavaScript files:

Figure 9

The CSS was edited to accommodate this toggle function, resize various areas of the application, as well as add z-index stack order information. More meta tags in the html document were also added for better compatibility. Once completed, the files from this section were moved to a deployment server.

Results:

Figure 10: Finished VGI Application

The completed live VGI application can be viewed here. Above is a screenshot of the application. A user can zoom and pan to the appropriate location, click on a feature type in the sidebar, click on the toggle button on the upper right corner if they need to move the sidebar to see the map and where they would like to place a feature (especially on a mobile platform this is useful), then place or draw a feature. With sidewalks and polygons, many vectors can be created and when the object is finished being drawn, the user can double click to finish. This results in a pop-up window like is seen below.

Figure 11

In this window attributes can be entered in for the specific object, and attachments can be made if necessary. Views of this application running in Safari on iOS are shown below.

Figure 12

Figure 13

Sources:

• Geometry Service by ESRI
• Instructions and data from Dr. Cyril Wilson