Geographies

Loads map data, converts it to features with precomputed SVG paths, and hands them to a render function. This is where TopoJSON or GeoJSON enters the map.

Usage

import { ComposableMap, Geographies, Geography } from "react-simple-maps"
 
const geoUrl = "/sample-topojson.json"
 
const Map = () => (
  <ComposableMap>
    <Geographies geography={geoUrl}>
      {({ geographies }) =>
        geographies.map((geo) => <Geography key={geo.rsmKey} geography={geo} />)
      }
    </Geographies>
  </ComposableMap>
)

The rendered <g> gets the class rsm-geographies.

Props

geography

The map data. One of:

• a URL string, fetched on mount with fetch
• a TopoJSON Topology object
• a GeoJSON FeatureCollection
• an array of GeoJSON features

For TopoJSON, the first object in objects is used.

<Geographies geography="https://example.com/world.json" />
<Geographies geography={topology} />
<Geographies geography={[featureA, featureB]} />

Passing a fresh array or object literal on every render is safe — the data is compared by content, not by reference.

children

A render function. It is called only once there is at least one geography, and receives:

• geographies — array of features, each extended with rsmKey (a stable key for React) and svgPath (the projected path string).
• outline — a mesh of the outer boundary, or undefined. TopoJSON input only.
• borders — a mesh of the shared internal borders, or undefined. TopoJSON input only.
• path — the geoPath generator, for projecting arbitrary geometry yourself.
• projection — the projection function, for turning coordinates into pixels.

Drawing borders once instead of per country avoids doubled stroke widths on shared edges:

<Geographies geography={geoUrl}>
  {({ geographies, outline, borders }) => (
    <>
      {geographies.map((geo) => (
        <Geography key={geo.rsmKey} geography={geo} fill="#DDD" stroke="none" />
      ))}
      <path d={outline.svgPath} fill="none" stroke="#333" />
      <path d={borders.svgPath} fill="none" stroke="#FFF" />
    </>
  )}
</Geographies>

parseGeographies

A function that receives the raw feature array and returns the array to render. Use it to filter or sort features, or to merge in your own data. It runs before the SVG paths are computed.

<Geographies
  geography={geoUrl}
  parseGeographies={(features) =>
    features.filter((f) => f.properties.continent === "Europe")
  }
/>

Define it outside the component or wrap it in useCallback — a new function identity re-runs the data preparation.

className

Appended to the built-in rsm-geographies class on the wrapping <g>.

SVG attributes

Any other prop is forwarded to the wrapping <g>.