react-svg-map

A set of React.js components to display an interactive SVG map.

Demo

Take a look at the live demo!

Installation

npm

npm install --save react-svg-map

yarn

yarn add react-svg-map

Usage

:warning: Breaking change from v1

This package does not include maps anymore!

You have to install the map you need from svg-maps or you can use your own map. See maps section for more details.

If you are still using the 1.x.x version, look at the v1 documentation.

:earth_africa: Simple SVG Map

This is the base component to display an SVG map.

• Import

  SVGMap

  component from

  react-svg-map

• Import the map you want
• Optionally, import

  react-svg-map/lib/index.css

  if you want to apply the default styles

import React from "react";
import ReactDOM from "react-dom";
import Taiwan from "@svg-maps/taiwan";
import { SVGMap } from "react-svg-map";
import "react-svg-map/lib/index.css";

class App extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return ;
  }
}
ReactDOM.render(, document.getElementById("app"));

API

| Prop | Type | Default | Description | | ------------------- | ---------------- | --------------------- | ---------------------------------------------------------------------------------------------------------------- | | map | Object | required | Describe SVG map to display. See maps section for more details. | | className | String |

'svg-map'

'none'

'svg-map__location'

'0'

'none'

location.name

aria-checked

:ballotboxwith_check: Checkbox SVG Map

This is an implementation of

SVGMap

• Import

  CheckboxSVGMap

  component from

  react-svg-map

• Import the map you want
• Optionally, import

  react-svg-map/lib/index.css

  if you want to apply the default styles

import React from "react";
import ReactDOM from "react-dom";
import Taiwan from "@svg-maps/taiwan";
import { CheckboxSVGMap } from "react-svg-map";
import "react-svg-map/lib/index.css";

class App extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return ;
  }
}
ReactDOM.render(, document.getElementById("app"));

API

| Prop | Type | Default | Description | | ------------------- | ---------------- | --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- | | map | Object | required | Describe SVG map to display. See maps section for more details. | | className | String |

'svg-map'

'svg-map__location'

location.name

id

:radio_button: Radio SVG Map

This is an implementation of

SVGMap

• Import

  RadioSVGMap

  component from

  react-svg-map

• Import the map you want
• Optionally, import

  react-svg-map/lib/index.css

  if you want to apply the default styles

import React from "react";
import ReactDOM from "react-dom";
import Taiwan from "@svg-maps/taiwan";
import { RadioSVGMap } from "react-svg-map";
import "react-svg-map/lib/index.css";

class App extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return ;
  }
}
ReactDOM.render(, document.getElementById("app"));

API

| Prop | Type | Default | Description | | ------------------- | ---------------- | --------------------- | ------------------------------------------------------------------------------------------------------------------------------ | | map | Object | required | Describe SVG map to display. See maps section for more details. | | className | String |

'svg-map'

'svg-map__location'

location.name

id

Maps

Existing maps

Since v2.0.0 this package does not provide maps anymore. All the existing maps have been moved to the independant svg-maps project because they may be useful for other components/projects.

Custom maps

You can modify existing maps or create your own.

Modify a map

1. Import the map to modify
2. Create a new object from this map
3. Pass this new object as

   map

   prop of
   component

import React from "react";
import Taiwan from "@svg-maps/taiwan";
import { SVGMap } from "react-svg-map";

class App extends React.Component {
  constructor(props) {
    super(props);
// Create new map object
this.customTaiwan = {
  ...Taiwan,
  label: "Custom map label",
  locations: Taiwan.locations.map(location => {
    // Modify each location
  })
};
  }
  render() {
    return ;
  }
}

It is recommended to not modify the SVG properties (viewBox, path), because it may break the map's display.

Create a map

If you create a new map (other country, city...), feel free to contribute to svg-maps project!