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

ArcGIS API for JavaScript 1

Introduction:

The purpose of this activity was for me to learn how to utilize the ArcGIS JavaScript API to embed GIS services into any website. I used these services to create interactive maps featuring pop-up information, and routing services.

Methods:

Part 1: Creating a basic Web GIS mapping app

In order to create and style the first map page, I imported Esri's Dojo Dijit "claro" stylesheet, and the Esri stylesheet for web maps immediately below my basic meta tags (Figure 1). The Dijit themes establish how the map is going to look in the browser.

Figure 1: Basic HTML code with stylesheet references.

After importing the dijit theme, I wrote a CSS style for the web map extent (Figure 2).

Figure 2: Web map extent CSS.

Next I used a <script> tag to reference the ArcGIS JavaScript API (Figure 3). This allows my HTML page to implement the API.

Figure 3: Referencing the ArcGIS JavaScript API

After referencing the API, I created the body of the document, referencing claro, and creating the web map extent (Figure 4).

Figure 4: Creating the web map extent and referencing claro.

Next, I wrote JavaScript code to implement the web app. I created a new map, with a center coordinate just east of the US, and with a zoom level that shows most of the world (Figure 5, 6).

Figure 5: The JavaScript code to create a map.

Figure 6: The newly created map!

Part 2: Build a Web GIS app with operational layer functionality

In the next portion of the lab, I created a map of San Francisco, CA with pop-up windows showing tree species (Figure 7).

Figure 7: Trees of San Francisco, California.

I coded the pop-up windows, so that they would link the end-user to the wikipedia page related to each tree species (Figure 8).

Figure 8: The JavaScript code for the pop-up window.

I then adjusted the HTML, so that the extent would be centered on downtown Eau Claire, Wisconsin. I used a feature service of the schools, and created pop-up windows to show the name, elevation, and address of every school (Figure 9).

Figure 9: The pop-up window

Part 3: Developing a simple routing application

In the final portion of the lab, I created a routing application centered around downtown Eau Claire, but with the capability to route anywhere in the U.S.A.. In order to do so, I first created an HTML page with a viewport tag, so it will be responsive on iOS devices. Next, I referenced both the "esri" and the claro stylesheets, as well as the ArcGIS API for JavaScript.

After saving my HTML, I created used JavaScript to create a new map, and calibrated it to center in on downtown Eau Claire. Next, I referenced the network service from Esri's servers. I then added arguments to solve the task, symbolize the map, add stops to the map, show the route, and send an error message to the end-user if they demand an erroneous route. After finishing the JavaScript, I referenced it in the HTML, and added text to describe the app to the end-user.

Results:

The first map runs completely in the browser, without any additional plug-ins.

Figure 10: The first map, as viewed on an iPhone.
Notice how the zoom tool is barely visible,
this makes it impossible to click with a finger. 

The second map features pop-up windows, a scalebar for reference, and "viewport" tags to adjust the scaling of the map to be operable on iPhones (Figure 11).

Figure 11: The second map, as viewed on an iPhone.
The viewport tag resized the zoom tool to fit the screen.

The third map performs simple routing while embedded in an HTML page, with "viewport" tags to adjust scaling for iOS devices (Figure 12).

Figure 12: The third map, as viewed on an iPhone.

The viewport tag for HTML is truly a very useful tool, as it helps make the app more responsive on iOS devices (Figure 13).

Figure 13: The viewport tag.

Map One
Map Two
Map Three




Sources:
EC_Schools feature class was obtained from MapCruzin.com at
http://www.mapcruzin.com/geographic-names-shapefiles/#School
EC_Schools_Address was assembled by GEOG 455 class, fall 2013.
Widget_infowindow files were provided by Esri at
https://developers.arcgis.com/javascript/jssamples.html

Learning HTML, CSS and JavaScript

Goals:

This lab was to introduce the basics of creating an HTML page, styling it with CSS, and including JavaScript enabled features. The goal of this lab was to build coding confidence so I could build my own webpage. Later, I will use these skills to make web pages with ArcGIS API for JavaScript.

Methods:

Part 1: Developing a web page using HTML tags

