ts-turkey-map/readme.md

Customizable Turkey map with TypeScript and React 19 support

# ts-turkey-map

Customizable Turkey map with TypeScript and React 19 support

[![npm](https://img.shields.io/npm/v/ts-turkey-map.svg?style=flat-square)](https://www.npmjs.com/package/ts-turkey-map)
[![license](https://img.shields.io/badge/license-MIT-blue.svg?style=flat-square)](https://github.com/corevider/ts-turkey-map/blob/main/license)

## Installation

Install with NPM

```sh
npm install ts-turkey-map
```

Or with Yarn

```sh
yarn add ts-turkey-map
```

## Usage

### JavaScript/JSX

```jsx
import TurkeyMap from 'ts-turkey-map'

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

### TypeScript/TSX

```tsx
import TurkeyMap from 'ts-turkey-map'
import type { TurkeyMapProps } from 'ts-turkey-map'

const MyComponent: React.FC = () => {
  const handleCityClick = (data: { city: string; plate: string }) => {
    console.log('Clicked city:', data.city, 'Plate:', data.plate)
  }

  return (
    <TurkeyMap 
      onClick={handleCityClick}
      showTooltip={true}
    />
  )
}

export default MyComponent
```

### Next.js Usage

For Next.js projects, use the SSR-compatible wrapper:

```tsx
import dynamic from 'next/dynamic'
import type { TurkeyMapProps } from 'ts-turkey-map'

// Using dynamic import to avoid SSR issues
const TurkeyMap = dynamic(() => import('ts-turkey-map'), { 
  ssr: false,
  loading: () => <div>Harita yükleniyor...</div>
})

export default function MyPage() {
  const colorData = {
    "01": "#ff0000", // Adana - red
    "06": "#00ff00", // Ankara - green
  }

  return (
    <div>
      <h1>Turkey Map</h1>
      <TurkeyMap 
        colorData={colorData}
        showTooltip={true}
        onClick={(data) => console.log(data)}
      />
    </div>
  )
}
```

## Props

```tsx
<TurkeyMap
  showTooltip={true}
  colorData={{}}
  tooltipData={{}}
  onClick={(data) => console.log(data)}
/>
```

### TypeScript Interface

```typescript
interface TurkeyMapProps {
  colorData?: ColorData;          // Record<string, string>
  showTooltip?: boolean;          // default: true
  tooltipData?: TooltipData;      // Record<string, string | number>
  onClick?: (data: { city: string; plate: string }) => void;
}

interface ColorData {
  [plate: string]: string;        // plate number to color mapping
}

interface TooltipData {
  [plate: string]: string | number; // plate number to tooltip content
}
```

### Prop Details

- **showTooltip**: `boolean` (default: `true`) - Shows/hides city tooltips on hover
- **colorData**: `ColorData` (default: `{}`) - Maps plate numbers to colors
- **tooltipData**: `TooltipData` (default: `{}`) - Maps plate numbers to tooltip content
- **onClick**: `function` (optional) - Callback when a city is clicked
```typescript
// 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'
}}
```


## Based on 
[react-turkey-map](https://github.com/ozgrozer/react-turkey-map)


## License

[MIT](https://github.com/corevider/ts-turkey-map/blob/main/license)