0.0.22 • Published 7 years ago
@crpt/react-svg-map v0.0.22
react-svg-map
SVG Map React component.
Install
npm i --save @crpt/react-svg-mapUsage
import Map, { THEMES } from "@crpt/react-svg-map";
<Map country="russia" selectedId="DFO" theme={THEMES.defaultTheme} />Map
| PropName | Description | Example |
|---|---|---|
| theme: Object | Map theme object. Default: THEMES.defaultTheme | <Map theme={myCustomTheme} /> |
| country: String | Country name. Default: 'russia' | <Map country="russia" /> |
| region: String | Country region id. Default: 'RF' | <Map region="DFO" /> |
| info: Array | Map info. Note1. | <Map info={[{ percent: 22, region: 'DFO'}]} /> |
| visibleInfo: String | Dont hide this info | <Map visibleInfo="DFO" /> |
| favorites: Integer | Counter for Flag button | <Map favorites={2} /> |
| onZoomInClick: Function | Callback for ZoomIn control. Receives new scale. | <Map onZoomInClick={scale => console.log(scale)} /> |
| onZoomOutClick: Function | Callback for ZoomOut control. Receives new scale. | <Map onZoomOutClick={scale => console.log(scale)} /> |
| onFlagClick: Function | Callback for Flag control. | <Map onFlagClick={() => console.log('Flag clicked')} /> |
| onRegionClick: Function | Callback on map Region click. Note2 | <Map onRegionClick={region => console.log(region.id)} /> |
| onInfoClick: Function | Callback on Info click. Receives region ID | <Map onInfoClick={region => console.log(region)> |
Note1. info - array of objects
const info = [{percent: 10, region: 'SZFO', owner: 'RF' }];Note2. onRegionClick receives object
{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).