MapProvider

Creates the projection context without rendering an <svg>. ComposableMap uses it internally; reach for it directly when you need to own the SVG element yourself — for example to render the map into an existing <svg>, or to share one projection across sibling SVG elements.

Usage

import { MapProvider, Geographies, Geography } from "react-simple-maps"
 
const Map = () => (
  <MapProvider width={800} height={600} projection="geoMercator">
    <svg width={800} height={600} viewBox="0 0 800 600">
      <Geographies geography={geoUrl}>
        {({ geographies }) =>
          geographies.map((geo) => (
            <Geography key={geo.rsmKey} geography={geo} />
          ))
        }
      </Geographies>
    </svg>
  </MapProvider>
)

Props

width

Width in SVG user units, used to translate the projection to the centre of the canvas. Defaults to 800. Keep it in sync with your <svg>, or the projection will be centred somewhere other than the middle of the visible area.

height

Height in SVG user units. Defaults to 600.

projection

Projection name or a preconfigured projection function. Defaults to "geoEqualEarth". Same values as ComposableMap's projection.

projectionConfig

center, rotate, parallels and scale for the named projection. Ignored when projection is a function. See ComposableMap's projectionConfig.

children

The subtree that can read the projection context.