In order to learn the basics of creating a webpage, we started with HTML. In order to create an HTML page, first you need to declare the document type at the top of the page, with <!DOCTYPE html>. After declaring the document type, all further code must be written between the tags <html> and </html>. The name shown at the top of your browser is called the title, and it is set by the <title> tags inside the <head> tags (Figure 1, 2).

Figure 1: The document type, <html> tag, and title.

Figure 2: The title, as it appears in google chrome.

Next, the body of the document is created between the <body> and </body> tags. I used a <div> tag with the id="header" to create a subdivision called "header" within the body text. Within the header I used varying levels of header tags from <h1> to <h3> to write important information in the heading of my website (Figures 3, 4).

Figure 3: My header text.

Figure 4: Examples of the varying header options
using taxonomic levels as an example.

After creating the headers, I make an unordered list of my hobbies, using the unordered list tag <ul>, and the list item <li> tags. I used the <strong> tag to bold the text "these are my hobbies" within its own paragraph made with the <p> tags.

Figure 5: Code for the unordered list.

Figure 6: The result of the code in Figure 5.
Note how <strong> formatted "These are my hobbies"

Part 2: Styling your web page with the use of CSS

Cascading Style Sheets (CSS) is how html pages are customized to be more aesthetically appealing. CSS allows the customization of background colors, margin sizes, text colors, fonts, and borders. CSS works with html by utilizing <div> id's. If I wanted to change the styling for the area holding most of my text, I would use put it within the  <div id="main"> my html code. In CSS, I would write the styling code within #main { } to have it link to the div id I placed in the html (Figure 7).

Figure 7: The CSS for my webpage.

Next, I wrote a form to receive sentences as inputs from viewers to the webpage (Figures 8,9).

Figure 8: Code for the input window.

Figure 9: The resulting input window.

After coding the form, I wrote code for a results box showing some JavaScript code I wrote, and added an image of a map I created as part of an earlier lab.

Figure 10: The image with the results box above it.

Part 3: Introduction to JavaScript

To gain a basic understanding of JavaScript, I created results to fill the box described in Part 2. The code first had to find where it was to place the answers, then create a paragraph. After creating the paragraph, it was to create a string of text to put inside the paragraph. After placing the new text in the paragraph, it put the new paragraph inside the div tagged "resultsBox".

Figure 11: The JavaScript Code, and the results above it.

Results:

After learning the basics of HTML, CSS and JavaScript, I was to make my own webpage. The webpage needed to have the following features:

• The name of your proposed company and other relevant information
• Company Logo.
• Links to resources that will be useful to your end-users.
• Links to the Web GIS application you developed in Lab 3 and two non-secured Web GIS applications from Esri JavScript website.
• An ordered list of six services that your company will be delivering. These services should be highlighted with a catchy color other than black.
• A form that will enable end-users to search your website and company services
• At least two pictures that are of importance to your proposed company.

Here's the resulting web site:

Figure 12: Website part 1

Figure 13: Website part 2

Figure 14: Website part 3

Sources:
Code abstracted from Sylia Richardson of Creative Commons Attribution-ShareAlike 3.0 Unported License

Web AppBuilder for ArcGIS

Goal and Background:

This exercise was designed to build familiarity with the Web AppBuilder for ArcGIS. In order become acquainted with the software, I created an application with services I had authored, customized widgets, and deployed the finished application to the development Server. We used both the Integrated and Developer Editions of Web AppBuilder to create apps.

Methods:

In order to create the first web app, I used the Integrated Edition of Web AppBuilder through ArcGIS Online. The first step of creating the app was for me to select a web map on which to base the app. After adding the web map and setting the extent, I choose to base my app off of the foldable theme. I added the Basemap Gallery and the measurement widgets without any customization. Next, I added the bookmark widget, and added customized bookmarks for each of the following regions: Western States, Eastern States, Southeastern States, Northeastern States, and Alaska.

The first web app had now reached a rudimentary level, but further customization was necessary to truly enhance its capabilities. The first step of this customization was to add and configure the chart widget to create charts of either magnitude or depth. The chart widget was further configured so it only created charts of earthquake occurrences within user-defined areas. I next added and configured the query widget, so earthquake occurrence points can be selected by magnitude, year, and location. I also added the draw widget.

