Logo
DocsExamplesGitHubGetting started

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:

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

NameTypeDefault
widthNumber800
heightNumber600
projectionString | FunctiongeoEqualEarth
projectionConfigObject{}

Newsletter

Sign up to the React Simple Maps newsletter and be the first one to know when we publish new stuff.

Hire Us!

Are you looking for someone to create beautiful mapcharts?

Contact us

React Simple Maps

Home
Documentation
Examples
GitHub

More Tools

Check out these other design and development tools by z creative labs.

Blobmaker
Get Waves

© 2019 z creative labs