turkey map react Télécharger - turkey map react Code source Télécharger

turkey map react

Autre code source

v1.2.2

Télécharger

Composant React de la carte interactive de la Turquie

Un plan de ville prêt à l'emploi de la Turquie.

Démo en direct : https://turkey-map-react-demo.netlify.app/

Installation

 npm install turkey - map - react

ou

 yarn add turkey - map - react

Usage

Importation (ES6)

 import TurkeyMap from 'turkey-map-react' ;

Utilisation de base avec valeurs par défaut

 < TurkeyMap / >

Gestion des événements

Exemple au clic :

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

Au survol de la souris, exemple :

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

Emballage de composants urbains

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

< TurkeyMap cityWrapper = { renderCity } / >

Ceci est généralement utilisé pour les info-bulles de style Antd .

Le paramètre " enfant " est le DOM de la ville.

Données personnalisées

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

Si des chemins SVG personnalisés et/ou des métadonnées de ville doivent être rendus, ils peuvent être fournis via la propriété data .

La propriété data doit être du type suivant :

 CityType [ ]

autrement dit :

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

API

Espèces

Taper	Description
Type de ville	{ id : chaîne , plaqueNumber : numéro , nom : chaîne , chemin : chaîne }
ViewBoxType	{ haut : nombre , gauche : nombre , largeur : nombre , hauteur : nombre }
Type de style personnalisé	{ dleColor : chaîne , hoverColor : chaîne }

accessoires

Propriété	Description	Taper	Défaut	Depuis
viewBox	Informations sur la position et les dimensions de la mise en page de la carte (svg)	ViewBoxType	{ haut : 0 , gauche : 80 , largeur : 1050 , hauteur : 585 }	1.0.0
visible	Définit la visibilité du composant	booléen	vrai	1.0.0
planable	Active la disponibilité de l'événement onHover	booléen	vrai	1.0.0
showTooltip	Affiche l'info-bulle par défaut si la valeur est true	booléen	FAUX	1.1.0
info-bulleTexte	Définit le texte personnalisé dans l'info-bulle par défaut	chaîne	Nom de la ville	1.1.0
Style personnalisé	Styliser le composant.	Type de style personnalisé []	{ IdleColor : #444 , hoverColor : #dc3522 }	1.0.0
données	Permet de fournir des chemins et des métadonnées SVG personnalisés.	Type de ville []	Données intégrées	1.0.0
villeWrapper	Les DOM de la ville sont encapsulés par le composant fourni.	( cityComponent : JSX.Element , ville : CityType ) => JSX.Element	Ville déballée	1.0.0
survol	Événement lorsqu'une ville survolait la carte.	( ville : CityType ) => vide	-	1.0.0
surCliquez	Événement lorsqu'une ville a cliqué sur la carte	( ville : CityType ) => vide	-	1.0.0

Stylisme

Les couleurs de la ville peuvent être écrasées en définissant la propriété customStyle .

Exemple:

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

L'info-bulle par défaut peut être stylisée via des ID HTML prédéfinis.

#svg-turkiye-haritasi-container-tooltip est l'ID de l'info-bulle DOM. Alors que #svg-turkiye-haritasi-container est l'ID du conteneur (parent) DOM.

Exemple:

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

Licence

Ce projet est publié sous licence MIT.

Gestion des versions

Schéma de gestion des versions défini comme dans le modèle " majorVersion.minorVersion.bugfixVersion "

Niveau	Description
version majeure	Cela indique que la version introduit des modifications importantes sur des fonctionnalités éventuellement non compatibles avec les versions antérieures.
version mineure	Cela indique que la version introduit de petites modifications qui sont rétrocompatibles et adaptées aux utilisations existantes.
version corrigée du bug	Cela indique que la version résout certains problèmes apparus dans les versions majeures ou mineures actuelles.