Скачать 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.

Параметр « child » — это DOM города.

Пользовательские данные

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

Если необходимо отобразить пользовательские пути SVG и/или метаданные города, это можно предоставить через свойство data .

Свойство данных должно иметь следующий тип:

 CityType [ ]

другими словами :

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

API

Типы

Тип	Описание
Тип города	{ id : строка , PlateNumber : номер , имя : строка , путь : строка }
Вьюбокстипе	{ сверху : номер , слева : номер , ширина : номер , высота : номер }
Кастомстилетипе	{ idleColor : строка , hoverColor : строка }

реквизит

Свойство	Описание	Тип	По умолчанию	С
ViewBox	Информация о положении и размерах макета карты (SVG).	Вьюбокстипе	{ сверху : 0 , слева : 80 , ширина : 1050 , высота : 585 }	1.0.0
видимый	Определяет видимость компонента	логическое значение	истинный	1.0.0
парящий	Включает доступность событий onHover	логическое значение	истинный	1.0.0
показатьПодсказка	Отображает всплывающую подсказку по умолчанию, если установлено значение true	логическое значение	ЛОЖЬ	1.1.0
подсказкаТекст	Устанавливает пользовательский текст во всплывающую подсказку по умолчанию	нить	Название города	1.1.0
CustomStyle	Стилизация компонента.	КастомСтильТип []	{ IdleColor : #444 , hoverColor : #dc3522 }	1.0.0
данные	Позволяет предоставлять собственные пути и метаданные SVG.	Тип города []	Встроенные данные	1.0.0
городОбертка	Городские DOM обертываются предоставленным компонентом.	( cityComponent : JSX.Element , city : CityType ) => JSX.Element	Развернутый город	1.0.0
при наведении	Событие, когда город завис на карте.	( город : CityType ) => недействителен	-	1.0.0
onClick	Событие, когда город нажал на карту	( город : CityType ) => недействителен	-	1.0.0

Стиль

Цвета города можно перезаписать, установив свойство customStyle .

Пример:

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

Подсказку по умолчанию можно стилизовать с помощью предопределенных идентификаторов HTML.

#svg-turkiye-haritasi-container-tooltip — это идентификатор DOM подсказки. А #svg-turkiye-haritasi-container — это идентификатор контейнера (родительского) DOM.

Пример:

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

Лицензирование

Этот проект выпущен под лицензией MIT.

Управление версиями

Схема управления версиями определяется шаблоном majorVersion.minorVersion.bugfixVersion .

Уровень	Описание
основная версия	Это указывает на то, что в версию внесены критические изменения, которые, возможно, не имеют обратной совместимости.
минорная версия	Это означает, что в версию внесены небольшие изменения, которые обратно совместимы и идеально подходят для существующих целей.
исправлениеВерсия	Это указывает на то, что версия решает некоторые проблемы, возникшие в текущих основных или второстепенных версиях.