Lab 7: Creating a Volunteer Geographic Information (VGI) Application

Goals and Background

  This lab uses JavaScript API for ArcGIS to create a VGI mobile responsive app. VGI apps can be used for many different things such as locating fires or where paramedics need to attend in the wake of a natural disaster. In general, VGI apps are used when a large amount of data needs to be collected in a little amount of time. The VGI created in this lab where end users will be able to upload the condition of sidewalks, green areas, and fire hydrants. Users will be able to show whether a sidewalk is in good or poor condition, if a fire hydrant is red or yellow, or if a green space is lush or in need of fixing. Users will be able to upload the location, comments, and photos for each feature. This will be accomplished by meeting the two main goals of this lab:

  1. Create the feature classes for the VGI app and publish them to the server.

  2. Construct the VGI app in JavaScript API and make it mobile responsive.

Methods

1. Create the Feature Classes for the VGI app and Publish Them to the Server

This was done by completing the following described tasks in bold.

Create Domains and Subtypes for Enterprise Geodatabase Features

  The domains and subtypes were created by first connecting to the kroeniao enterprise geodatabase in an ArcMap document. Then, the domains and subtypes were altered in the properties of the geodatabase for the fire hydrant, sidewalk, and green space soon to be feature classes.

Design a Feature Template for the VGI

  This was done by first adding the light gray canvas basemap into the data frame. Then, three features classes were created within the kroeniao enterprise geodatabase. One for fire hydrants, one for sidewalks, and one for green spaces. When creating the feature classes, the appropriate domains were assigned to each. This is also where the attributes for the features were set up as well.

Create and Add Feature Attachments and Define Symbology

  Next, the ability for attachments such as photos, videos, and other documents to be attached as an attribute were enabled, and the symbology for each subtype was set. Then, using the editor toolbar, features were created for red fire hydrants, a sidwalk in good condition, a yellow fire hydrant, a lush green space area, and a green space area in need of repair. For each feature created a comment and photo attachment were assigned. 

Publish the ArcMap Document

First, the basemap was removed from the data frame and the ArcMap document was saved. Then, a server connection was created to the gis14.uwec.edu (publisher) server through the ArcCatalog toolbar. The map was then published as a service with Feature Access being enabled. This allows for users to edit the feature classes.

2. Construct the VGI App in JavaScript API and make it Mobile Responsive

  Using Notepadd ++, an html, css, and js file were used to code the mobile responsive VGI interface. First, the html was created, this can be seen below in figure 7.0. In the code, several other sheets of code are referenced such as the the imported theme, and the imported JavaScript and css styling sheets. The HTML document is used to create several <div> tags for things such as the template picker, the map, and the template picker button.

Fig 7.0: HTML for VGI Application

  Figures 7.1 and 7.2 display the css code for the VGI interface. This is where all of the <div> tags in the html are formatted so that they will look nice on both a desktop and mobile platform. The picture used for the template picker button (the id #ui-feature-templates-button) was assigned by using a very long html code. Other things styled here include the template picker, the map, the body of the html, the pop-up window, the instructions for how to use the application, and the title of the application. 

Fig 7.2: Part 2 of the css file

Fig 7.1: Part 1 of the css file

  Next, the JavaScript written for the VGI application is shown below in figures 7.3, 7.4 and 7.5. In figure 7.3, the necessary modules are imported, the definition parameter function is set up, snapping is enabled, the geometry service is imported from ArcGIS online, and a basemap is imported to display the feature classes on.

Fig 7.3: Part 1 of JavaScript file for VGI

  Figure 7.4 adds the feature classes to the map from the universities live server. For the features, a pop-up window is created so that users can view the comments and photos and other attachments about the features which users have added. Then, a new function is coded to allow for the editing of features. Lastly, snapping is enabled to help prevent topology errors.

Fig 7.4: Part 2 of JavaScript file for VGI

  This third section of JavaScript shown below in figure 7.5 is coded in a separate sheet. This code uses a function to allow the template picker to toggle to make the VGI app more mobile friendly. This is done by changing the placement of the template picker and the location of the zoom slider when the toggle button is clicked or touched. This allows users to be able to use their whole screen to view the app.

Fig 7.5: Function to Enable Toggling of the Template Picker

  Lastly, the app was put to the test, and data was collected in the field.

Results

  The application for this VGI can be accessed here: Eau Claire Miscellaneous VGI App. To demonstrate how the the application works, figure 7.6 demos how to add a red fire hydrant. Although the video is shown using a PC, a very similar process is done to add features on a mobile device. The application allows users to add three different types of features (fire hydrants, sidewalks, and green spaces) each having two subtypes. The application is very easy to use and is made so people without much GIS knowledge can use it.

Fig 7.6: Short Demo on How to Use the VGI App

  Figures 7.7 and 7.8 show screenshots of what the application looks like on a mobile device. Figure 7.7 shows what the app looks like when the template picker is toggled off, and figure 7.8 shows what the app looks like when the template picker is toggle on. The template picker is toggled on and off by clicking the button in the upper right.

Fig 7.8: VGI App on Mobile Device With Template Picker On

Fig 7.7: VGI App on Mobile Device With Template Picker Off

Sources

ArcGIS.com 2016, (n.d) Geometry Services retrieved from
   https://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer
Red fire hydrant [Digital image]. (n.d). Retrived from
    https://www.dreamstime.com
Js.ArcGIS.com 2016, (n.d) Claro Themes retrieved from
    https://js.arcgis.com/3.22/dijit/themes/claro/claro.css

Wilson, C (2017) Lab 7 VGI retrieved from
    https://drive.google.com/file/d/1shynRg9PBjNC3Cq_9iD4Fp6TJ92efgy9/view?usp=sharing