mirror of https://github.com/ozgrozer/react-turkey-map.git synced 2026-04-24 22:55:48 +03:00

Customizable Turkey map

JavaScript 97.3%
HTML 2.7%

Find a file

mac fb214a9dae Fix svg height		2024-06-01 23:17:14 +03:00
build	Fix svg height	2024-06-01 23:17:14 +03:00
example	Update population	2024-06-01 16:19:34 +03:00
preview	Add previews	2024-06-01 16:27:28 +03:00
src	Fix svg height	2024-06-01 23:17:14 +03:00
.gitignore	Initial commit	2024-05-31 01:26:52 +03:00
license	Add license	2024-05-31 19:33:16 +03:00
package-lock.json	Try to support both node.js and browser	2024-06-01 05:03:35 +03:00
package.json	Fix svg height	2024-06-01 23:17:14 +03:00
readme.md	Add demos	2024-06-01 17:03:25 +03:00
webpack.config.js	Another approach for web	2024-06-01 05:20:21 +03:00

readme.md

react-turkey-map

Customizable Turkey map

Demo

Basic Map

PlayCode - StackBlitz - CodeSandbox - Vercel (Next.js) - CodePen (UMD) - JSFiddle (UMD)

Colorful Map

PlayCode - StackBlitz - CodeSandbox - Vercel (Next.js) - CodePen (UMD) - JSFiddle (UMD)

Preview

Basic Map

Colorful Map

Installation

Install with NPM

npm install react-turkey-map

Usage

import TurkeyMap from 'react-turkey-map'

export default () => {
  return (
    <TurkeyMap />
  )
}

Props

<TurkeyMap
  showTooltip
  colorData={{}}
  tooltipData={{}}
/>

// types and defaults
showTooltip: bool (default: true)
colorData: object (default: {})
tooltipData: object (default: {})

// colorData prop
// plate: city color
colorData={{
  '34': '#071E58',
  '06': '#253494',
  '35': '#253494',
  '16': '#253494',
  '07': '#225EA8'
}}

// tooltipData prop
// plate: city tooltip
tooltipData={{
  '34': '15.655.924',
  '06': '5.803.482',
  '35': '4.479.525',
  '16': '3.214.571',
  '07': '2.696.249'
}}

Contribution

Feel free to contribute. Open a new issue, or make a pull request.

License

MIT