This module drives all data-driven choropleth maps not covered under any of the other Map Center modules. It is designed to display category-based and continuous value-based data for any of the available map types, and it includes a variety of useful hooks and overrides in order to be more useful for creating variations on these types of maps relatively quickly.
This module lives in lib/map_center/modules/static_maps.js, and the current data sets used with it live in lib/map_center/modules/static_maps_data/ by convention.
A page making use of this module must include one additional JavaScript file containing the data to display. As described above, this file should live in lib/map_center/modules/static_maps_data/. That file should define one global variable, nhmcStatic, with a format described below.
Depending on whether the page is intended to show one or multiple data sets, the user may have one or two tabs available; the one that is always available allows the user to select a specific map view, and the one that is available in the case of multiple data sets allows the user to select a specific data set to view.
In either case, the states or counties on the map are colored according to the data provided. The sidebar in this module shows the meaning of each color used on the map, and the tooltips for each state or county shows the specific data value that caused that state or county to receive the color it has.
There are three major configuration options that exist outside the data file itself, all changeable via global variables:
nhmcStaticBreakFormatter is a function used for rendering the sidebar entries for each color shown on the map when the data set shown uses continuous values. It accepts six arguments:
By default, this function renders the sidebar as a list of ranges from one break to the next. This function will execute every time the map view is changed.
nhmcStaticFlyouts is an object that determines whether tooltips should be rendered as flyouts. No specific properties need to be defined in this object for flyouts to be enabled; the object just needs to exist. By convention, though, to enable flyouts, the following value is used:
var nhmcStaticFlyouts = {
enabled: true
};
Other properties that get merged with those provided in this object are:
nhmcStaticTooltipFormatter is a function used for rendering the content of the tooltips corresponding to each state or county on the map. It accepts five arguments:
This function will execute every time a tooltip is created, but not while that tooltip simply updates its position within the same state or county.
One additional configuration option exists:
Two types of data sets can be displayed in a map using this module:
As described in Operation above, any page using this module must include a JavaScript file (or <script> block) that defines a variable named nhmcStatic. For a page that uses only one data set, nhmcStatic should be an object with the properties listed in either Categories or Continuous values below; for a page that uses multiple data sets, nhmcStatic should be an array of such objects.
Note
In both of the description sections below, the term “area name” refers to FIPS codes for counties and full state names for states.
A data set object for category-based data must contain the following three properties:
See also
For an example of a category-based data set, check out the Patchwork Nation categories map. The page source is located at patchwork_types.html, and the data set source is located at lib/map_center/modules/static_maps_data/patchwork_types.js.
A data set object for continuous value-based data must contain the following three properties:
breaks is an array of numbers that represent the greatest value in each group of areas that should be colored identically. The last value in breaks should be at least as great as the greatest value in the data set and may be greater. (The maximum possible value is a good default, such as 100 for percentages.)
For example, if you are mapping a data set with values ranging from 0 to 100 and want to split it up into five equally spaced groups of 20 each:
"breaks": [20, 40, 60, 80, 100]
This will define groups of:
colors is an array of hexadecimal color codes in the same order as in breaks. Continuing the previous example:
"colors": ["#000000", "#ffffff", "#ff0000", "#00ff00", "#0000ff"]
would assign the color #ff0000 to the 40 to 60 group.
areas is an object with area names as keys and data points (numbers that fall in the ranges defined in breaks) as values. Continuing the previous example:
"areas": {
"Missouri": 75
}
would fill the state of Missouri with #00ff00 (since it falls in the 60 to 80 range).
It also may contain any combination of the following five properties, including none of them or all of them:
See also
For an example of a continuous value-based data set, check out the unemployment rate map. The page source is located at unemployment.html, and the data set source is located at lib/map_center/modules/static_maps_data/unemployment.js.
This module makes use of two key-value pairs in the fragment identifier via nhmc.ctrl.hashParams: