Logo
DocsExamplesGitHubGetting started

Sphere

Component to render the outline for the map graticule. You can also use the sphere component to mask the rest of the map. This is particularly useful for interrupted projections.

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

Example

The following is an example showing the sphere component highlighted in a different color than the graticule.

* The boundaries and the designations used on this map do not imply the expression of any opinion on the part of the react-simple-maps team or z creative labs and are used for illustrative purposes only. The boundaries and shapes are not part of the react-simple-maps library and are sourced from Natural Earth Data and gadm.org.

Masking

Sphere masking can be particularly helpful when using more creative map projections, like the Waterman Butterfly projection. This example shows how to mask geographies and the graticule properly.

* The boundaries and the designations used on this map do not imply the expression of any opinion on the part of the react-simple-maps team or z creative labs and are used for illustrative purposes only. The boundaries and shapes are not part of the react-simple-maps library and are sourced from Natural Earth Data and gadm.org.

Keep in mind that masking using clip-path can have an adverse effect on performance, when combined with ZoomableGroup.

Props

NameTypeDefault
idStringrsm-sphere
fillStringtransparent
strokeStringcurrentcolor
strokeWidthNumber0.5

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