victorcazanave/react-svg-map

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

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

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

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

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.
selectedLocationIds	String[]		List of ids 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 list of selected locations is passed as parameter.
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 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

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.
selectedLocationId	String		id of the initial selected location. It is used only when the component is mounted and is not synchronized when updated.
onChange	Function		Invoked when the user selects a location. The selected location is passed as parameter.
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 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!

react-svg-map's Issues

Is there anyway to zoom in on a particular path onClick?

For the below example. Is there any way to zoom onto a state when clicking on it?

Is there any option to define default checked locations?

installs with the error "TypeError: Cannot read property 'viewBox' of undefined"

The App does not install correctly, it gives errors

Map Labels

Is there a way to add labels to the states?

Control path opacity

Hi, thanks for the useful tool!

I'm wondering if there's an handy way to control the opacity of a map region (so an SVG path).

I'm building an heatmap with an opacity scale based on data incoming from an API, so is not really possible to do that as in the Heatmap example.

Or rather, it's not possible without defining a CSS class for each possible opacity value, that's not something I really wanna do :)

Any suggestions?

Thanks a lot

how add terrain type

how i add terrain type, example:

the horizontal and vertical line, identify the terrain type

Can we get onLocationClick to CheckboxSVGMap

I have tried onLocationFocus and onLocationBlur as provided but they create some bugs in my project. It would be perfect if i can get onLocationClick

Styling the map

Hi,
I am trying to change the colors on the map, but whenever I set a custom locationClassName the clicked countries are surrounded with a large rectangle instead of the country borders.
How is it possible to style colours etc without changing the functionality of the map?

Disable click behaviour on Checkbox map

Hi,

Is it possible to disable all click behaviour for the Checkbox map?

I have a world map and I am currently highlighting certain countries using the selectedLocationIds but I do not want the click behaviour to fill / unfill the countries upon clicking.

Is there a better way to approach this other than using the Checkbox map?

Thanks

Custom style for each location

I need to apply a specific className to each location, depending on the location status. I'm using this because I have 3 possible status for each location. "Only morning", "Only afternoon" or "All day". This application is for a university project and using SVG to create a custom map is awesome because it's easier.

But locationClassName applies to all locations.

Is there any coming features to do this?

How to convert Gejson files to compatible svg format

Hi,
Is there any feasible way to convert .geojson formatted files to compatible svg map? I used the cli tool but no success

convert to functional components

RadioSVGMap broken in React 17

It appears RadioSVGMap is broken in React 17

I've made a Code Sandbox showing the error:
https://codesandbox.io/s/reverent-goodall-5ox98?file=/src/App.js

Error:
Minified React error #188; visit http://facebook.github.io/react/docs/error-decoder.html?invariant=188 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

Full text of error: Unable to find node on an unmounted component.

Map markers

Is there any way to add markers to the map?

Breaks when supplying an invalid state id to selectedLocationIds

Providing an invalid state id breaks the component. Would it be possible get this fix to where it would simply disregard invalid IDs?

Based on condition i want to select the state

I have the condition on the basis I want to select the state and show that state is selected how I can do that?

function handleclick(id, stateName) {
console.log("im clilck");
setStateCode(id);
setStateName(stateName);
setDisplayState(stateName);
}

Can we get selectedLocationIds to update on re-render

Having the component rerender when selectedLocationIds get updated is crucial to my use case as the selected states are stored on the backend.

Custom the SVG map color by edit the CSS

I am a bit confused to change the color. And then I try to find the CSS file that control the color. And here it is.

.svg-map {
  width: 100%;
  height: auto;
  stroke: #666;
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round; }
  .svg-map__location {
    fill: #a1d99b;
    cursor: pointer; }
    .svg-map__location:focus, .svg-map__location:hover {
      fill: #b8e2b3;
      outline: 0; }
    .svg-map__location[aria-checked=true] {
      fill: #f4bc44; }

I just want to say to everyone who need to modify the CSS, this is the default.

Instead of using default import "react-svg-map/lib/index.css"; You can save your custom CSS.

It will really helps if there is a way to custom the color easier.

selectedLocationIds not working on checkbox svg map

I'm trying to add initial value to map, but the type is missing in type script, and also react shows Invariant Violation error.
error:

Unhandled Runtime Error

Invariant Violation: Minified React error #188; visit http://facebook.github.io/react/docs/error-decoder.html?invariant=188 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

Call Stack
p
node_modules/react-svg-map/lib/index.js (9:297)
findDOMNode
node_modules/react-svg-map/lib/index.js (9:88932)
value
node_modules/react-svg-map/lib/index.js (1:5955)
commitLifeCycles
node_modules/react-dom/cjs/react-dom.development.js (20663:0)
commitLayoutEffects
node_modules/react-dom/cjs/react-dom.development.js (23426:0)

How to adjust / add className into each path for coloring

May I have your direction on that?

Also, Is it possible to implement zoom and pan function as well? Many thanks!!

Roadmap v2

• Use SVG files instead of JS files (if possible)
• Provide CheckboxSVGMap and RadioSVGMap components
• Handle keyboard navigation (a11y)
• Add custom CSS class prop
• Generate 1 CSS file per map
• Add more maps (EU, Germany, Spain, Italy, Japan, Korea...)
• Support Yarn
• Externalize maps files?

Any thoughts or ideas?