NC Map

A component to highlight data for North Carolina counties

Summary

The NC Map component is a responsive, interactive map of North Carolina.  It can display county-related information and link to other web pages. The Map is a powerful, versatile, and flexible tool. Planning is essential to make the best use of it.

The NC Map can be placed on Site Pages, Landing Pages, and Catalogue Items, and as a sidebar within the Tabs/Accordion component on other content types such as the How-To.

Audience

Editors, Publishers, and Web Managers can create a new NC Map. Publishers can edit existing NC Maps. 

Learn more about Platform User Roles and Permissions. 

How To

  • 1

    Insert the NC Map Component

    Identify the page Content Type you are working on and whether the NC Map will be placed into a Band or Tabs/Accordion.

    Placed in Band

    Note: The NC Map is not an option in columns that are too small for the map to be readable (1/3 and 1/4 width).

    Green check marks show that the NC Map can be placed in 1- and 2- column bands one-half width or larger.
    The NC Map may only be placed in a column that is 1/2 width or larger. 

    Placed in Tabs/Accordion

    • On the How-To content type, Add Tabs/Accordion to the desired Step.
    • Within the Tabs/Accordion Item, expand the Advanced Settings menu.
    • Select the desired Sidebar, then select Add NC Map.
      • First Sidebar components appear before any text or content within the Accordion.
      • Second Sidebar components appear after any text or content within the Accordion. 
  • 2

    Default Map Data

    The Map Table automatically loads default values for all 100 counties in North Carolina. Default county values are:

    Customizing Map Data

    You have two options for customizing the default values: 

    Accordion
    Tab/Accordion Items

  • 3

    Customize using the Map Table Online Interface

    The NC Map Table Online Interface displays automatically when the component is added to the page. Selecting the link to NC Map Help opens this tutorial in a new window. Allowed color values are listed for your convenience. This example walks through editing the default values for Alamance County:

    1. Under the title column, the default value example is changed to A county in North Carolina
    2. Under the url column, the default URL for the Google Search Engine is changed to the URL for NC.gov
    3. Under the fill_color column, the default color Blue is changed to Black. 

    After making changes, Save the page. 

    Note: Remember that you must save the page often so you do not lose work. The CSV File Upload option may be best if you are creating a new NC Map or need to make many extensive changes. 

    Accordion
    Tab/Accordion Items

    This is the resulting NC Map after editing the default values for Alamance County per Step 3.

    Second Sidebar
    Close
    Text Version | Export Map Data
  • 4

    Customize using a CSV File Upload

    The NC Map Table Online Interface displays automatically when the component is added to the page. Selecting the link to NC Map Help opens this tutorial in a new window. Allowed color values are listed for your convenience. This example walks through editing the default values for Wayne County. 

    Download the CSV File Template

    1. Select the link to Download CSV Template.
    2. Find the downloaded file named nc_map_template.csv on your computer.
    If you cannot find the template on your computer, check your Downloads folder.

     

    Open and Edit the CSV File

    Columns are narrow by default. You can view the contents of a cell by selecting it and viewing the formula bar.
    1. Open the CSV file with Microsoft Excel or a similar spreadsheet product to edit the values.
    2. Counties are listed alphabetically. Scroll to the bottom of the data to find Wayne County (97 out of 100).
    3. Under the title column, the default value example is changed to A county in the Coastal Plains region
    4. Under the url column, the default URL for the Google Search Engine is changed to the URL for NC.gov
    5. Under the fill_color column, the default color Blue is changed to Red.
    6. Save the file.
    Details for Wayne County have been changed from the default values on the template.

    Upload the Edited CSV File

    1. Return to Digital Commons and scroll to the bottom of the NC Map Table Online Interface.
    2. After the County Data section, select to expand Import from CSV.
    3. Select Choose File.
    4. Locate and select the nc_map_template.csv on your computer.
    5. Select Open.
    6. Select Upload CSV and wait for the upload to complete.
    7. Save the page. 
    Upload CSV File for NC Map
    Accordion
    Tab/Accordion Items

    This is the resulting NC Map after editing the default values for Wayne County per Step 4.

    Second Sidebar
    Close
    Text Version | Export Map Data
  • 5

    Color Options & Accessibility

    Color Options

    You can assign a color to each county. Allowable color values are:

    Key depicting color swatches and names for the NC Map component allowable colors.
    Samples of allowable color values. 
    • Black
    • Blue or Light Blue
    • Green or Light Green
    • Off White
    • Olive or Light Olive
    • Orange or Light Orange
    • Deep Purple or Light Purple
    • Red or Light Red
    • Counties with empty Fill Color values appear gray.

    Color Accessibility

    Note that it is possible to select color combinations that are not accessible to users with various vision impairments. Be sure to follow Digital Accessibility best practices for color contrast and review your map with an accessibility checker. 

    The images below depict a color combination (left) that is inaccessible to a person with color blindness (right.) You can use a browser extension, such as Colorblindly for Chrome, to simulate color blindness. This tool can help you choose a color combination that communicates with the widest possible audience. 

    The color contrast on the map on the left is insufficient for a person with deuteranopia or red-green colorblindness, as shown on the right.
    Left: Colors on an NC Map differentiate the Mountain, Piedmont, and Coastal Plains regions. 
    Right: The same NC Map as viewed by a person with deuteranopia, or red-green colorblindness. The regions are indistinguishable from one another. 

    Digital Accessibility - Color Contrast

    Accordion
    Tab/Accordion Items

  • 6

    Advanced Customization

    This example from the Department of Military and Veterans Affairs website goes above and beyond the basic text editing. 

    It includes an image of the seal for the United States Department of the Air Force and the name Seymour Johnson Air Force Base has bold formatting applied to make it stand out. The necessary HTML for the image was added in the Title cell for Wayne County. You can download the CSV file for this NC Map and study it to understand how it was done.

    NC Map of Military Bases in North Carolina from the Military Veterans website

    County

    Wayne

    Title

    Seymour Johnson Air Force Base

    URL

    https://www.seymourjohnson.af.mil/

    Fill Color

    Blue 

    Accordion
    Tab/Accordion Items

    HTML code
  • 7

    Accessibility

    The NC Map can display visual information as text so that screen readers can make the information accessible to those with vision impairments. 

    • Select Text Version below the Map to view the textual listing.
    • All 100 counties are listed. Counties with URL values are underlined (linked).
    • The Title value appears below the link. Select the underlined link to open the desired URL.
    • Select Interactive Map to return to the Map view.

    Your Responsibility

    If you create a Map where counties are grouped into regions, it is easiest to do this using color. However, any information conveyed with color must also be conveyed with text. For example, if Wake County is a certain color because it is a Piedmont county, specify "Piedmont county" as part of the text. 

    Exporting Map Data

    The Map Data can be exported to a CSV file:

    • To generate a CSV file, click the Export Map Data link below the Text Version button.
  • 8

    Mobile Behavior

    On mobile devices, the NC Map breaks apart by North Carolina's distinct geographical regions:

    • Mountain (western region; deep purple)
    • Piedmont (central region; off white)
    • Coastal Plain (eastern region; light green)

    The user taps the desired region to enlarge it and explore county content. Examples of the user experience for each region are provided below. 

    NC Map with regions separated for mobile view
    Screenshot of the map breaking into regions on a mobile device.
    Accordion
    Tab/Accordion Items

    This image displays the user experience when the Mountain region is selected. The user selects View All to return to the full map. 

    NC Map Mountain region counties shaded deep purple.
    The map accommodates users on mobile devices by honing in on a smaller area of content by region. 

    This image displays the user experience when the Piedmont region is selected. The user selects View All to return to the full map. 

    NC Map counties of the Piedmont region shaded off white.
    The map accommodates users on mobile devices by honing in on a smaller area of content by region. 

    This image displays the user experience when the Coastal Plains region is selected. The user selects View All to return to the full map. 

    NC Map counties of the Coastal Plains region shaded light green.
    The map accommodates users on mobile devices by honing in on a smaller area of content by region. 

    To experience in real-time how the NC Map is separated into regions on smaller viewports, view the example below on a mobile device:

    • Tap the desired region to enlarge it and explore county content.
    • Select View All to return to the full map. 
    Second Sidebar
    Close
    Text Version | Export Map Data