Principles of operation

The Map Center is designed to be a system for rapid (up to near-real-time) generation of browser-based vector choropleth maps related to the 2012 state and federal election cycle.

Compatibility

The Map Center officially supports (i.e., is specifically tested on) the latest versions of Firefox, Chrome and Mobile Safari as well as Internet Explorer 8 and later. More generally, it should be compatible with any relatively modern browser that supports SVG, including Android 3.0; Android 2.x devices are considered partially compatible due to a canvas fallback that does not support events on shapes on the canvas.

There is a particular emphasis on planning for touch events and supporting Mobile Safari on the iPad in particular since an iPad 2 (using HDMI mirroring and eventually feeding into the WETA control room) is used to manipulate the Map Center on the air.

Components

We use jQuery for most of our client-side heavy lifting, including handling AJAX (technically JSONP) requests, UI events and animations. jQuery UI is used for specific widgets – primarily dialog boxes. Highcharts handles our occasional charting needs (currently just in the Electoral College module), and Dojo gets brought in for its vector graphics library. We use Modernizr to determine whether users are on touch-capable devices.

The core Map Center code handles the rest of the basics–drawing, coloring and clearing map areas (e.g., counties and states), adding city labels where necessary, positioning tooltips on map areas, binding common UI behaviors and passing execution off to a specific Map Center module.

Execution flow

When the DOM is ready, we load Dojo’s graphics library and prepare a surface object on the #map element. This surface object is exposed as nhmc.surface and is the area on which all map vector graphics will be drawn.

Once that surface is ready, we initialize the rest of the Map Center core in nhmc.mapCenterInit. That function is described more fully in its own documentation, but overall, it does the following:

• Renders the initial nationwide state map if provided.
• Binds specific map-drawing event handlers.
• Shows the default map view on the page, as defined in the #map_view hidden <input> element (generally included at the bottom of the sidebar).
• Binds a few outdated UI behaviors (used in initial testing but referring to elements which are currently omitted).
• Binds general UI behaviors for the tabs that are included in most modules.

When the initial render of the map is finished, the drawingComplete signal fires (which happens any time a map view is finished rendering), which in turn fires (this one time only) the coreInitialized signal to pass execution off to whatever module is responsible for the page. (All modules ultimately consist of an event handler that is bound to coreInitialized.)