To further customize the app, I imported the app into the Developer Edition of Web AppBuilder. I added a custom widget "Batch Attribute Editor" to Web AppBuilder by pasting it in the program's "widgets" folder in the C: drive. Next, I added the Batch Attribute Editor widget and customized it to only allow edits of the "Earthquakes" layer.

Deploying the app to the development server was a simple process requiring me to download the completed app from the Web AppBuilder as a zipped folder, unzipping the folder, and pasting the unzipped app folder to my folder in the development server.

Results:

The First Map, features several widgets. The Basemap Gallery widget grants the end-user the ability to choose from a selection of basemaps hosted by Esri (Figure 1). The measurement widget allows for the end-user to measure Euclidean distances and areas on the map (Figure 2). My customized bookmark widget allows the user to center the extent on a certain region of interest at the click of a button, without needing to try and pan and zoom using the built-in controls (Figure 3). The chart widget enables the end-user to select an area of interest and charts either the earthquake's magnitude or depth (km), per the user's choice (Figure 4). The query widget allows the end-user to investigate earthquake occurrences within specific states, excluding those below a user-defined magnitude and outside of a user-defined span of time (Figure 5). The draw widget allows the end-user to draw on the map viewer, and works as an expanded version of the measure tool (Figure 6).

The Second Map features the "Batch Attribute Editor", a tool that allows the end-user to edit the names of features within a user specified area (Figure 7). This tool will allow for crowd-sourcing of more specific names than the general area names the have features currently.

Figure 1: Basemap Gallery Widget

Figure 2: Measurement Widget

Figure 3: Bookmark Widget

Figure 4: Chart Widget

Figure 5: Query Widget

Figure 6: Draw Widget

Figure 7: Batch Attribute Editor Widget

Sources:
Fu, Pinde (2015). HERE, Census at:
\\EsriPress\GTKWebGIS\Chapter3\Data.gdb\Earthquakes, courtesy of USGS National Atlas.
\\EsriPress\GTKWebGIS\Chapter3\Data.gdb\Hurricanes, courtesy of NOAA National Climatic
Data Center.

Geospatial Web Services

Goal and Background

The goal of this lab was for me to become comfortable with the various techniques used to host geospatial web services. I published hosted feature services via ArcGIS online by uploading both shapefiles and CSV files directly, as well as by using an ArcMap document to facilitate the upload. I published a tiled map service using ArcGIS Server, and subsequently consumed the map service in a web application. I authored a feature access service with time-enabled data and made a web map to consume the service.

Methods

In order to publish the shapefiles, I selected the shapefiles I wanted to upload in ArcCatalog and sent them to a .zip folder. I then uploaded the .zip folder using ArcGIS Online's "Add Item" button. After adding a title and tags, I published the data to ArcGIS Online as a feature service (Figure 1).

Figure 1: Shapefile to hosted feature service

Next, I created a web map using the hosted feature service I just uploaded. First, I simplified the layer names. I then adjusted the transparency of the "Counties" layer to help it fit into the background better, changed the colors and stroke width of "Highways" and "Interstates" so they would be more easily visible and differentiable, and changed "Cities" to a darker color (Figure 2). After I deemed the map "cartographically pleasing", I saved my map to ArcGIS Online.

Figure 2: Transportation web map

Next, I published data of Wisconsin fire occurrences in 2004 that was saved in a Microsoft Excel spreadsheet with XY coordinates. In order to publish this data I first saved a copy of the spreadsheet as a CSV file. I next used ArcGIS Online's "Add Item" button to import the data as points located at their XY coordinates (Figure 3).

Figure 3: CSV to Points with native attributes visible.

Upon displaying the data, I noticed that the pop-ups only showed the Object ID, Feature ID ,and X and Y coordinates of the individual points rather than show the date of the fire at the point's location (Figure 3). In order to amend this, I configured the pop-ups to only display the date of the fire at each point (Figures 4 & 5).

Figure 4: Wisconsin fire occurrences with the edited pop-up window

