@crpt/react-svg-map

react-svg-map react component

Stats

StarsIssuesVersionUpdatedCreatedSize
@crpt/react-svg-map
000.0.223 years ago3 years agoMinified + gzip package size for @crpt/react-svg-map in KB

Readme

react-svg-map

Travis npm package Coveralls

SVG Map React component.

Install

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

Usage


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

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.