U.S. State Information” is a single-page jQuery web app I designed and developed. It has an interactive map of the United States, and users can click on any of the states in the map to make the page display the text of the selected state’s article from Wikipedia.

Screenshot of U.S. State Information app
A screenshot of the app with Minnesota currently selected. Click to view image in larger size.

This web app was a personal side project of mine. My main motivation for creating it was to experiment with interactive maps and loading text of Wikipedia articles through AJAX requests. This app might be a work-in-progress with occasional updates in the future.

State Selection

When I was preparing to make this web app, I knew I wanted it to have an interactive map, so I searched for and tested out a variety of JavaScript plugins that would give this functionality. Ultimately I chose the plugin JQVMap (jQuery Vector Maps), which I found to be the easiest to set up, and its maps had smoother performance than some of the other plugins. JQVMap included a pre-made SVG map of the United States, as well as a functionality for zooming in and out of maps.

A common problem with interactive maps is that the tiny regions can be difficult for users to click on, let alone see. Particularly on a map of the United States, many of the northeastern states appear quite small (despite having larger populations than other states geographically bigger than them), and the District of Columbia is practically microscopic. I didn’t want users to overlook or have trouble clicking on these small regions, so as an alternative way for users to select states, I made an index that has an alphabetically ordered list of the names of all 50 states plus D.C.

I made the map and the state index cooperate with each other. Regardless of whether the user selects a state from the map or the index, both sections recognize simultaneously what the currently selected state is. The currently selected state is colored red on the map, and its name is circled around in the index. The index also strikes out the names of any states that had been previously selected during the current session.

Loading the Article

After the user selects a state from either the map or the index, the web page makes an AJAX request to the Wikimedia API to fetch the Wikipedia article of the selected state. For this U.S. State Information app, rather than displaying the entire full-length Wikipedia article with all the pictures and charts, I wanted to display only the text from the article’s introductory section.

Because the article text is acquired dynamically from Wikipedia, this app is always getting the latest revision of an article at the moment it’s been requested to load by the user. (And because Wikipedia is a super popular website that anyone can edit, the articles are subject to change quite often.)

If the user selects another state, the previously selected state’s article disappears and gets replaced with the newly selected state’s article. Whenever another state is selected, if the web page has been scrolled to a lower position in the web browser, the page will automatically scroll back to the top of the main area; this is for the user’s convenience, as the user would need to scroll up anyway in order to read the new article from the beginning. Having the same scroll-to-top effect is a button with an upward-pointing arrow that appears in the lower-right corner of the browser after the user scrolls far enough down the page.

As I was developing this, I soon realized some of the queries to Wikipedia articles redirected to disambiguation pages or articles other than the state article I wanted, so I needed to clarify the query to get around the redirection. For example, searching “Georgia” doesn’t go straight to the article about the American state but instead to a disambiguation page, because there’s the country in western Asia that coincidentally shares the same name. Other problematic state names were “New York” (it could be either the state or the city of that name) and “Washington” (could be either the northwestern state or the federal capital in D.C.).

Note: Because this web app allows jumping between different Wikipedia articles of U.S. states so quickly and easily, the big differences in the quality of writing between articles becomes more apparent. The articles’ intros aren’t a uniform length either: For example (at least at the time of me writing this), Illinois’ intro is the most detailed at seven paragraphs long, while North Carolina’s has only two short paragraphs.

Designing the Page

I gave this app a quaint book theme by using photographs of grungy textures available free from Fudgegraphics. The background of the main content area of the page has the texture of old paper, and the background of the header and footer sections have the texture of a tattered book’s cover. To make the web page more readily adaptable to any browser window size, as well as to reduce the total loading time of the web page, I modified the original texture photographs in Adobe Photoshop to make them seamless “tiles” that repeat infinitely.

The app uses the free web font Kelvnich, provided by Font Squirrel.

Although I recommend viewing U.S. State Information on a desktop or laptop computer for the best experience, I’ve optimized it to have a responsive layout so that it can work on mobile devices too. Whenever the browser viewport is very narrow (i.e., on smartphones), I made the interactive map hidden because the states on the map become much too tiny to be accurately tapped with your finger.

Open the Web App

U.S. State Information

What's Next?

If your company needs its own web app designed or developed, maybe I can be of assistance!

Similar Projects

To read about another app I both designed and developed myself, see MTG Deck Builder.

To read about another project I designed involving a map of the United States, see the “Top 30 U.S. Companies by Revenue” infographic.

To read about another app’s graphical user interface I designed, see ScoreOS.