Examples

World map

The basic world map example illustrates how to use React Simple Maps to render a world map focused on admin-0 geographies (country-level) using a custom TopoJSON derived from Natural Earth Data, which you can download below. You can use any other TopoJSON of world countries you like. Check out the map files guide for more information on this.

World map (US POV)

Download

The basic world map example uses only the react-simple-maps/core library.

"use client"

import {
  ComposableMap,
  Geographies,
  Geography,
  Graticule,
  Sphere,
} from "react-simple-maps/core"

const geoUrl = "/maps/ne_10m_admin_0_countries_usa--simplified.json"

export default function WorldMap() {
  return (
    <ComposableMap width={800} height={450} projectionConfig={{ scale: 140 }}>
      <Graticule strokeWidth={0.5} />
      <Sphere strokeWidth={0.5} />
      <Geographies geography={geoUrl}>
        {({ geographies, borders }) => (
          <g>
            {geographies.map((geo) => (
              <Geography key={geo.rsmKey} geography={geo} />
            ))}
            <path
              d={borders?.svgPath || ""}
              fill="none"
              stroke="#FFF"
              strokeWidth={0.5}
            />
          </g>
        )}
      </Geographies>
    </ComposableMap>
  )
}