react-svg-map

A set of ReactJs 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

⚠️ 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.

🌍 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 { PureComponent } 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 PureComponent {
  constructor(props) {
    super(props);
  }

  render() {
    return <SVGMap map={Taiwan} />;
  }
}

ReactDOM.render(<App />, 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'	CSS class of <svg>.
role	String	'none'	ARIA role of <svg>.
type	'checkbox' | 'radio'	'radio'	Defines the select method (single or multiple) of the location(s). Use ref to get the value of the map.
locationClassName	String|Function	'svg-map__location'	CSS class of each <path>. The function parameters are the location object and the location index.
locationTabIndex	String|Function	'0'	Tabindex each <path>. The function parameters are the location object and the location index.
locationRole	String	'none'	ARIA role of each <path>.
locationAriaLabel	Function	location.name	ARIA label of each <path>. The function parameters are the location object and the location index.
onLocationMouseOver	Function		Invoked when the user puts the mouse over a location.
onLocationMouseOut	Function		Invoked when the user puts the mouse out of a location.
onLocationMouseMove	Function		Invoked when the user moves the mouse on a location.
onLocationClick	Function		Invoked when the user clicks on a location.
onLocationKeyDown	Function		Invoked when the user hits a keyboard key on a location.
onLocationFocus	Function		Invoked when the user focuses a location.
onLocationBlur	Function		Invoked when the user unfocuses a location.
isLocationSelected	Function		Executed to determine if a location is selected. This property is used to set the aria-checked HTML attribute.
childrenBefore	Node		"Slot" before all the locations (<path>).
childrenAfter	Node		"Slot" after all the locations (<path>).

☑️ Checkbox SVG Map

This is an implementation of SVGMap that behaves like a group of checkboxes.
It is based on this WAI-ARIA example to support keyboard navigation and be accessible.

• 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 { PureComponent } 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 PureComponent {
  constructor(props) {
    super(props);
  }

  render() {
    return <CheckboxSVGMap map={Taiwan} />;
  }
}

ReactDOM.render(<App />, 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'	CSS class of <svg>.
locationClassName	String|Function	'svg-map__location'	CSS class of each <path>. The function parameters are the location object and the location index.
locationAriaLabel	Function	location.name	ARIA label of each <path>. The function parameters are the location object and the location index.
defaultValue	Location[]	[]	List of Location objects ({ id: String, name: String }) of the initial selected locations. It is used only when the component is mounted and is not synchronized when updated.
onChange	Function		Invoked when the user selects/deselects a location. The attributes object of the toggled location is passed as parameter.
value	Location[]		List of Location objects ({ id: String, name: String }). Used as a pair with onChange for controlled map.
onLocationMouseOver	Function		Invoked when the user puts the mouse over a location.
onLocationMouseOut	Function		Invoked when the user puts the mouse out of a location.
onLocationMouseMove	Function		Invoked when the user moves the mouse on a location.
onLocationFocus	Function		Invoked when the user focuses a location.
onLocationBlur	Function		Invoked when the user unfocuses a location.
childrenBefore	Node		"Slot" before all the locations (<path>).
childrenAfter	Node		"Slot" after all the locations (<path>).

🔘 Radio SVG Map

This is an implementation of SVGMap that behaves like a group of radio buttons.
It is based on this WAI-ARIA example to support keyboard navigation and be accessible.

• 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 { PureComponent } 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 PureComponent {
  constructor(props) {
    super(props);
  }

  render() {
    return <RadioSVGMap map={Taiwan} />;
  }
}

ReactDOM.render(<App />, 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'	CSS class of <svg>.
locationClassName	String|Function	'svg-map__location'	CSS class of each <path>. The function parameters are the location object and the location index.
locationAriaLabel	Function	location.name	ARIA label of each <path>. The function parameters are the location object and the location index.
defaultValue	Location	null	Location object ({ id: String, name: String }) of the initial selected location. It is used for the uncontrolled component map.
onChange	Function		Invoked when the user selects a location. The attributes object of the selected location is passed as a parameter.
value	Location		Location object ({ id: String, name: String }). Used as a pair with onChange for controlled map.
onLocationMouseOver	Function		Invoked when the user puts the mouse over a location.
onLocationMouseOut	Function		Invoked when the user puts the mouse out of a location.
onLocationMouseMove	Function		Invoked when the user moves the mouse on a location.
onLocationFocus	Function		Invoked when the user focuses a location.
onLocationBlur	Function		Invoked when the user unfocuses a location.
childrenBefore	Node		"Slot" before all the locations (<path>).
childrenAfter	Node		"Slot" after all the locations (<path>).

Maps

Existing maps

Since v2.0.0 this package does not provide maps anymore. All the existing maps have been moved to the independent 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 <SVGMap /> component

import { PureComponent } from 'react';
import Taiwan from '@svg-maps/taiwan';
import { SVGMap } from 'react-svg-map';

class App extends PureComponent {
  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 <SVGMap map={this.customTaiwan} />;
  }
}

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!