turkey map reactダウンロード - turkey map reactソースコードのダウンロード

turkey map react

その他のソースコード

v1.2.2

ダウンロード

インタラクティブなトルコ地図 React コンポーネント

すぐに使えるトルコの都市地図。

ライブデモ: https://turkey-map-react-demo.netlify.app/

インストール

 npm install turkey - map - react

または

 yarn add turkey - map - react

使用法

インポート(ES6)

 import TurkeyMap from 'turkey-map-react' ;

デフォルトでの基本的な使用法

 < TurkeyMap / >

イベントの処理

クリック時の例:

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

マウスオーバー時の例:

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

都市コンポーネントのラッピング

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

< TurkeyMap cityWrapper = { renderCity } / >

これは通常、 Antd スタイルのTooltipに使用されます。

「 child 」パラメータは都市 DOM です。

カスタムデータ

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

カスタム SVG パスや都市メタデータをレンダリングする必要がある場合は、データプロパティを通じて提供できます。

dataプロパティは次のタイプである必要があります。

 CityType [ ]

言い換えると：

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

API

種類

タイプ	説明
都市タイプ	{ id :文字列、 plateNumber :数値、名前:文字列、パス:文字列}
ビューボックスタイプ	{上:数値、左:数値、幅:数値、高さ:数値}
カスタムスタイルタイプ	{アイドルカラー:文字列、ホバーカラー:文字列}

小道具

財産	説明	タイプ	デフォルト	以来
ビューボックス	地図(svg)レイアウトの位置・寸法情報	ビューボックスタイプ	{上: 0 、左: 80 、幅: 1050 、高さ: 585 }	1.0.0
見える	コンポーネントの可視性を定義します	ブール値	真実	1.0.0
ホバリング可能な	onHoverイベントの可用性を有効にします	ブール値	真実	1.0.0
ツールチップを表示	true に設定されている場合、デフォルトのツールチップを表示します。	ブール値	間違い	1.1.0
ツールチップテキスト	カスタムテキストをデフォルトのツールチップに設定します	弦	都市名	1.1.0
カスタムスタイル	コンポーネントのスタイル設定。	カスタムスタイルタイプ[]	{アイドルカラー: #444 、ホバーカラー: #dc3522 }	1.0.0
データ	カスタム SVG パスとメタデータを提供できるようにします。	都市タイプ[]	内蔵データ	1.0.0
シティラッパー	City DOM は、提供されたコンポーネントによってラップされます。	( cityComponent : JSX.Element 、 city : CityType ) => JSX.Element	包まれていない都市	1.0.0
ホバー時	マップ上で都市がホバリングされたときのイベント。	(都市: CityType ) => void	-	1.0.0
オンクリック	地図上で都市をクリックしたときのイベント	(都市: CityType ) => void	-	1.0.0

スタイリング

街の色はcustomStyleプロパティの設定で上書きできます。

例：

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

デフォルトのツールチップは、事前定義された HTML ID を使用してスタイル設定できます。

#svg-turkiye-haritasi-container-tooltipツールチップ DOM の ID です。 #svg-turkiye-haritasi-containerコンテナー (親) DOM の ID です。

例：

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

ライセンス

このプロジェクトは MIT ライセンスに基づいてリリースされています。

バージョン管理

「 MajorVersion.minorVersion.bugfixVersion 」のパターンのように定義されたバージョン管理スキーム

レベル	説明
メジャーバージョン	これは、そのバージョンに、下位互換性がない可能性のある機能を破壊する変更が導入されていることを示します。
マイナーバージョン	これは、このバージョンに、既存の用途に合わせて下位互換性のある小さな変更が導入されていることを示しています。
バグ修正バージョン	これは、現在のメジャーバージョンまたはマイナーバージョンで発生したいくつかの問題がそのバージョンで解決されていることを示します。