useMapContext

Returns the current map context: { width, height, projection, path }. Throws if called outside a MapProvider or ComposableMap. Use it to build your own map-aware components.

Usage

You can use the map context to create custom components, like a dot component (similar to marker).

import { useMapContext } from "react-simple-maps"
 
const Dot = ({ coordinates }) => {
  const { projection } = useMapContext()
  const projected = projection(coordinates)
  if (!projected) return null
  const [x, y] = projected
  return <circle cx={x} cy={y} r={3} />
}

You also have access to the path function, so you can create arbitrary paths like this:

const { path } = useMapContext()
 
// pass valid GeoJSON to `path` to get a projected svgPath string
<path d={path({ type: "Polygon", coordinates: [...] })} />

Returns

• width — map width in SVG user units
• height — map height in SVG user units
• projection — maps [lon, lat] to [x, y], or null when the point is not visible. projection.invert goes back the other way.
• path — a geoPath generator that turns any GeoJSON geometry into a path string