Unduh turkey map react - unduh kode sumber turkey map react

turkey map react

Kode sumber lainnya

v1.2.2

Unduh

Komponen React Peta Turki Interaktif

Peta kota Turki yang unik.

Demo langsung: https://turkey-map-react-demo.netlify.app/

Instalasi

 npm install turkey - map - react

atau

 yarn add turkey - map - react

Penggunaan

Mengimpor (ES6)

 import TurkeyMap from 'turkey-map-react' ;

Penggunaan dasar dengan default

 < TurkeyMap / >

Menangani peristiwa

Contoh klik:

 < TurkeyMap onClick = { ( { plateNumber , name } ) => console . log ( plateNumber + " - " + name + " is just clicked!" ) } / >

Contoh saat mengarahkan mouse:

 < TurkeyMap 
    hoverable = { true }
    onHover = { ( { plateNumber , name } ) => console . log ( "Cursor is over on " + plateNumber + " - " + name + "!" ) } 
/ >

Pembungkus komponen kota

 const renderCity = ( cityComponent , cityData ) => ( 
  < Tooltip title = { cityData . name } key = { cityData . id } > 
      { cityComponent } 
  < / Tooltip >
) ;

< TurkeyMap cityWrapper = { renderCity } / >

Ini umumnya digunakan untuk Tooltip gaya Antd.

Parameter " anak " adalah DOM kota.

Data Khusus

 < TurkeyMap data = { this . state . apiData } / >

Jika jalur SVG khusus dan/atau metadata kota perlu dirender, jalur tersebut dapat disediakan melalui properti data .

properti data harus dalam tipe berikut:

 CityType [ ]

dengan kata lain:

 { id : string , plateNumber : number , name : string , path : string } [ ]

API

Jenis

Jenis	Keterangan
Tipe Kota	{ id : string , nomor plat : nomor , nama : string , jalur : string }
Tipe Kotak Tampilan	{ atas : angka , kiri : angka , lebar : angka , tinggi : angka }
Tipe Gaya Kustom	{ idleColor : string , hoverColor : string }

alat peraga

Milik	Keterangan	Jenis	Bawaan	Sejak
lihatKotak	Informasi posisi dan dimensi tata letak peta (svg).	Tipe Kotak Tampilan	{ atas : 0 , kiri : 80 , lebar : 1050 , tinggi : 585 }	1.0.0
bisa dilihat	Mendefinisikan visibilitas komponen	boolean	BENAR	1.0.0
dapat melayang	Mengaktifkan ketersediaan acara onHover	boolean	BENAR	1.0.0
tampilkanTooltip	Menampilkan tooltip default jika disetel ke true	boolean	PALSU	1.1.0
tooltipTeks	Menyetel teks khusus ke keterangan alat default	rangkaian	Nama Kota	1.1.0
gaya khusus	Menata gaya komponen.	Tipe Gaya Khusus []	{ idleColor : #444 , hoverColor : #dc3522 }	1.0.0
data	Memungkinkan untuk menyediakan jalur dan metadata SVG khusus.	Tipe Kota []	Data bawaan	1.0.0
cityWrapper	DOM kota dibungkus oleh komponen yang disediakan.	( cityComponent : JSX.Element , kota : CityType ) => JSX.Element	Kota yang belum terbungkus	1.0.0
di arahkan kursor	Peristiwa ketika sebuah kota muncul di peta.	( kota : CityType ) => batal	-	1.0.0
diKlik	Peristiwa ketika sebuah kota mengklik peta	( kota : CityType ) => batal	-	1.0.0

Penataan gaya

Warna kota dapat ditimpa dengan pengaturan properti customStyle .

Contoh:

 < TurkeyMap customStyle = { { idleColor : "#444" , hoverColor : "#dc3522" } } / >

Tooltip default dapat ditata melalui ID html yang telah ditentukan sebelumnya.

#svg-turkiye-haritasi-container-tooltip adalah ID untuk DOM tooltip. Sedangkan #svg-turkiye-haritasi-container adalah ID untuk DOM container (induk).

Contoh:

 # svg-turkiye-haritasi-container > # svg-turkiye-haritasi-container-tooltip {
  background-color : rgba ( 54 , 0 , 99 , 0.479 );
}

Perizinan

Proyek ini dirilis di bawah Lisensi MIT.

Pembuatan versi

Skema pembuatan versi didefinisikan sebagai pola " mayorVersion.minorVersion.bugfixVersion "

Tingkat	Keterangan
Versi utama	Hal ini menunjukkan bahwa versi tersebut memperkenalkan perubahan besar pada fitur-fitur yang mungkin tidak kompatibel dengan versi sebelumnya.
Versi kecil	Hal ini menunjukkan bahwa versi tersebut memperkenalkan perubahan kecil yang kompatibel dengan penyesuaian yang baik untuk penggunaan yang sudah ada.
Versi perbaikan bug	Ini menunjukkan bahwa versi tersebut memecahkan beberapa masalah yang muncul di versi mayor atau minor saat ini.