ts-turkey-map

Customizable Turkey map with TypeScript and React 19 support

Installation

Install with NPM

npm install ts-turkey-map

Or with Yarn

yarn add ts-turkey-map

Usage

JavaScript/JSX

import TurkeyMap from 'ts-turkey-map'

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

TypeScript/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:

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

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

TypeScript Interface

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

// 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

License

MIT