A React component for interactive vector maps of the world

by React

react-vector-maps

React component for interactive vector maps of the world and 100+ countries.

View Demo View Github

Features

  • Simple and easy to implement React component for rendering interactive vector maps.
  • Bring your own vector map, see how to use your own SVG for a map.
  • Quick and easy to style maps however you like.
  • 100+ vector maps included out of the box, free from MapSVG.

Basic Usage

import React from 'react';
import VectorMap from '@south-paw/react-vector-map';
import world from '@south-paw/react-vector-map/maps/json/world.json';

const MyMap = () => (
  <VectorMap {...world} />
);

export default MyMap;

Issues and Bugs

If you manage to find any, please report them here so they can be squashed.

Development and Contributing

Grab the repo and then install dependencies with yarn.

# run linter
yarn lint

# run tests
yarn test

# run storybook for development
yarn storybook

# convert svg files in `maps/svg/**` to json files and generate `src/maps.js`
yarn convert

# build dist version of package
yarn build

# build storybook for docs
yarn storybook:build

GitHub