turkey-district-maps-3

Turkey District Maps React Component

A SVG district maps of Turkey cities for React JS applications.

Install

npm install turkey-district-maps-3

Usage

import { Istanbul, Ankara } from 'turkey-district-maps-3'

const App = () => (
  <>
    <Istanbul />
    <Ankara />
  </>
)

Handling events

On click example:

<Istanbul onClick={({ name }) => console.log(name + ' is just clicked!')} />

On mouse over example:

<Istanbul
  onHover={({ name }) => console.log('Cursor is over on ' + name + '!')}
/>

District component wrapping

<Istanbul
  distWrapper={(distComponent, distData) => (
    <Tooltip title={distData.name} key={distData.name}>
      {distComponent}
    </Tooltip>
  )}
/>

This is generally used for Antd style Tooltip.

API

Types

Type	Description
distDataType	{ name: string, distPath: string }
viewBoxType	{ top: number, left: number, width: number, height: number }
customStyleType	{ idleColor: string, hoverColor: string }
strokeStyleType	{ strokeWidth: string, strokeColor: string }

props

Property	Description	Type	Default
distWrapper	District DOMs are wrapped by provided component.	( cityComponent: JSX.Element, distData : distDataType ) => JSX.Element	Unwrapped district
onClick	Event when a district clicked on the map.	( district : districtType ) => void	-
onHover	Event when a district hovered on the map.	( district : districtType ) => void	-
customStyle	Stylizing the component.	customStyleType	{ idleColor: #444, hoverColor: #dc3522 }
strokeStyle	Stylizing the component.	strokeStyleType	{ strokeWidth: 0.08, strokeColor: white }
viewBox	Position and dimension information of the map (svg) layout	viewBoxType	{ top: 30, left: 75, width: 74, height: 45 }
hidden	Defines the visibility of the component	boolean	false

Development

Local development is broken into two parts (ideally using two tabs).

First, run rollup to watch your src/ module and automatically recompile it into dist/ whenever you make changes.

npm start # runs rollup with watch flag

The second part will be running the example/ create-react-app that's linked to the local version of your module.

# (in another tab)
cd example
npm start # runs create-react-app dev server

License

MIT © ritzykey