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>
  )
}

MapProvider props