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.

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.

The render props returned by the Geography component will depend a little bit on the type of map file you pass to the geography prop. If you pass topojson (which is the preferred format to use with react-simple-maps), the render props will inlcude geographies, borders, and outline. If you pass geojson, the Geography component will return only the geographies. This is due to how topojson and geojson treat borders differently. In most situtations, you will only need geographies for your data visualizations, but if you want less duplication and complexity in border rendering, you might want to use the borders prop. It also depends how you want to style your map. Check the styling section of the docs for more information on this.

// Topojson file
<Geographies geography="/topojson-file.json">
  {({ geographies, borders, outline }) => {...}}
</Geographies>

// Geojson file
<Geographies geography="/geojson-file.json">
  {({ geographies }) => {...}}
</Geographies>

Parse geographies

The parseGeographies prop can be used to modify the loaded map data before it is projected and turned into SVG coordinates. Here you can add and modify properties if you need to. You can also perform more intense operations on your geojson if necessary. The return value of parseGeographies is then passed on to be projected and returned inside the render props of the Geographies component.

<Geographies
  geography="/map-file.json"
  parseGeographies={(geos) => {
    return geos.map((g) => {
      // Process geographies here...
      return g
    })
  }}
>
  {({ geographies }) =>
    geographies.map((geo) => {
      return <Geography key={geo.rsmKey} geography={geo} />
    })
  }
</Geographies>

Geographies props