We want to build your map.

User Interfaces for Interactive Maps (PCD 2012)

This page contains some examples and links expanding on the presentation on interactive map UIs for Practical Cartography Day at NACIS 2012. You can download the presentation slides in PDF format if you'd like, although they don't say much on their own. The talk focused on five areas of map UI design, four of which can benefit from some HTML, CSS, and JavaScript examples. The following are some simplified demonstrations of how to achieve certain UI elements and layouts discussed in the four sections, as well as a few external links.

View source on the examples to see what they're made of and how they work! This assumes some basic understanding of web development and coding. If you or a friend needs a crash course, try the web fundamentals and JavaScript exercises at Codeacademy.

Layout Example

View an example map layout that includes a header, one side bar, and a small control panel that can be opened and closed. The map and side bar will fit the height of the window as you resize it, while the header and map will fill the width. The nature of HTML makes it easier to fill up horizontal space than vertical, so a resize function is necessary in the JavaScript code to handle the vertical sizing. As with many projects, this example makes use of the jQuery library to handle events and manipulation of DOM elements.

layout example

The example uses Leaflet for mapping, and map tiles from Stamen Design.

Data Probe Example

We use the term "data probe" most of the time to refer to small tips that appear on mouseover to show a few data values. This is often in contrast to anchored, persistent pop-ups that you see in things like Google Maps. The following example shows how simple data probes might be used on a Leaflet map. Leaflet also has some built-in methods for the more traditional, anchored pop-up. If you take the full TileMill/MapBox route, there are some options for tooltip-style data probes, too.

probe example

Chart Examples

There are many ways to make interactive charts. Before mentioning prepackaged libraries, here's a brief example of how a simple chart (a histogram, in this case) can be generated more or less manually, with some help from jQuery. The example generates some div elements for histogram bins, generates some random data, calculates the range for each bin and the number of data values in it, then sets the heights of the divs accordingly. Some CSS styles ensure that the bins are positioned correctly.

histogram example

For serious charting, however, it is wise to use a code library that some genius has devised. We like d3.js lately, as do many, many other people. (It has some good mapping capabilities, too.) You're probably used to seeing some real whiz-bang graphics done with d3 (just look at the example gallery), but keep in mind that it's fundamentally about data, not the visuals. D3 can be very useful for even simple charts.

D3 has a bit of a learning curve for beginners, but go through some tutorials and eventually the core of it starts to make sense. Slides from Mike Bostock's D3 workshop are enlightening, too. Once you get the hang of the enter, update, and exit selections, you'll be well on your way!

Search and List Example

This example builds upon the layout example to show how some simple collapsible lists and search elements might be added to a map. Search results update live as you type (it searches some dummy data, names of Oregon cities). The lists are made collapsible by simple manipulation of height (again with the help of jQuery). Pieces fit together and scale nicely because the div elements simply occupy up the height of their contents if an explicit height is not specified. Note that the search results have a max-height property in CSS, so that very long result lists will have a scroll bar rather than extending the whole length of the page.

list and search example