v3.0.0
gzip size
Github

Documentation

Getting started
Map files
Projections
Styling



Advanced

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"

js

Example

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

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.

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.

Contact us

React Simple Maps was created by z creative labs. We turn ideas into digital products and specialise in dataviz and data-driven design. Are you looking for someone to create custom mapcharts and data visualisations?

Get in touch

React Simple Maps