GEOG 588
Planning GIS for Emergency Management

Emerging Theme: Map Mashups and Responsive Design


Map Mashups

When this class was taught for the first time in 2008, the importance of map mashups in emergency management contexts was somewhat limited. At that time, it was possible to create simple mashups, but we were mostly talking about the placement of simple pin icons on generic basemaps. Today, we've got vastly more sophisticated examples, many of which are designed around emergency management tasks quite specifically.

A fundamental principle behind mashups, which causes them to be different than all other web maps, is that they're based on an amalgamation of data sources and mapping technologies. They are the sum of multiple parts, some of which may have never been intended to work together originally. With relatively little programming expertise, you may be able to manipulate the way a particular web map works through its Application Programming Interface (API). Because so many static and streaming geospatial data sources are now available in formats that are broadly interoperable, you can begin to blend together (mashup!) data with maps very quickly today.

In the context of Emergency Management, mashups are now extremely common. Mapping providers like Google actively promote the rapid development of mashups for crises as they emerge, as shown in the example below from Superstorm Sandy in 2012. Check out Google's Superstorm Sandy crisis map yourself, and notice how links to data sources are prominently displayed - this encourages further mashups to spin off from the original. Click on the "layers" tab in the interface at the top right to get a list of available data sources. You may have to zoom in to see some of them in full detail.

Google's Superstorm Sandy crisis map mashup shows how map data can be brought together quickly to support emergency management and promote information dissemination to the public.

Responsive Design

Another change in recent years has been the rise and ubiquity of mobile devices for accessing real-time information. While these platforms provide a lot of interesting opportunities for geospatial professionals to develop new applications, they also pose a lot of challenges to how we're presenting maps and geospatial data. The mashup you just reviewed about Sandy has no mobile-specific version. What you see is what you get, on whatever device you view it with.

The problem area of web design to support a wide range of possible screen sizes and resolutions has coalesced today around the concept of Responsive Design. Web pages designed to be responsive will adapt their layout on-the-fly to whatever screen size and resolution is available. This means you design your pages from the ground-up to work at several different breakpoints; desktop monitor, tablet, and phone sizes for example.

Have a look at these two video presentation by Luke Wroblewski. The first one briefly describes how responsive design works, and the second video shows how principles of responsive design were used to revise an app for stormchasing called Tweester. The second video is part of a video series for Intel about designing for Ultrabooks (and is a few years old), and while it has a smidge of marketing-speak embedded as a result, the overall message is very well stated.

Deliverables for this week's emerging theme

  • Post a comment that describes what Emergency Management applications you think stand to benefit from mashups that incorporate responsive design principles. What will be the toughest things to make responsive, and what will be easy to support?
  • Then, I'd like you to offer additional insight, critique, a counter-example, or something else constructive in response to one of your colleagues' posts.
  • Brownie points for linking to other technology demos, pictures, blog posts, etc... that you've found to enrich your posts so that we may all benefit.

Note: Post your deliverable in the Lesson 4 Emerging Themes Discussion Forum in Canvas.