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 <SVGMap map={Taiwan} />;
  }
}

ReactDOM.render(<App />, document.getElementById("app"));

API

:ballot_box_with_check: 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 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 <CheckboxSVGMap map={Taiwan} />;
  }
}

ReactDOM.render(<App />, document.getElementById("app"));

API

:radio_button: 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 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 <RadioSVGMap map={Taiwan} />;
  }
}

ReactDOM.render(<App />, document.getElementById("app"));

API

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 <SVGMap /> 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 <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!

Changelog

All notable changes to this project will be documented in this file.

The format is based on Keep a Changelog and this project adheres to Semantic Versioning.

[2.1.2]

Fixed

• Add missing CSS file in production

[2.1.1]

Fixed

• Handle invalid ids in selectedLocationIds

[2.1.0]

Added

• Add selectedLocationId and selectedLocationIds props to handle initial selected locations
• Add childrenBefore and childrenAfter props to handle "slots"

[2.0.2]

Added

• Add files property in package.json to reduce size of package

• Changed

• Update dependencies to fix security issues

[2.0.1]

Fixed

• Fix tabindex of CheckboxSVGMap

[2.0.0]

Removed

• Externalize maps (svg-maps)
• Remove deprecated tabIndex and type properties

Changed

• Update documentation
• Update tests using fake maps

[1.3.1]

Changed

• Use GitHub pages to host demo

[1.3.0]

Added

• Allow function locationClassName prop of SVGMap, CheckboxSVGMap and RadioSVGMap components

Changed

• Update examples
• Externalize Jest config
• Update Jest config

[1.2.0]

Added

• Create CheckboxSVGMap and RadioSVGMap components
• Add unit tests

Changed

• Update examples
• Deprecate tabIndex and type properties
• Improve snapshot tests
• Update dev dependencies

[1.1.0]

Added

• Create Utah map

Removed

• Remove deprecated NSP badge

[1.0.7] - 2018-08-25

Added

• Add lint script
• Create CONTRIBUTING
• Create CHANGELOG

[1.0.6] - 2018-07-11

Added

• Add dev dependencies badge in README

Changed

• Update prop-types dependency to v15.6.2
• Update dev dependencies

Fixed

• Fix typo in README

[1.0.5] - 2018-05-05

Added

• Add onLocationMouseMove documentation

Changed

• Update dev dependencies

Fixed

• Fix indentation in README
• Fix gif URL in README

[1.0.4] - 2018-04-22

Added

• Add example gif in README

[1.0.3] - 2018-04-22

Added

• Add USA documentation

Fixed

• Fix installation documentation

[1.0.2] - 2018-04-22

Added

• Create USA map
• Create onMouseMove event handler
• Create tooltip example

[1.0.1] - 2018-04-03

Added

• Add code coverage badge with codecov