Turkey District Maps React Component

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

🌏 Open in the Cloud

Click any of the buttons below to start a new development environment to demo or contribute to the codebase without having to install anything on your machine:

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 : distDataType ) => void | - | | onHover | Event when a district hovered on the map. | ( district : distDataType ) => 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