I published a feature service containing two vector datasets related to Wisconsin water resources. First, I added the "Rivers_and_Streams" and "Lakes" features from my class folder to a new map. I then edited the feature titles and saved the map to my personal folder as a .mxd document. Next, I connected ArcGIS Desktop to ArcGIS Online. I used ArcGIS Desktop's built-in capabilities to publish my map to ArcGIS Online as a feature service with creating, querying and updating capabilities. These capabilities will allow an end-user to add features to the feature service, update the feature service with features they've edited, or use the data within the feature service to query features. After configuring the feature's settings, title, summary, and tags, I published the map (Figure 6). The layers had superfluously redundant labels, so I renamed them with their simplified names from my ArcMap document (Figure 6). The map had unhelpful pop-ups, so I eliminated the pop-ups for the "Rivers and Streams" layer and configured the "Lakes"'s pop-ups so only the name and area in kilometers are shown (Figure 7).

Figure 5: The feature service's tags and layers' edited names. 

Figure 6: An edited pop-up for "Lakes"

After utilizing both ArcGIS Online's and ArcGIS Desktop's built-in publishing capabilities for shapefiles, .CSV's and .MXD's - I learned how to publish a tiled map service via ArcGIS Server. This first required me to connect to the department's ArcGIS server and connect to my database on the server. After connecting to my database, I imported a raster dataset from the class folder to my enterprise geodatabase (Figure 8). After configuring the symbology (Figure 9), I used ArcGIS Desktop's built-in capabilities to publish the image to my folder in the the department's ArcGIS Server (Figure 10). I enabled caching, so the map will take less bandwidth, and load faster.

Figure 9: The data's publishing settings

Figure 7: The raster data in my enterprise geodatabase

Figure 8: The raster data in ArcGIS Desktop prior to publishing

After the publishing was finalized, I navigated to the department server directory, and viewed my map service in ArcGIS Online (Figure 11).

After learning how to publish services to ArcGIS Server, I learned how to reference a service I've created, in a web map service. In order to do this, I imported two layers, "Earthquakes" and "Hurricanes" into my enterprise geodatabase (Figure 12). Next, I added the layers from my enterprise geodatabase to a new map, and saved it to my class folder. After adjusting the symbology of the layers (Figure 13), I enabled time on both layers. This allows both layers to be animated according to their temporal attributes. Next, I published the map document to the department server as a service with creating, editing, deleting, and querying capabilities (Figure 14).

Next, I opened up a blank map in ArcGIS Online. In order to add the newly-created services to a web map, I used the "Add Layer from Web" button to add the natural disaster layers merely by pasting their URL within the department server. After adding the data, I simplified the pop-ups for both classes (Figure 15), and shared my map to the department and also my course group. Next, I calibrated the time settings so the time animation will show hurricanes and earthquakes occurrences progressively; adding data to the map 6 months at a time, until all of the data is displayed (Figures 16 & 17).

Figure 10: "Earthquakes" and "Hurricanes" in my enterprise geodatabase

Results:

Figure 11: The data as it appears on ArcGIS Online

Several of the maps I generated had formatted pop-up windows, so their information is extremely easy for the end-user to interpret (Figures 4, 6, and 13). The two maps hosted on the department Server can also be viewed by anyone with the URL without costing esri credits (Figures 11 &12. The last map features time-enabled data, which allows the end-user to view both spatial and temporal trends in the data (Figures 12-15).


Raster data: Click Here
Map featuring temporal information and good pop-up windows: http://arcg.is/1L9tWEf

Figure 12: Earthquakes are symbolized as red dots, and the Hurricanes are symbolized as lines

Figure 13: A  pop-up for "Hurricanes"

Figure 14: All of the "Hurricane" lines along the Northern coast of the Gulf of Mexico

Figure 15: All of the "Earthquake" points in Alaska

Sources:
Advanced Remote Sensing Class. (2012).

Fu, Pinde (2015). Earthquake Data.
Retrived from
\\EsriPress\GTKWebGIS\Chapter3\Data.gdb\Earthquakes, courtesy of USGS National Atlas.

Fu, Pinde. (2015). Hurricane Data.
Retrived from
\\EsriPress\GTKWebGIS\Chapter3\Data.gdb\Hurricanes, courtesy of NOAA National Climatic Data Center.

Price, Maribeth. (2014). Mastering ArcGIS geodatabase.

Wilson, Cyril. (2012). unpublished data.

Wisconsin DNR. (2013).