The Map Center includes a variety of user interface items that aim to keep the user experience relatively consistent across pages and across modules. Some of these are missing in embedded maps, but other pages should include these as needed.
We use jQuery UI‘s Overcast theme as a base for items that make use of jQuery UI; right now, that just includes dialog boxes.
We keep broadcast-ready versions of all of our maps that omit several of the page features that normally surround Map Center pages, such as site navigation and featured politics stories. The main markup parts of these maps (everything inside #view_info and #content_area) should almost always be the same, though. Usually there are some additional styles applied to change text sizes and/or reposition elements to make them more readable on air.
These are standard jQuery UI dialog boxes. When creating these, be sure to add them to nhmc.cleanup.futureGarbage and nhmc.cleanup.activeDialogs so the appropriate cleanup routines know about them for later.
Toward the top of each Map Center page is a #nav_outermost element that contains all of the containers needed for the user to select the page they want to view. This is handled outside of the Map Center core by the standalone JavaScript file lib/map_center/navigation.js, which takes care of all of the event bindings and populates the navigation’s #nav_container with an option for every page listed in that JS file’s navObjects array. Each object in navObjects should contain four properties:
This navigation uses the Roto library, which works great but raises errors from time to time; we keep it collapsed by default, but it doesn’t expect to ever be hidden. Errors raised by this library can be safely ignored.
All pages (so far) have extra information (most commonly map legends) in the #sidebar element. This element contains three important child elements:
Tabs live in the #view_tabs element and are each <div> elements with the class view_tab. The tab marked as active on the page also should have the class view_tab_active; this will be moved as necessary by the event bindings in nhmc.mapCenterInit.
Each tab at least should contain an <a> element with the class view_tab_option containing the tab’s text. It is up to the module developer to add module-specific handlers for these options, including parsing their text or href attributes as needed.
Tabs with the classes view_tab_more and view_tab_options_more, if provided, can include child dropdown menus, which are implemented as <ul> elements (called #view_tab_more_menu and #view_tab_options_more_menu, respectively) that contain more of these a.view_tab_option elements; when these are clicked, their text and href attributes replace those of the tab’s top-level .view_tab_option element (i.e., above the <ul>). For an example of both of these tabs, see ethnicity.html; for an example of tabs without dropdown menus, see calc.html.
These informational boxes appear next to the user’s cursor (if on a desktop device) or touch location (if on a mobile device) in certain modules to show details about the area touched or hovered over.
See also
See the tooltip package documentation for details.
Flyouts are a special case of tooltip intended specifically for broadcast maps. They are positioned on the left side of the screen and tend to be vertically centered. These allow for the tooltip information to be presented without actually covering up the part of the map with which the people on air are interacting.
When flyouts are rendered, they should add a stroke to the area being touched or hovered over; when they are destroyed, they should remove that stroke.