Sphere

Draws the outline of the whole globe and registers a clipPath with the same shape. Meaningful for projections with a visible edge — orthographic, stereographic, azimuthal.

Usage

import {
  ComposableMap,
  Sphere,
  Geographies,
  Geography,
} from "react-simple-maps"
 
const Map = () => (
  <ComposableMap projection="geoOrthographic">
    <Sphere id="globe" stroke="#999" strokeWidth={1} />
    <g clipPath="url(#globe)">
      <Geographies geography={geoUrl}>
        {({ geographies }) =>
          geographies.map((geo) => (
            <Geography key={geo.rsmKey} geography={geo} />
          ))
        }
      </Geographies>
    </g>
  </ComposableMap>
)

The rendered <path> gets the class rsm-sphere and pointer-events: none, so it never intercepts clicks meant for the geographies underneath.

Props

id

The id of the generated clipPath. Defaults to "rsm-sphere". Reference it as clipPath="url(#rsm-sphere)" to clip other layers to the globe. Give each Sphere a unique id if you render more than one map on a page — ids are global to the document.

fill

Fill of the sphere path. Defaults to "transparent". Set it to paint an ocean:

<Sphere fill="#DCEEF9" stroke="none" />

stroke

Stroke colour of the globe outline. Defaults to "currentcolor".

strokeWidth

Width of the outline stroke. Defaults to 0.5.

className

Appended to the built-in rsm-sphere class.

SVG attributes

Any other prop is forwarded to the <path>.