v3.0.0
gzip size
Github

Documentation

Getting started
Map files
Projections
Styling



Advanced

MapProvider

The MapProvider can be accessed directly to make fully custom maps. For most maps you will not have to deal with the MapProvider directly, but if you want full control over every part of the rendering process of your map, you can use the MapProvider and implement all the components for your map yourself, while the provider handles the projection logic for you.

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

export default FullyCustomMap() {
  return (
    <MapProvider
      width={800}
      height={400}
      projection="geoAzimuthalEqualArea"
      projectionConfig={{
        rotate: [-10.0, -53.0, 0],
        scale: 1200,
      }}
    >
      <svg viewBox="0 0 800 400">
        ...
      </svg>
    </MapProvider>
  )
}

jsx

MapProvider props

NameTypeDefault
widthNumber800
heightNumber400
projectionString | FunctiongeoEqualEarth
projectionConfigObject{}

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