Geography

Renders one feature as an SVG <path>. Memoised, so it only re-renders when its props change.

Usage

import { Geographies, Geography } from "react-simple-maps"
 
<Geographies geography={geoUrl}>
  {({ geographies }) =>
    geographies.map((geo) => (
      <Geography
        key={geo.rsmKey}
        geography={geo}
        fill="#EAEAEC"
        stroke="#FFF"
        onClick={() => console.log(geo.properties.name)}
      />
    ))
  }
</Geographies>

The rendered <path> gets the class rsm-geography and tabIndex={0}, so geographies are keyboard focusable by default. Pass tabIndex={-1} to opt out.

Props

geography

A geography object from the Geographies render function. Its svgPath becomes the d attribute. Required.

className

Appended to the built-in rsm-geography class.

SVG attributes

Any other prop is forwarded to the <path>: fill, stroke, strokeWidth, onClick, onMouseEnter, style, data-*, and so on.

Styling hover and focus states is usually easiest with CSS on the rsm-geography class:

.rsm-geography {
  fill: #eaeaec;
  outline: none;
}
.rsm-geography:hover {
  fill: #ff5533;
}
.rsm-geography:focus-visible {
  stroke: #ff5533;
  stroke-width: 2;
}

Data-driven fills work the same way — compute them from the feature's properties:

<Geography
  key={geo.rsmKey}
  geography={geo}
  fill={colorScale(dataById[geo.id] ?? 0)}
/>