Logo
DocsExamplesGitHubGetting started

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.

* The boundaries and the designations used on this map do not imply the expression of any opinion on the part of the react-simple-maps team or z creative labs and are used for illustrative purposes only. The boundaries and shapes are not part of the react-simple-maps library and are sourced from Natural Earth Data and gadm.org.

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.

Note that SVG attributes, much like html attributes have to use camel case instead of hyphenation in JSX.

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.

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).

Props

The Geography component automatically passes rest props to the wrapped SVG path element. All valid SVG attributes can therefore be passed as props to the Geography component.

NameTypeDefault
geographyObject
styleObject{}

Newsletter

Sign up to the React Simple Maps newsletter and be the first one to know when we publish new stuff.

Hire Us!

Are you looking for someone to create beautiful mapcharts?

Contact us

React Simple Maps

Home
Documentation
Examples
GitHub

More Tools

Check out these other design and development tools by z creative labs.

Blobmaker
Get Waves

© 2019 z creative labs