Examples

EU members map

The EU members map shows how to use React Simple Maps to conditionally apply custom styles to geographies based on an array of strings. The setup uses the most basic approach to check for the presence of a value in an array in order to apply a color to a geography. This approach can be easily extended to more complex arrays and values.

Europe

Download

The EU members map uses only the react-simple-maps/core library.

"use client"

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

const geoUrl = "/maps/europe-4.json"

const euMembers = [
  "AUT",
  "BEL",
  "BGR",
  "HRV",
  "CYP",
  "CZE",
  "DNK",
  "EST",
  "FIN",
  "FRA",
  "DEU",
  "GRC",
  "HUN",
  "IRL",
  "ITA",
  "LVA",
  "LTU",
  "LUX",
  "MLT",
  "NLD",
  "POL",
  "PRT",
  "ROU",
  "SVK",
  "SVN",
  "ESP",
  "SWE",
]

export default function EuMembersMap() {
  return (
    <ComposableMap
      width={800}
      height={600}
      projection="geoAzimuthalEqualArea"
      projectionConfig={{
        rotate: [-10.0, -55.0, 0],
        center: [-5, -3],
        scale: 800,
      }}
    >
      <Geographies geography={geoUrl}>
        {({ geographies, borders }) => (
          <g>
            {geographies.map((geo) => {
              const isEuMember = euMembers.includes(geo.properties?.iso3)
              return (
                <Geography
                  key={geo.rsmKey}
                  geography={geo}
                  fill={isEuMember ? "#0066FF" : "#EEEEEE"}
                />
              )
            })}
            <path
              d={borders?.svgPath || ""}
              fill="none"
              stroke="#FFF"
              strokeWidth={0.5}
            />
          </g>
        )}
      </Geographies>
    </ComposableMap>
  )
}