turkey map react Download - turkey map react Quellcode herunterladen

turkey map react

Anderer Quellcode

v1.2.2

Herunterladen

Interaktive Türkei-Karten-React-Komponente

Ein sofort einsatzbereiter Stadtplan der Türkei.

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

Installation

 npm install turkey - map - react

oder

 yarn add turkey - map - react

Verwendung

Importieren (ES6)

 import TurkeyMap from 'turkey-map-react' ;

Grundlegende Verwendung mit Standardeinstellungen

 < TurkeyMap / >

Umgang mit Ereignissen

On-Click-Beispiel:

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

Bei Mouseover-Beispiel:

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

Verpackung von Stadtbauteilen

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

< TurkeyMap cityWrapper = { renderCity } / >

Dies wird im Allgemeinen für Tooltips im Antd-Stil verwendet.

Der „ child “-Parameter ist das Stadt-DOM.

Benutzerdefinierte Daten

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

Wenn benutzerdefinierte SVG-Pfade und/oder Stadtmetadaten gerendert werden müssen, können diese über die Dateneigenschaft bereitgestellt werden.

Die Dateneigenschaft muss den folgenden Typ haben:

 CityType [ ]

mit anderen Worten:

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

API

Typen

Typ	Beschreibung
Stadttyp	{ ID : String , PlateNumber : Nummer , Name : String , Pfad : String }
ViewBoxType	{ oben : Zahl , links : Zahl , Breite : Zahl , Höhe : Zahl }
CustomStyleType	{ IdleColor : String , HoverColor : String }

Requisiten

Eigentum	Beschreibung	Typ	Standard	Seit
viewBox	Positions- und Dimensionsinformationen des Kartenlayouts (SVG).	ViewBoxType	{ oben : 0 , links : 80 , Breite : 1050 , Höhe : 585 }	1.0.0
sichtbar	Definiert die Sichtbarkeit der Komponente	Boolescher Wert	WAHR	1.0.0
schwebend	Aktiviert die Verfügbarkeit von OnHover- Ereignissen	Boolescher Wert	WAHR	1.0.0
showTooltip	Zeigt den Standard-Tooltip an, wenn dieser Wert auf „true“ gesetzt ist	Boolescher Wert	FALSCH	1.1.0
TooltipText	Legt benutzerdefinierten Text auf den Standard-Tooltip fest	Zeichenfolge	Stadtname	1.1.0
benutzerdefinierter Stil	Stilisierung der Komponente.	CustomStyleType []	{ IdleColor : #444 , HoverColor : #dc3522 }	1.0.0
Daten	Ermöglicht die Bereitstellung benutzerdefinierter SVG-Pfade und Metadaten.	Stadttyp []	Integrierte Daten	1.0.0
cityWrapper	Stadt-DOMs werden von der bereitgestellten Komponente umschlossen.	( cityComponent : JSX.Element , city : CityType ) => JSX.Element	Ausgepackte Stadt	1.0.0
onHover	Ereignis, bei dem eine Stadt auf der Karte schwebte.	( Stadt : CityType ) => ungültig	-	1.0.0
onClick	Ereignis, wenn eine Stadt auf die Karte geklickt hat	( Stadt : CityType ) => ungültig	-	1.0.0

Styling

Die Farben der Stadt können durch Festlegen der Eigenschaft „customStyle“ überschrieben werden.

Beispiel:

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

Der Standard-Tooltip kann über vordefinierte HTML-IDs gestaltet werden.

#svg-turkiye-haritasi-container-tooltip ist die ID für den Tooltip-DOM. Während #svg-turkiye-haritasi-container die ID für den (übergeordneten) Container-DOM ist.

Beispiel:

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

Lizenzierung

Dieses Projekt wird unter einer MIT-Lizenz veröffentlicht.

Versionierung

Versionsschema, definiert wie im Muster „ majorVersion.minorVersion.bugfixVersion “

Ebene	Beschreibung
Hauptversion	Dies weist darauf hin, dass die Version bahnbrechende Änderungen an möglicherweise nicht abwärtskompatiblen Funktionen einführt.
Nebenversion	Dies weist darauf hin, dass die Version kleine Änderungen einführt, die abwärtskompatibel sind und sich gut für bestehende Verwendungszwecke eignen.
bugfixVersion	Dies weist darauf hin, dass die Version einige Probleme löst, die in den aktuellen Haupt- oder Nebenversionen aufgetreten sind.