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