@crpt/react-svg-map

react-svg-map

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