react-svg-map

[![Travis][build-badge]][build]
[![npm package][npm-badge]][npm]
[![Coveralls][coveralls-badge]][coveralls]

SVG Map React component.

Install ##

javascript
npm i --save @crpt/react-svg-map


Usage

`javascript

import Map, { THEMES } from "@crpt/react-svg-map";

`$3`

| PropName | Description | Example | |---|---|---| | theme: Object | Map theme object. Default: THEMES.defaultTheme || | country: String | Country name. Default: 'russia' || | region: String | Country region id. Default: 'RF' || | info: Array | Map info. Note1. || | visibleInfo: String | Dont hide this info || | favorites: Integer | Counter for Flag button || | onZoomInClick: Function | Callback for ZoomIn control. Receives new scale. | console.log(scale)} />| | onZoomOutClick: Function | Callback for ZoomOut control. Receives new scale. | console.log(scale)} />| | onFlagClick: Function | Callback for Flag control. | console.log('Flag clicked')} />| | onRegionClick: Function | Callback on map Region click. Note2 | console.log(region.id)} />| | onInfoClick: Function | Callback on Info click. Receives region ID | console.log(region)> |

__Note1__. info - array of objects`javascript const info = [{percent: 10, region: 'SZFO', owner: 'RF' }];`

__Note2__. onRegionClick receives object

`javascript {id: 'SZFO', rect: region.getBoundingClientRect(), target: {id: 'RU-SPE', rect: target.getBoundingClientRect()}} // id - region id // rect - region node bounding client rect // target - clicked region, if region inside District (group of regions).``

[build-badge]: https://img.shields.io/travis/user/repo/master.png?style=flat-square
[build]: https://travis-ci.org/user/repo

[npm-badge]: https://img.shields.io/npm/v/npm-package.png?style=flat-square
[npm]: https://www.npmjs.org/package/npm-package

[coveralls-badge]: https://img.shields.io/coveralls/user/repo/master.png?style=flat-square
[coveralls]: https://coveralls.io/github/user/repo

Install ##

javascript
npm i --save @crpt/react-svg-map

Usage

`javascript

import Map, { THEMES } from "@crpt/react-svg-map";

$3

| PropName | Description | Example |
|---|---|---|
| theme: Object | Map theme object. Default: THEMES.defaultTheme |

 |
| country: String  | Country name. Default: 'russia' |

 |
| region: String  | Country region id. Default: 'RF' |

 |
| info: Array  | Map info. Note1. |

 |
| visibleInfo: String | Dont hide this info |

 |
| favorites: Integer | Counter for Flag button |

 |
| onZoomInClick: Function | Callback for ZoomIn control. Receives new scale. |

console.log(scale)} />

 |
| onZoomOutClick: Function | Callback for ZoomOut control. Receives new scale. |

console.log(scale)} />

 |
| onFlagClick: Function | Callback for Flag control. |

console.log('Flag clicked')} />

 |
| onRegionClick: Function | Callback on map Region click. Note2 |

console.log(region.id)} />

 |
| onInfoClick: Function | Callback on Info click. Receives region ID |

console.log(region)> |

__Note1__. info - array of objects

javascript
const info = [{percent: 10, region: 'SZFO', owner: 'RF' }];

__Note2__. onRegionClick receives object

javascript
{id: 'SZFO', rect: region.getBoundingClientRect(), target: {id: 'RU-SPE', rect: target.getBoundingClientRect()}}
// id - region id
// rect - region node bounding client rect
// target - clicked region, if region inside District (group of regions).

[build-badge]: https://img.shields.io/travis/user/repo/master.png?style=flat-square
[build]: https://travis-ci.org/user/repo

[npm-badge]: https://img.shields.io/npm/v/npm-package.png?style=flat-square
[npm]: https://www.npmjs.org/package/npm-package

[coveralls-badge]: https://img.shields.io/coveralls/user/repo/master.png?style=flat-square
[coveralls]: https://coveralls.io/github/user/repo