Getting started

In order to get started with react-simple-maps, you will need two things.

1. A working react app (e.g. create-react-app, or next.js)
2. A topojson or geojson map file

If you are new to SVG mapping libraries or not familiar with file formats in cartography, you can find out more about geojson on geojson.org or on wikipedia. For topojson you can start by looking at the topojson github repo or check out the visual explainer on how to infer topology. If you are comfortable with with shapefiles, you can find out how to prepare your shapefiles for SVG mapping using mapshaper.org.

Install

Start by installing react-simple-maps and its dependencies:

npm install --save react-simple-maps

...or if you are using yarn:

yarn add --save react-simple-maps

Basic example

In order to render your first SVG map chart you will need only the ComposableMap, Geographies, and Geography components. The ComposableMap component will render an <svg /> wrapper element, and each geography will be rendered out as a <path /> element.

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

const geoUrl =
  "https://raw.githubusercontent.com/deldersveld/topojson/master/world-countries.json"

export default function MapChart() {
  return (
    <ComposableMap>
      <Geographies geography={geoUrl}>
        {({ geographies }) =>
          geographies.map((geo) => (
            <Geography key={geo.rsmKey} geography={geo} />
          ))
        }
      </Geographies>
    </ComposableMap>
  )
}

For this basic map example we are using a world topojson file from deldersveld/topojson. There are other good sources for topojson/geojson map files where you can get more specific shapes for continents and countries.

You should now have a functioning SVG map that you can use for geographic data visualization. Check out the examples to learn how to use react-simple-maps to create more advanced and interactive map charts (e.g. thematic symbol maps or choropleth maps).

If you are interested in how to create custom topojson files based on shapefile data, check out this guide on how to convert shapefiles to topojson/geojson with mapshaper.org.