Web GIS Lab 6

Goal and Background

Last week in lab we used ArcGIS API for JavaScript in creating a couple of apps that were designed for non-mobile platforms. This week we used some of those same skills but will be adding some additional skill sets to take those non-mobile apps and make mobile responsive Web GIS apps. By adding additional pieces of code to the API and DOM our apps will be responsive on smart phones, tablets and other mobile platforms.

Under this overall goal there were two specific goals for this lab. First is the creation of a search app which end-users can use to search addresses, congressional districts, info about senators and universities. The second goal was to create a query app that will return both graphical and textual census info for counties in Wisconsin. 

Methods

Part 1 Creating a search app

As in the past couple of labs Dr.Wilson gave a scenario for this weeks lab."The geospatial company which you established in Lab 4 is slowly taking root in the geospatial business. It is now time to expand your services from only desktop Web GIS applications to mobile responsive apps. In this lab, you will gain some of the skillsets required in developing mobile responsive Web GIS apps. In a year, you want your company to be large enough to be able to buy Virtual Geospatial Analytics your initial employer. You will acquire the necessary skills required in building a search app and a query app which should form part of your company’s services to clients in the near future." 

The first thing to do is to start creating the HTML and JavaScript codes that make the app functional. For this lab like lab 5 our css or style sheets will be coming from ESRI so we don't have to code those, instead we reference them in html code. Then we set the view port which is the extent that you see on a mobile device. It is important to set this so that the app displays correctly and is fully functional. Next is creating the search box where the end user will enter their search words. Figure 1 is the resulting html code for these first steps. At the bottom of the code you see a reference for a JavaScript file that we created as well as divisions between the search bar and map which will be displayed in the web app.

Figure 1 HTML code for part one of this lab. 

Once the HTML code is written the next step is to write the JavaScript file that will be referenced in the HTML. The JavaScript code is what contains all the code for the functionality of the search app. The features included in the JavaScript file are as follows.

1. The base map which in this case is a gray scale map which we have centered over a certain portion of the U.S and set a zoom extent. This ensures the map opens to this same location every time it is opened.

2.  The next portion of coding is for the search bar. In particular the congressional districts and information about the senators. This will allow the end user to search by the number of a district, the map will zoom to that district and highlight it.

3. A info template is set up so that when the map zooms to a district the end user can click on it and a box pops up which displays the district number, name of the senator as well as their party affiliation.

4. Additional search criterion are added so that universities of the U.S. are also searchable. In the same way that map zooms to districts it also zooms to searched universities and displays information including state, city and the last 4 digits of the zip code for the university.

Figures 2 and 3 are the JavaScript File for this portion of the lab which includes all the functionalities described above.

Figure 2 The first portion of the JavaScript

Figure 3 The other half of the JS file. All of this code is referenced by the HTML to give the app functionality. 

The combination of both of these files give you a mobile search app. Figures 9,10 and 11 in the results portion of my blog post show the functionalities of the app.

Part 2 Creating a query app

This portion of the lab is creating a simple mobile responsive app. The end user will use this app to see how the populations of the counties in Wisconsin compare to the population of the most populous county which is Milwaukee county. By touching the county in the mobile version or hovering over it in the desktop version the county information will display in an info window and population comparison will be displayed in a gauge.  

Just like in part one the first step is set up the HTML document for the mobile app. Figure 4 is the first portion of the HTML document where the relevant meta and external style sheets are referenced similar to part 1.

Figure 4 This is the HTML code for the first portion of part 2.

The next step is setting up the functionality of the app which is again done as JavaScript file. The functionalities we coded for include the following.

1. First is setting up the basemap which for this map is the oceans base map. Again the center and zoom extent is set and because this app focuses on the state of Wisconsin the map is centered over Wisconsin and set to a zoom level where the whole state is visible.

2. Next is linking to the selectable counties of the United States. This is done by referencing a county map server in the ESRI database. 

3. Next is setting colors for the borders of the counties. When the county is not being selected or hovered over the outline will be white. When it is being selected it will turn yellow. The counties themselves are set to gray with a percentage of transparency so that the base map is still visible through them.

4. In order for population comparisons to be performed we need to know which county has the highest population. All the other counties will be compared to this county. We write code in the JS file for the app to find the county with the max population in 2007 which in this case is Milwaukee County.

5. Next is making sure that only the data for Wisconsin is part of the query. The data set that the app is retrieving the stats from is data for the whole country so we set up a query filter which limits what data can be accessed. In the same way we want to make sure that only the counties of Wisconsin show up on the map. This is done by saying that any county in the state of Wisconsin should be displayed and no counties outside of Wisconsin.

6.Next is the gauge which shows what percentage a counties population is of Milwaukee County's population. We set up how the gauge will look with a background color of white, how big the gauge is, and what percentages show up. We have it displaying 0 to 100 percent in increments of 25. We also chose the gauge itself to be yellow and it will change instantaneously as different counties are selected. We also choose where the percent is displayed and in this case we chose to be in the middle of the gauge. Figures 5 and 6 are the JavaScript file for part 2.

Figure 5 The first half of the JS file.

Figure 6 The second half of the JS file.

A css style sheet is created that corresponds with all the functionalities and how they should appear on the app (Figure 7).

Figure 7 The style sheet for the functionalities of this query web app.

After the JavaScript and CSS files are written they need to be referenced in the HTML code. Figure 8 is the HTML code in its entirety for part 2 of the lab.

Figure 8 The HTML document for the mobile query app.

Results

For the first part of the lab creating the search app the resulting app and functionality is seen in figures 9, 10 and 11.

Figure 9 This is district 3501 you can see the district is highlighted a different color and when clicked on the text box pops up with information about the district.

Figure 10 This is using the university search functionality. I search for the University of Miami. Even when zoomed out the info box stays the same size so the info is legible.

Figure 11 This is the zoom extent that is set for when the end user searched a university. It zooms way in to the location of the school but is still visible zoomed out like in figure 10.

For the second part of the lab the app generated displays and functions as show in figure 12 and 13.

Figure 12 This is what the query app looks like when it is first opened. The counties of Wisconsin are gray but transparent enough to still see the base map. They have white boundaries. The info box and gauge are blank because no county is selected.

Figure 13 This is what it looks like in the app when a county is selected or hovered over. The county boundary turns yellow and the info box and gauge are filled with information about the county.

Sources

University feature class is obtained from Esri InfoGroup Business Locations dataset.