Examples

AlbersUSA states map

AlbersUSA is the composite projection commonly used to display the contiguous United States together with Alaska and Hawaii in a way that lends itself well for data visualization purposes (e.g. choropleth maps). This map uses a custom TopoJSON map file of US states that you can download below.

US states

Download

The AlbersUSA map example uses only the react-simple-maps/core library. This example just renders the US states and borders, but you could also extend this map with a Graticule and a Sphere. Note that the sphere in the case of the AlbersUSA projection would be a box around the US delimiting the projection extent. Coordinates outside this space are undefined.

"use client"

import { ComposableMap, Geographies, Geography } from "react-simple-maps/core"

const geoUrl = "/maps/states-10m.json"

export default function AlbersUsaStatesMap() {
  return (
    <ComposableMap
      width={800}
      height={450}
      projection="geoAlbersUsa"
      projectionConfig={{ scale: 860 }}
    >
      <Geographies geography={geoUrl}>
        {({ geographies, borders }) => (
          <g>
            {geographies.map((geo) => (
              <Geography key={geo.rsmKey} geography={geo} />
            ))}
            <path
              d={borders?.svgPath || ""}
              fill="none"
              stroke="#FFF"
              strokeWidth={0.5}
            />
          </g>
        )}
      </Geographies>
    </ComposableMap>
  )
}