Geography

Component to render geographic shapes as SVG paths. The Geography component is a simple wrapper around an SVG path element. It is used together with the Geographies wrapper component, which returns an array of geography objects that can be passed to the geography prop of the Geography component.

import { Geography } from "react-simple-maps"

Example

The following is a basic map example, showing how to use the Geography component as a child of Geographies.

Keys

When mapping over items, you have to make sure that each item has a unique key. React-simple-maps simplifies the process of giving your individual elements keys, by returning a unique rsmKey.

<Geographies geography={"..."}>
  {({ geographies }) =>
    geographies.map((geography) => (
      <Geography key={geography.rsmKey} geography={geography} />
    ))
  }
</Geographies>

Styling

You can style individual geographies in three ways. First, you can use individual SVG attributes, such as fill, stroke, and strokeWidth. To find out more about how to style SVG paths with these attributes, check out this handy guide on fill and stroke attributes MDN.

<Geography
  key={geography.rsmKey}
  geography={geography}
  fill="#06F"
  stroke="#FFF"
  strokeWidth={2}
/>

Second, you can use the style prop on the Geography component. It works a little bit differently than the regular style prop, and allows you to specify hover and pressed styles. This is particularly useful when you have a choropleth map, and you are trying to slightly modify the color on hover/press.

<Geography
  key={geography.rsmKey}
  geography={geography}
  style={{
    default: { fill: "#06F" },
    hover: { fill: "#04D" },
    pressed: { fill: "#02A" },
  }}
/>

Third, you can wrap a Geography with styled-components or emotion, and specify your styles as if it were a regular div (except that background would be fill, and border-color would be stroke).

import { styled } from "@emotion/styled"
import { Geography } from "react-simple-maps"

const StyledGeography = styled(Geography)`
  fill: #06f;
`

For more information on styling, check out the styling documentation.

Geography props