@cdc/map

React component for visualizing tabular data on a map of the United States or the world. Includes support for filtering, toggling, numeric and categorical mapping as well as many other configuration options like color schemes. This package is part of the larger CDC Open Visualization project.

Examples

• Numeric Maps
• World Map
• Categorical Map
• Filterable Map

Installation and Usage

1. Install the package in your React project npm install @cdc/map
2. Import the component and begin using in your code.

import CdcMap from '@cdc/map'

function App() {

  return (
    <div className="App">
      <CdcMap />
    </div>
  );
}

export default App;

Note: If no properties are passed, the map will load a default configuration file.

Properties

Property	Type	Description
navigationHandler	Function	A custom function that will receive the URL of the item that was clicked by the user. This will override the built in navigationHandler. It's helpful if you need to implement a custom metrics call or some other kind of intermediate behavior before you direct the user to the URL.
configUrl	String	Pass a URL to a .json file and it will be consumed and used as the configuration.
config	Object	You can pass the raw configuration object directly as a prop. For help generating such an object, use the built in editor.
isEditor	Boolean	A simple flag that will load the editor for the maps inside your app. Helpful to provide a user interface instead of having to edit raw JSON.
className	String	Lets you add a custom class name to the outermost container element of the map.