JSPM – react-world-map@1.0.13

Package Exports

react-world-map

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-world-map) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Clickable world map

click on an area to select it (approx. continents)
selecting it will change the className-->change the color
uses React
built of SVG paths

Click here for demo on jsfiddle

view on: npm || github || react-components

usage:

npm install react-world-map --save

or, view demo on jsfiddle for example of use with cdn instead of npm

then in your `index.jsx` or `main.jsx`:

var React = require('react');
var ReactDOM = require('react-dom');
//import react-world-map
var WorldMap = require('react-world-map');

var YourMainComponent = React.createClass({
  render: function() {
    return (
      //your other components
      <WorldMap />
    )
  }
})

window.addEventListener('WorldMapClicked', function(e) {console.log('map was clicked, current selection is: ', e.detail.clickedState)});

ReactDOM.render(
  <YourMainComponent />,
  document.getElementById('react-app')
)

as you can see, there is an event fired when the map is clicked on, which contains the detail of which area is currently selected, codes of which are as follows:

NA - North America
SA - South America
AF - Africa
EU - Europe
AS - Asia
OC - Oceania

make sure to set your css to target the map:

.map-selected {
  fill: #E3DA37;
}

.map-unselected {
  fill: #699EAA;
}

.map-selected:hover, .map-unselected:hover {
  cursor: pointer;
}

Please feel free to fork and PR if you think you have developed something useful!

license: WTFPL

react-world-map