react-world-maps

react-world-maps | Various svg continent maps with React

This package comes with various SVG maps of the main continents, a map of the United States, and a simple component to render your own maps if your provide the data set.

A map of territories:

// Use ComposedMap to render multiple territories
import * as React from 'react'
import { ComposedMap } from 'react-world-maps'

let myCustomData = [
  {
    name: "Territory 1", // should be unique in the set
    d: "M 10 10 L 50 50 L 10 50 Z", // An svg path string representing the map
  },
  {
    name: "Territory 2",
    d: "M 10 10 L 100 10 L 100 50 L 50 50 Z",
  }
]

const MyCustomMapComponent = () => (
  <ComposedMap
    viewBox={[100, 50]}
    data={myCustomData}
    title="My Country"
  />
)

Installation

yarn add react-world-maps

or

npm install react-world-maps --save

Usage

The below example could be a way to add a map to a Geography quiz.

import * as React from "react"
import { AfricaMap } from "react-world-maps"

export const MapQuiz = ({guess, setGuess, answer}) => {
  let config = {
    [guess]: {
      fill: guess === answer ? "#0f0" : "#f00"
    },
    [answer]: guess ? "#0f0" : "#ccc"
  }
  
  const mapHandler = (event) => {
    if (guess) return
    setGuess(event.target.dataset.name)
  }

  return (
    <AfricaMap
      customize={config}
      defaultClickHandler={mapHandler}
      hideTitles
    />
  )
}

API:

import {
  ComposedMap,
  AfricaMap,
  AsiaMap,
  EuropeMap,
  NorthAmericaMap,
  SouthAmericaMap,
  UnitedStatesMap,
} from "react-world-map"

ComposedMap

Use this component to create your own map component

prop	type	description
data	required {name: string, d: string}[]	Array of svg names and paths that will compose the map.
defaultClickHandler	(event: React.MouseEvent<SVGPathElement, MouseEvent>) => any	Default function to attach to each path.
viewBox	[width: number, height: number]	Viewbox settings for svg container
title	string	Title of svg container
customize	{[key: string // should be same as name in data]: {React.SVGAttributes<SVGPathElement>}}	Object of attributes to be passed on to svg path element for keyed territories
hideTitles	boolean	prevent path title from appearing on hover

Territory Map (AfricaMap, AsiaMap, EuropeMap, NorthAmericaMap, SouthAmericaMap, UnitedStatesMap)

These are just wrappers around the ComposedMap, using predefined data sets. They take an optional subset of the props above: hideTitles, customize, defaultClickHandler.

License

MIT

Sources and prior art

The map data are sourced from Natural Earth, and converted to SVG paths with mapshaper. This package is inspired on the react-usa-map package. In fact the USA map data was derived from there.