# @cdc/map
> React component for visualizing tabular data on a map of the United States or the world.
Latest version **4.26.7** (published 2026-07-28) · Apache-2.0 license · 254 weekly downloads
## Install
```sh
npm install @cdc/map
pnpm add @cdc/map
yarn add @cdc/map
bun add @cdc/map
```
## Health
**Score 60/100 (C)** — status: active.
Positive: esm support; no vulnerabilities; recently updated; high maintenance score.
Warnings: low downloads; no types; large bundle.
## Facts
| | |
|---|---|
| Version | 4.26.7 |
| Published | 2026-07-28 |
| First published | 2020-10-27 |
| Weekly downloads | 254 |
| License | Apache-2.0 |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 33 |
| Unpacked size | 78.8 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 55 |
| Maintainers | cooms13, adoe, mpallansch |
## Links
- npm: https://www.npmjs.com/package/@cdc/map
- Repository: https://github.com/CDCgov/cdc-open-viz
- Homepage: https://github.com/CDCgov/cdc-open-viz#readme
- Issues: https://github.com/CDCgov/cdc-open-viz/issues
- npm.io page: https://npm.io/package/@cdc/map
## Dependencies (33)
- [d3](https://npm.io/package/d3.md) ^7.9.0
- [sass](https://npm.io/package/sass.md) ^1.89.2
- [vite](https://npm.io/package/vite.md) ^7.3.1
- [d3-geo](https://npm.io/package/d3-geo.md) ^3.1.1
- [lodash](https://npm.io/package/lodash.md) ^4.17.23
- [d3-zoom](https://npm.io/package/d3-zoom.md) ^3.0.0
- [d3-scale](https://npm.io/package/d3-scale.md) ^4.0.2
- [@cdc/core](https://npm.io/package/@cdc/core.md) ^4.26.7
- [@visx/geo](https://npm.io/package/@visx/geo.md) ^3.12.0
- [chroma-js](https://npm.io/package/chroma-js.md) ^3.1.2
- [dompurify](https://npm.io/package/dompurify.md) ^3.4.0
- [papaparse](https://npm.io/package/papaparse.md) ^5.5.2
- [@visx/drag](https://npm.io/package/@visx/drag.md) ^3.12.0
- [@visx/glyph](https://npm.io/package/@visx/glyph.md) ^3.12.0
- [react-icons](https://npm.io/package/react-icons.md) ^5.5.0
- [@visx/marker](https://npm.io/package/@visx/marker.md) ^3.12.0
- [d3-selection](https://npm.io/package/d3-selection.md) ^3.0.0
- [use-debounce](https://npm.io/package/use-debounce.md) ^10.1.0
- [whatwg-fetch](https://npm.io/package/whatwg-fetch.md) ^3.6.20
- [@visx/pattern](https://npm.io/package/@visx/pattern.md) ^3.12.0
- [react-tooltip](https://npm.io/package/react-tooltip.md) 5.8.2-beta.3
- [lodash.debounce](https://npm.io/package/lodash.debounce.md) ^4.0.8
- [topojson-client](https://npm.io/package/topojson-client.md) ^3.1.0
- [@visx/annotation](https://npm.io/package/@visx/annotation.md) ^3.12.0
- [vite-plugin-svgr](https://npm.io/package/vite-plugin-svgr.md) ^4.2.0
- [@hello-pangea/dnd](https://npm.io/package/@hello-pangea/dnd.md) ^16.2.0
- [html-react-parser](https://npm.io/package/html-react-parser.md) ^5.2.3
- [@rollup/plugin-dsv](https://npm.io/package/@rollup/plugin-dsv.md) ^3.0.2
- [@vitejs/plugin-react](https://npm.io/package/@vitejs/plugin-react.md) ^5.1.2
- [d3-composite-projections](https://npm.io/package/d3-composite-projections.md) ^1.4.0
- [resize-observer-polyfill](https://npm.io/package/resize-observer-polyfill.md) ^1.5.1
- [react-accessible-accordion](https://npm.io/package/react-accessible-accordion.md) ^5.0.1
- [vite-plugin-css-injected-by-js](https://npm.io/package/vite-plugin-css-injected-by-js.md) ^2.4.0
## Recent versions
- 4.26.7 (latest) — 2026-07-28
- 4.26.6 — 2026-06-30
- 4.26.5 — 2026-06-04
- 4.26.4 — 2026-04-28
- 4.26.3 — 2026-04-06
- 4.26.2 — 2026-03-02
- 4.26.1 — 2026-01-28
- 4.25.11 — 2025-12-02
- 4.25.10 — 2025-10-28
- 4.25.8 — 2025-08-27
- 4.25.7-2 — 2025-07-30
- 4.25.7 — 2025-07-29
- 4.25.6-1 — 2025-07-09
- 4.25.6 — 2025-07-01
- 4.25.5-1 — 2025-06-05
- … 46 more at https://npm.io/package/@cdc/map/versions
## README
# @cdc/map
[](https://www.npmjs.com/package/@cdc/map)
`` is a React component for visualizing tabular data on a map of the United States or the world.
## Installation
```bash
npm install @cdc/map
```
## Quick Start
Pass a `config` object directly to the component:
```jsx
import CdcMap from '@cdc/map'
const config = {
version: '4.26.4',
general: {
title: 'Minimal US Map',
geoType: 'us',
type: 'data',
showTitle: true,
palette: {
name: 'sequential_blue',
version: '2.0',
isReversed: false
}
},
type: 'map',
columns: {
geo: { name: 'FIPS Codes', label: 'Location', tooltip: false, dataTable: true },
primary: { name: 'Rate', label: 'Rate', prefix: '', suffix: '%', tooltip: true, dataTable: true },
navigate: { name: '' },
latitude: { name: '' },
longitude: { name: '' }
},
legend: {
type: 'equalnumber',
numberOfItems: 3,
position: 'side',
style: 'circles',
title: 'Legend',
description: '',
descriptions: {},
specialClasses: [],
unified: false,
singleColumn: false,
singleRow: false,
verticalSorted: false,
showSpecialClassesLast: false,
dynamicDescription: false,
hideBorder: false
},
filters: [],
filterBehavior: 'Filter Change',
data: [
{ 'FIPS Codes': '01', Rate: 10 },
{ 'FIPS Codes': '02', Rate: 20 },
{ 'FIPS Codes': '04', Rate: 30 }
]
}
function App() {
return (
)
}
export default App
```
You can also load configuration from a URL with ``.
## Configuration
The primary reference for authoring configs is [CONFIG.md](./CONFIG.md).
If you are reading this in a context where relative Markdown links do not open correctly, use the [GitHub copy of the map config reference](https://github.com/CDCgov/cdc-open-viz/blob/main/packages/map/CONFIG.md).
## Properties
| Property | Type | Description |
| --- | --- | --- |
| `config` | `object` | Configuration object for the map. This is the primary integration path for React consumers. |
| `configUrl` | `string` | Optional URL to a JSON config file. Use this when you want the component to fetch its config at runtime. |
---
_Source: https://npm.io/package/@cdc/map · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._