Download turkey map react - turkey map react Download do código-fonte

turkey map react

Outro código-fonte

v1.2.2

Baixar

Componente interativo do mapa da Turquia React

Um mapa da cidade pronto para uso da Turquia.

Demonstração ao vivo: https://turkey-map-react-demo.netlify.app/

Instalação

 npm install turkey - map - react

ou

 yarn add turkey - map - react

Uso

Importando (ES6)

 import TurkeyMap from 'turkey-map-react' ;

Uso básico com padrões

 < TurkeyMap / >

Tratamento de eventos

Exemplo de clique:

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

Passando o mouse sobre o exemplo:

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

Envolvimento de componentes da cidade

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

< TurkeyMap cityWrapper = { renderCity } / >

Isso geralmente é usado para dicas de ferramentas no estilo Antd.

O parâmetro " child " é o DOM da cidade.

Dados personalizados

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

Se for necessário renderizar caminhos SVG personalizados e/ou metadados de cidade, eles poderão ser fornecidos por meio da propriedade de dados .

A propriedade de dados deve ser do seguinte tipo:

 CityType [ ]

em outras palavras :

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

API

Tipos

Tipo	Descrição
Tipo de cidade	{ id : string , plateNumber : número , nome : string , caminho : string }
ViewBoxType	{ topo : número , esquerda : número , largura : número , altura : número }
Tipo de estilo personalizado	{ dleColor : string , hoverColor : string }

adereços

Propriedade	Descrição	Tipo	Padrão	Desde
caixa de visualização	Informações de posição e dimensão do layout do mapa (svg)	ViewBoxType	{ superior : 0 , esquerda : 80 , largura : 1050 , altura : 585 }	1.0.0
visível	Define a visibilidade do componente	booleano	verdadeiro	1.0.0
pairável	Ativa a disponibilidade de eventos onHover	booleano	verdadeiro	1.0.0
mostrar dica de ferramenta	Exibe a dica de ferramenta padrão se definida como verdadeira	booleano	falso	1.1.0
dica de ferramentaTexto	Define o texto personalizado para a dica de ferramenta padrão	corda	Nome da cidade	1.1.0
estilo personalizado	Estilizando o componente.	Tipo de estilo personalizado []	{ idleColor : #444 , hoverColor : #dc3522 }	1.0.0
dados	Permite fornecer caminhos SVG e metadados personalizados.	CidadeTipo []	Dados integrados	1.0.0
cidadeWrapper	Os DOMs da cidade são agrupados pelo componente fornecido.	( cityComponent : JSX.Element , cidade : CityType ) => JSX.Element	Cidade desembrulhada	1.0.0
onHover	Evento quando uma cidade paira no mapa.	( cidade : CityType ) => vazio	-	1.0.0
onClick	Evento quando uma cidade clicou no mapa	( cidade : CityType ) => vazio	-	1.0.0

Estilo

As cores da cidade podem ser substituídas com a configuração da propriedade customStyle .

Exemplo:

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

A dica de ferramenta padrão pode ser estilizada por meio de IDs HTML predefinidos.

#svg-turkiye-haritasi-container-tooltip é o ID da dica de ferramenta DOM. Enquanto #svg-turkiye-haritasi-container é o ID do DOM do contêiner (pai).

Exemplo:

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

Licenciamento

Este projeto é lançado sob uma licença do MIT.

Versionamento

Esquema de versionamento definido como no padrão " majorVersion.minorVersion.bugfixVersion "

Nível	Descrição
versão principal	Isso indica que a versão introduz alterações significativas naqueles recursos possivelmente não compatíveis com versões anteriores.
Versão menor	Isso indica que a versão introduz pequenas alterações que são compatíveis com versões anteriores e ajuste fino para usos existentes.
versão de correção de bug	Isso indica que a versão resolve alguns problemas que surgiram nas versões principais ou secundárias atuais.