react-australia-map v0.1.3

react-australia-map

This is a simple customizable SVG map of Australia on HTML. This maps shows states delimitations. D3 is not needed.

Installation

It requires react 15.4.2 or higher, compatible with React 16.0.0

NPM

npm install --save react react-australia-map

Don't forget to manually install peer dependencies (react) if you use npm@3.

Demo

http://pvoznyuk.github.io/react-australia-map

Usage

Customizable map example with onClick event.

import React from 'react';
import ReactDOM from 'react-dom';
import {AustraliaMap} from 'react-australia-map';

const mapHandler = event => {
  alert(event.target.dataset.name);
};

const App = () => (
  <div>
    <AustraliaMap fill="#54788b" strokeWidth={1} width={350} height={250}  onClick={mapHandler} />
  </div>
);

const appRoot = document.createElement('div');
document.body.appendChild(appRoot);
ReactDOM.render(<App />, appRoot);

Custom regions styling and labels.

import React from 'react';
import ReactDOM from 'react-dom';
import {AustraliaMap} from 'react-australia-map';

const customStyling = {
  'NSW': {
    'fill': '#86D9E1',
    'showLabels': true,
    'label': {
      'name': '42%',
      'textAnchor': 'middle',
      'x': 230,
      'y': 167,
      'fill': 'black',
      'fontSize': 18,
      'fontFamily': 'Courier New'
    }
  },
  'NT': {
    'fill': '#1e2032',
    'showLabels': true,
    'label': {
      'name': '13%\n(average)',
      'textAnchor': 'middle',
      'fill': 'white',
      'fontSize': 12,
      'fontFamily': 'Arial'
    }
  }
};

const App = () => (
  <div>
    <AustraliaMap fill="#ffcb03" stroke="#ffffff" strokeWidth={1} width={350} height={250} customize={customStyling} />
  </div>
);

const appRoot = document.createElement('div');
document.body.appendChild(appRoot);
ReactDOM.render(<App />, appRoot);

The output will be:

Options

Label options

Custom regions' labels can have some extra options

Development and testing

Currently is being developed and tested with the latest stable Node 7 on OSX and Windows.

To run example covering all ReactAustraliaMap features, use npm start dev, which will compile src/example/Example.js

git clone git@github.com:pvoznyuk/react-australia-map.git
cd react-australia-map
npm install
npm start dev

# then
open http://localhost:8080

Tests

# to run tests
npm start test

# to generate test coverage (./reports/coverage)
npm start test.cov

# to run end-to-end tests
npm start test.e2e

TODO

• Fix bug on clicking on the text labels
• Add hovering styles
• Allow to set width and height in %

License

MIT