Composable map

A wrapper component for every mapchart built 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.

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

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.

Projections

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. 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

The above projections can be configured further using the projectionConfig prop. You can specify parameters like rotation, parallels, and scale. Some of the above projections come with predefined values. React-simple-maps inherits these defaults and allows for easy overrides using the projectionConfig prop.

If you are not familiar with map projections and not sure why they exist, you can also read more about projections in the projection docs.

<ComposableMap
  projection="geoAzimuthalEqualArea"
  projectionConfig={{
    rotate: [-10.0, -53.0, 0],
    scale: 1200,
  }}
>
  ...
</ComposableMap>

While both rotate and center will change the center of your map, note that rotate will actually distort the projection to focus around a new center point. This will change not just the position of shapes, but also the way they are rendered. If the above map does not fit the viewport the way you want, it's better to change the center and scale properties than the rotate property in order to make the map fit your needs without affecting the rendering of the shapes themselves.

<ComposableMap
  projection="geoAzimuthalEqualArea"
  projectionConfig={{
    rotate: [-10.0, -53.0, 0],
    center: [0, 3]
    scale: 1200,
  }}
>
  ...
</ComposableMap>

If you want to use the ZoomableGroup component and you want to modify the rotation of the map projection, you need to compensate for this offset with the center prop of the ZoomableGroup component. The above settings would look like this:

<ComposableMap
  projection="geoAzimuthalEqualArea"
  projectionConfig={{
    rotate: [-10.0, -53.0, 0],
    scale: 1200,
  }}
>
  <ZoomableGroup center={[0, 3]}>...</ZoomableGroup>
</ComposableMap>

The main argument for using the center property on the ZoomableGroup component, rather than manipulating center, and especially rotate in the projection config is performance. Modifications of the center property of the ZoomableGroup component will not recalculate the projection, but rather 'move' the map across the screen as a whole. Modifications to the projectionConfig property on the other hand will trigger a recalculation of the projection, and a recalculation of all the SVG coordinates for each path. This should not be necessary for most visualizations and should be avoided.

Composable map props