ComposableMap

ComposableMap is a wrapper component for every mapchart created with react-simple-maps. It determines the map context, which is passed to all react-simple-maps components. The context contains information about the projection and path generator, as well as the dimensions of the mapchart.

Usage

ComposableMap is part of the core library, so you can import it either from react-simple-maps, or from react-simple-maps/core. If you are building maps without zooming and panning, you can stick to core to keep the package footprint to a minimum.

import { ComposableMap } from "react-simple-maps"

import { ComposableMap } from "react-simple-maps/core"

By default react-simple-maps renders a map based on a 800x600 SVG coordinate system. You can change these dimensions using the width and height props. Note that if you style ComposableMap with css using width:100% and height:auto, you will get a responsive map that preserves the 800x600 aspect ratio.

import {
  ComposableMap, Geographies, Geography
} from "react-simple-maps/core"
 
const geoUrl = "/my-map-file.json"
 
const UsaMap () => (
  <ComposableMap projection="geoAlbersUsa">
    <Geographies geography={geoUrl}>
      {({ geographies }) => geographies.map(geo => (
        <Geography
          key={geo.rsmKey}
          geography={geo}
          fill="#0066FF"
          fillOpacity={Math.random()}
        />
      ))}
    </Geographies>
  </ComposableMap>
)

Props

width

Width is specified as a number. This value is used internally to define the viewBox attribute of the svg component wrapping the map.

height

Height is specified as a number. This value is used internally to define the viewBox attribute of the svg component wrapping the map.

projection

The default projection for the map will be the Equal Earth projection, but there are a number of other projections that are built into d3-geo and therefore accessible in react-simple-maps.

You can specify projections in a number of different ways. You can use a string to reference on of the built-in d3-geo projections. These include:

• geoEqualEarth — Equal Earth projection
• geoAlbers — Albers projection
• geoAlbersUsa — Albers USA composite projection
• geoAzimuthalEqualArea — Azimuthal Equal Area projection
• geoAzimuthalEquidistant — Azimuthal Equidistant projection
• geoOrthographic — Orthographic projection
• geoConicConformal — Conic Conformal projection
• geoConicEqualArea — Conic Equal Area projection
• geoConicEquidistant — Conic Equidistant projection
• geoStereographic — Stereographic projection
• geoMercator — Mercator projection
• geoTransverseMercator — Transverse Mercator projection

You can also specify a projection using a function. This is useful if you want to use one of the extended proejctions included in the d3-geo-projection package.

import { ComposableMap } from "react-simple-maps/core"
import { geoWinkel3 } from "d3-geo-projection"
 
const width = 800
const height = 600
 
const projection = geoWinkel3()
  .translate([width / 2, height / 2])
  .scale(150)
 
const MapChart = () => {
  return (
    <ComposableMap width={width} height={height} projection={projection}>
      ...
    </ComposableMap>
  )
}

projectionConfig

When using one of the built in d3-geo projections passed as a string, you can configure the projection using the projectionConfig prop. The settings used here will depend on the projection you are using (e.g. parallels will only work with certain projections).

<ComposableMap
  projection="geoEqualEarth"
  projectionConfig={{ rotate: [-20, 0, 0] }}
>
  ...
</ComposableMap>