Navigation-Only Map

Preparing the Data File

The content owner or web developer should prepare a CSV or JSON data file with the states / countries and the URLs for navigation.  Templates for CSV format are available:

• U.S. map template (states and territories) [XLS – 697 B]
• World map template (countries) [XLS – 7 KB]

Important notes:

• The template CSV files are editable in Excel. After entering URLs for the geographic areas, remember to resave the file in CSV format.
• For U.S. maps, state names or two-character postal codes are acceptable, but names are preferred.
• Do not change the spellings of countries or states.  (In Excel you may notice that countries with special characters do not display correctly. Do not try to fix this problem.  The country names should import correctly into the WCMS.)
• You can leave URL cells blank. The associated locations display as gray areas in the visitor’s map view.

Creating a Navigation Map

1. From the WCMS content browser, select “New Content” and then select “Visualization” (under “Media and Visualizations”) as the content type.
2. Provide a title and JSON file name.
3. Click “Open Visualization Editor.”
4. In the Choose Visualization Type panel, select your map type (typically this is U.S. State or World).
5. In the Import Data panel, select a local file or enter a URL.  (To have the map data always load from the URL, check “Always Load from URL.”)  Once the import has completed successfully, you can preview the data in the table on the right.
6. Open the Configure panel.
7. In the General panel, verify the Geography and then select Navigation as the Map Type.  Also edit the Map Title and Subtext (text below the data table) as appropriate.  (Note that a title is required for accessibility.  You can hide the title in the Visual panel.)
8. In the Columns panel, select the Geography and URL columns from the source data file.
9. Complete the options in the Visual panel as appropriate.
10. In the Tooltips / Modals panel, select “hover” or “click.”  (This affects the larger desktop viewports only.  On mobile devices, the user must tap a location to interact with the map.)
11. Click OK to close the Visualization Editor.
12. Save the map (make certain it has a JSON extension).

Inserting the Map

You can insert the map into Visual Composer or any WYSIWYG field.  Use the “Add Element” tool and, when prompted, select “Visualization” as the content element type. (This selection works for both data maps and navigation-only maps.)