Logo
DocsExamplesGitHubGetting started

Geographies

Component to fetch geographies and transform them to geojson if necessary. You can pass either a link to a valid topojson or geojson file, or any valid topojson object or geojson array directly to the geography prop. React-simple-maps will do any necessary transformation automatically for you.

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

Example

The following is a basic example of a world map using a topojson file, converted from Natural Earth data shapefiles with mapshaper.org.

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

If you are interested in making your own topojson/geojson files based on shapefiles, check out our handy guide on converting shapefiles to topojson with mapshaper.org.

Render props

The Geographies component returns a geographies array, which you can easily map over to output svg shapes. The svg paths are precomputed by react-simple-maps and available for each geography.

In order to make programmatic changes to the geographic data, use the parseGeographies function.

Props

NameTypeDefault
geographyString | Object | Array
childrenFunction
parseGeographiesFunction

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