ComposableMap

The root component. It renders an <svg> element and creates the projection that every other component in the tree uses.

Usage

import { ComposableMap } from "react-simple-maps"
 
const Map = () => (
  <ComposableMap
    width={800}
    height={600}
    projection="geoMercator"
    projectionConfig={{ scale: 120, center: [10, 45] }}
  >
    {/* Geographies, Markers, Lines, Annotations… */}
  </ComposableMap>
)

The rendered <svg> gets the class rsm-svg.

Props

width

Width of the map in SVG user units. Also used as the viewBox width and to translate the projection to the centre of the canvas. Defaults to 800.

height

Height of the map in SVG user units. Defaults to 600.

projection

Either the name of a d3-geo projection or a preconfigured projection function. Defaults to "geoEqualEarth".

Supported names: geoAzimuthalEqualArea, geoAzimuthalEquidistant, geoConicConformal, geoConicEqualArea, geoConicEquidistant, geoEqualEarth, geoEquirectangular, geoGnomonic, geoMercator, geoOrthographic, geoStereographic, geoTransverseMercator.

Pass a function when you need a projection that is not in that list, or one configured in a way projectionConfig does not cover. When you pass a function, projectionConfig is ignored and you are responsible for the translate:

import { geoAlbersUsa } from "d3-geo"
 
const projection = geoAlbersUsa().translate([400, 300]).scale(1000)
 
<ComposableMap projection={projection} />

projectionConfig

Configuration applied to the named projection. Ignored when projection is a function.

<ComposableMap
  projection="geoConicConformal"
  projectionConfig={{
    center: [10, 50],
    rotate: [-10, 0, 0],
    parallels: [35, 65],
    scale: 800,
  }}
/>

• center — [longitude, latitude] the projection is centred on.
• rotate — [lambda, phi] or [lambda, phi, gamma] rotation in degrees.
• parallels — [phi0, phi1] for conic projections. Silently ignored by projections that have no parallels.
• scale — projection scale factor.

className

Appended to the built-in rsm-svg class.

children

The map contents. Anything rendered here can read the projection through context.

SVG attributes

Any other prop is forwarded to the <svg> element — style, role, aria-label, onClick, data-*, and so on.