Descarga turkey map react - Descarga del código fuente turkey map react

turkey map react

Otro código fuente

v1.2.2

Descargar

Componente interactivo de reacción del mapa de Turquía

Un mapa de la ciudad de Turquía listo para usar.

Demostración en vivo: https://turkey-map-react-demo.netlify.app/

Instalación

 npm install turkey - map - react

o

 yarn add turkey - map - react

Uso

Importando (ES6)

 import TurkeyMap from 'turkey-map-react' ;

Uso básico con valores predeterminados

 < TurkeyMap / >

Manejo de eventos

Ejemplo de clic:

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

Al pasar el mouse sobre el ejemplo:

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

Envoltura de componentes de la ciudad

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

< TurkeyMap cityWrapper = { renderCity } / >

Esto se usa generalmente para información sobre herramientas de estilo Antd.

El parámetro " niño " es el DOM de la ciudad.

Datos personalizados

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

Si es necesario representar rutas SVG personalizadas y/o metadatos de la ciudad, se pueden proporcionar a través de la propiedad de datos .

La propiedad de datos debe ser del tipo siguiente:

 CityType [ ]

en otras palabras :

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

API

Tipos

Tipo	Descripción
Tipo de ciudad	{ id : cadena , número de placa : número , nombre : cadena , ruta : cadena }
Tipo de cuadro de vista	{ arriba : número , izquierda : número , ancho : número , alto : número }
Tipo de estilo personalizado	{ idleColor : cadena , hoverColor : cadena }

accesorios

Propiedad	Descripción	Tipo	Por defecto	Desde
vercuadro	Información de posición y dimensiones del diseño del mapa (svg)	Tipo de cuadro de vista	{ arriba : 0 , izquierda : 80 , ancho : 1050 , alto : 585 }	1.0.0
visible	Define la visibilidad del componente.	booleano	verdadero	1.0.0
flotante	Habilita la disponibilidad de eventos onHover	booleano	verdadero	1.0.0
mostrar información sobre herramientas	Muestra información sobre herramientas predeterminada si se establece en verdadero	booleano	FALSO	1.1.0
información sobre herramientasTexto	Establece texto personalizado como información sobre herramientas predeterminada	cadena	Nombre de la ciudad	1.1.0
estilo personalizado	Estilizar el componente.	Tipo de estilo personalizado []	{ color inactivo : #444 , color flotante : #dc3522 }	1.0.0
datos	Permite proporcionar rutas y metadatos SVG personalizados.	Tipo de ciudad []	Datos incorporados	1.0.0
ciudadWrapper	Los DOM de la ciudad están empaquetados por el componente proporcionado.	( ciudadComponente : JSX.Element , ciudad : CityType ) => JSX.Element	ciudad desenvuelta	1.0.0
al pasar el mouse	Evento en el que una ciudad flotaba en el mapa.	( ciudad : CityType ) => nulo	-	1.0.0
al hacer clic	Evento cuando una ciudad hizo clic en el mapa.	( ciudad : CityType ) => nulo	-	1.0.0

Estilo

Los colores de la ciudad se pueden sobrescribir configurando la propiedad customStyle .

Ejemplo:

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

La información sobre herramientas predeterminada se puede diseñar mediante ID HTML predefinidos.

#svg-turkiye-haritasi-container-tooltip es el ID del DOM de información sobre herramientas. Mientras que #svg-turkiye-haritasi-container es el ID del DOM del contenedor (principal).

Ejemplo:

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

Licencias

Este proyecto se publica bajo una licencia MIT.

Versionado

Esquema de versiones definido como en el patrón de " majorVersion.minorVersion.bugfixVersion "

Nivel	Descripción
versión principal	Esto indica que la versión introduce cambios importantes que posiblemente no sean funciones compatibles con versiones anteriores.
Versión menor	Esto indica que la versión introduce pequeños cambios que son compatibles con versiones anteriores y se adaptan perfectamente a los usos existentes.
versión de corrección de errores	Esto indica que la versión resuelve algunos problemas que surgieron en las versiones principales o secundarias actuales.