“U.S. State Information” is a simple single-page web app I designed and developed. It has an interactive map of the United States, and users can click on any individual state in the map to make the page display the introductory text of the selected state’s article from Wikipedia.
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.
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 which 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. (Special thanks to 9bit Studios for the helpful tutorial on this.) 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 lede (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.
Side 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’ ledes aren’t a uniform length either: For example (at least at the time of me writing this), Illinois’s lede is the most in-depth at seven paragraphs long, while North Carolina’s has only two short, bland 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.