VGI

Goals and Objectives:

Volunteered Geographic Information (VGI) is spatial information collected by members of the public through crowd-sourcing. VGI apps allow for geo-located information to be collected at an extremely high temporal resolution, with a high degree of complexity, depending on the nature of the phenomena being recorded.

For this lab we were to:
Create domains and subtypes for enterprise geodatabase features
Prepare a feature template
Create feature editing services
Develop a simple VGI interface using the ArcGIS API for JavaScript
Verify the integrity of the data collected with the app

Methods:

The first step of this process was to create domains and subtypes for the new features. The features were: fire hydrants, sidewalks, and green spaces. For the fire hydrants, I created a coded value domain "fire hydrant" with values for the colors red and yellow. For sidewalks, I created a coded value domain "condition" with values for "very good" and "needs repair". For green spaces, I created a coded value domain "health" with values for "lush" and "needs fixing".

Next, I created feature templates for the new features. Each template was created using the Web Mercator projection. Each feature was set to use its newly created coded value domain, and also to have a "comments" field where up to 80 characters of text may be entered. After each feature class was created, I set their symbologies and calibrated them to allow for the attachment of images.

After the feature classes were all set-up, I shared the map as a service to ArcGIS Server. I published the service with "feature access" enabled, as it will allow end users to perform editing over the web.

In order to create the app, I first created an HTML page with mobile responsive tags (Figure 1).

Figure 1: Mobile tags.

Next, I created a stylesheet with specific settings for: the body, the template picker pane, the panel header, the map, the editor template picker, and the info window (Figure 2).

Figure 2: CSS tags.

I then coded the behavior of the VGI app with JavaScript. First, I imported modules from Esri and Dojo and used the parse function to execute the dijits. I then wrote code to enable snapping, by utilizing a geometry service from Esri. Next, I created the map, and assigned my feature templates to the map. After assigning the feature templates to the map, I called the method to add the layers to the map, resize the info window, and create an event function to listen for interactions the end-users will be making with the VGI app.

Results:

The image below is from my finished VGI application (Figure 3).

Figure 1: The app running on Desktop.

Functioning VGI app

Although, the VGI app worked well in a desktop environment, It really suffered when in a mobile environment (Figure 4).

Figure 4: How the app appeared on mobile.

In order to compensate for these drawbacks, I added some responsive elements to show or hide the template picker on the request of the end-user (Figures 5,6).

Figure 5: The button in the lower right controls whether the template picker is shown or hidden.

Figure 6: When the template picker is shown,
the zoom widget slides with it, so it is still accessible to the end-user.

The working app can be accessed here:

Conclusions:

VGI apps are extremely useful, and are actually quite easy to create when given the proper tools. Apps must be calibrated to work in a mobile environment, if intended to be used in a mobile environment, otherwise they'll never get used.

Sources:

Red fire hydrant picture was obtained from www.dreamstime.com

Esri Geometry service: "http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer"

ArcGIS API for JavaScript 2: Mobile Responsive Apps

Introduction:

Certain sections of code are necessary to fully optimize an app for it to be fully responsive in a mobile environment. This lab was intended to provide a situations for these code blocks to be implemented.

Methods:

Part 1: Creating a search app

In this part of the lab, I created a search app that allowed the end-user to perform searches for addresses, congressional districts, senator information, and also university information.

In order to make the app, I first created an html document featuring code specifically for both iOS and Android mobile operating systems. The code adjusts the viewport, so the map will be scaled properly when viewed on the devices (Figure 1).

Figure 1: Setting the viewport tag to be responsive on mobile.

Next, I coded the search function in JavaScript. First, I created a map with the light gray canvas basemap. I then added a search bar that collapses into a single button when not in use (Figure 2).

Figure 2: Collapsible search button.

I then included code to connect the search widget to the attributes of the related feature classes.

Part 2: Creating a query app

In this part of the lab, I created a mobile responsive query app which shows how the population of each county in Wisconsin compares to the population of Milwaukee County.

This was done by first adding county boundary data from an Esri server. Then, a query was written so only the counties of Wisconsin would be shown (Figure 3). Next, I set the colors to be displayed when the end-user hovers or clicks on a specific county (Figure 3).

Figure 3: The first code block selects the counties of Wisconsin and symbolizes them.
 The second code block sets the symbology for when a county is highlighted by the end-user.

Next, I created a query task to determine the population of the most populous county of Wisconsin. I used this information to create a gauge, so that when the end-user hovers over a county, its the percentage of Milwaukee County's population that it composes will be displayed as a percentage (Figures 4,5).

Figure 4: Creating a gauge to show population percentages.

Figure 5: Adding the calculated percentage to the gauge.

I also created a CSS sheet in order to properly format the "County Info" box with a dropshadow and other styling flourishes.

Figure 6: The CSS for the "County Info" box.

Results:

The first map allows for the end-user to search for congressional districts by number, but it is difficult to operate, as each district must be identified by its state number and its district number. For example, Eau Claire, Wisconsin is in Wisconsin's 3rd district, which is searchable by typing "5503" into the search bar (Figure 7).

Figure 7: Eau Claire's Congressional district.

The app worked well on mobile, specifically because of the collapsible search button. When not in use, the search bar appeared as merely a button, and could be expanded or collapsed by clicking.

Figure 8: Search Button

Conclusion:

Most consumers spend substantially more time on mobile devices than desktop computers, and app design needs to reflect that. This lab provided a good foundation regarding designing Web GIS apps to be usable in both desktop and mobile environments.


Resulting map from Part 1
Resulting map from Part 2