Usage

Turkey Map

import { TurkeyMap } from 'react-nvs-turkey-map';

export function App() {
  return (
    <TurkeyMap
      strokeColor="white"
      strokeWidth="0.08"
      defaultColor="#444"
      hoverColor="#43a047"
      maxWidth="1080px"
      onClick={({ name, plateNumber }) => {
        console.log(name, plateNumber);
      }}
    />
  );
}

City Map (districts)

import { CityMap } from 'react-nvs-turkey-map';

export function App() {
  return (
    <CityMap
      city="İZMİR"
      strokeColor="white"
      strokeWidth="0.08"
      defaultColor="#444"
      hoverColor="#43a047"
      maxWidth="700px"
      onClick={({ name }) => {
        console.log(name);
      }}
    />
  );
}

Heatmap (TurkeyMap)

TurkeyMap supports heatmaps via heatMapData.

Keys can be either:

• city names (e.g. "ANKARA", "İSTANBUL")
• plate numbers (e.g. 6, 34)

import { TurkeyMap } from 'react-nvs-turkey-map';

<TurkeyMap
  heatMapData={{
    "ANKARA": 10,
    "İSTANBUL": 50,
    35: 30, // İZMİR
  }}
  heatMapColors={{ min: '#e3f2fd', max: '#c62828' }}
/>;

Heatmap (CityMap)

CityMap supports district-level heatmaps via heatMapData.

• Keys are district names.
• Internally, keys are compared using toLocaleUpperCase('tr'), so prefer Turkish uppercase keys.

import { CityMap } from 'react-nvs-turkey-map';

<CityMap
  city="İZMİR"
  heatMapData={{
    BORNOVA: 10,
    KARŞIYAKA: 25,
    KONAK: 40,
  }}
  heatMapColors={{ min: '#fff3e0', max: '#e65100' }}
/>;

Tooltip

You can provide a custom tooltipComponent.

• TurkeyMap tooltip props: { name: string; plateNumber: number }
• CityMap tooltip props: { name: string }

import { TurkeyMap } from 'react-nvs-turkey-map';

const CityTooltip: React.FC<{ name: string; plateNumber: number }> = ({
  name,
  plateNumber,
}) => (
  <div style={{ padding: 8, background: 'white', border: '1px solid #eee' }}>
    <b>{name}</b> ({plateNumber})
  </div>
);

<TurkeyMap tooltipComponent={CityTooltip} />;

note

When heatMapData is provided, the internal implementation may also pass a value field to the tooltip props. If you want to use it, handle it defensively.