# ComposableMap

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 react-simple-maps. These contain:

- Equal Earth projection
- Albers projection
- Albers USA composite projection
- Azimuthal Equal Area projection
- Azimuthal Equidistant projection
- Orthographic projection
- Conic Conformal projection
- Conic Equal Area projection
- Conic Equidistant projection
- Stereographic projection
- Mercator projection
- Transverse Mercator projection

The above projections can be configured further using the `projectionConfig`

prop. You can specify parameters like `rotation`

, `parallels`

, `scale`

. Some of the above projections come with predefined values for rotations, parallels, and scale. React-simple-maps inherits these defaults and allows for easy overrides using the `projectionConfig`

prop.

Keep in mind that 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 in the center prop of the ZoomableGroup component.

## Props

Name | Type | Default |
---|---|---|

width | Number | `800` |

height | Number | `600` |

projection | String | Function | `geoEqualEarth` |

projectionConfig | Object | `{}` |