Navigation-Only Map
Best Practices
Overview
U.S. and world navigation-only maps provide a visually engaging way for site visitors to navigate to content associated with specific states or countries. Navigation maps can be used only for navigation; they cannot be used to display numeric or categorical data. (To present data in a color-coded map, see Data Maps.)
Each navigation-only map is driven by a JSON or CSV file that contains the geographic locations and their navigation URLs. See the WCMS instructions for more information on this data file.
- Go to ExamplesSee examples on this page that illustrate key options.
- Building in the WCMSSee key tips and guidelines for working with navigation-only maps in the WCMS.
- TP4 UX Best Practices [PPT - 14 MB]For general guidance on colors, layouts, and overall presentation, see this overview of TP4 best practices.
Usage
- Use a navigation-only map to allow users to navigate to CDC.gov pages by location (for example, state profile pages).
- Avoid linking to non-CDC sites and non-HTML files.
- When you have a moderate number of location-specific pages — 15 or fewer — a list module or a simple bulleted list will be easier to manage and will likely provide a better experience for your visitors.
- To display numeric or categorical data, use a data map instead. The data map supports navigation links, just like the navigation-only map, but also displays color-coded state- or country-based data.
Options
For both U.S. and world maps, you can control the title background, map color, map background (white or gray), and borders within the map (dark gray or same as background).
For desktop viewports, you can set the user interaction as follows:
- Hover — Tooltip: An on-hover action on a location displays a tooltip with the location name. Clicking takes the user directly to the associated URL.
- Click — Popover Modal: Clicking displays a modal with a “learn more” link for navigating to the associated URL.
The U.S. map at the top of the page demonstrates the click interaction. Note that every map provides a drop-down menu as an alternative navigation control. To view an example world navigation map and a U.S. map with the hover setting (as well as different colors), see the examples below.
World Navigation Map
Site visitors can reposition a world map in their viewer by dragging it, and they can zoom in and out. For both U.S. and world maps, states/countries without navigation URLs are gray. The tooltip/modal option for the world map below is set to “hover — tooltip.” This means that in desktop view, a user can simply click a country to navigate to its URL. (In the example map at the top of the page, set to “click — popover modal,” a user must click a link in the modal.) Note that the URL always opens in a new tab.
U.S. Navigation Map
The map below is essentially the same U.S. map as the one at the top of the page, but the “hover — tooltip” option is used and the colors are different.