Ana içeriğe geç

Kullanım

Türkiye Haritası​

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);
      }}
    />
  );
}

İl Haritası (ilçeler)​

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);
      }}
    />
  );
}

Isı haritası (TurkeyMap)​

TurkeyMap, heatMapData ile ısı haritasını destekler.

Anahtarlar şu şekilde verilebilir:

  • il isimleri (örn. "ANKARA", "İSTANBUL")
  • plaka numarası (örn. 6, 34)
import { TurkeyMap } from 'react-nvs-turkey-map';

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

Isı haritası (CityMap)​

CityMap, ilçe seviyesinde heatMapData ile ısı haritasını destekler.

  • Anahtarlar ilçe isimleridir.
  • İçeride toLocaleUpperCase('tr') ile karşılaştırma yapıldığı için Türkçe büyük harf anahtarlar tercih edin.
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​

Özel bir tooltipComponent sağlayabilirsiniz.

  • 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} />;
not

heatMapData verildiğinde, iç implementasyon tooltip props’una value alanını da ekleyebiliyor. Kullanacaksanız defensively handle edin.