Interactive Turkey Map React Component

An out-of-the-box city map of Turkey.

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

Installation

npm install turkey-map-react

yarn add turkey-map-react

Usage

Importing (ES6)

import TurkeyMap from 'turkey-map-react';

Basic usage with defaults

<TurkeyMap />

Handling events

On click example:

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

On mouse over example:

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

City component wrapping

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

<TurkeyMap cityWrapper={renderCity} />

This is generally used for Antd style Tooltip.

"child" parameter is the city DOM.

Custom Data

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

If custom SVG paths and/or city metadata is needed to be rendered, it can be provided through data property.

data property has to be in type of following:

CityType[]

in other words :

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

API

Types

Type	Description
CityType	{ id: string, plateNumber: number, name: string, path: string }
ViewBoxType	{ top: number, left: number, width: number, height: number }
CustomStyleType	{ idleColor: string, hoverColor: string }

props

Property	Description	Type	Default	Since
viewBox	Position and dimension information of the map (svg) layout	ViewBoxType	{ top: 0, left: 80, width: 1050, height: 585 }	1.0.0
visible	Defines the visibility of the component	boolean	true	1.0.0
hoverable	Enables onHover event availability	boolean	true	1.0.0
showTooltip	Displays default tooltip if set to true	boolean	false	1.1.0
tooltipText	Sets custom text to default tooltip	string	City Name	1.1.0
customStyle	Stylizing the component.	CustomStyleType[]	{ idleColor: #444, hoverColor: #dc3522 }	1.0.0
data	Allows for providing custom SVG paths and metadata.	CityType[]	Built-in data	1.0.0
cityWrapper	City DOMs are wrapped by provided component.	( cityComponent: JSX.Element, city : CityType ) => JSX.Element	Unwrapped city	1.0.0
onHover	Event when a city hovered on the map.	( city : CityType ) => void	-	1.0.0
onClick	Event when a city clicked on the map	( city : CityType ) => void	-	1.0.0

Styling

Colors of the city can be overwritten with setting customStyle property.

Example:

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

Default tooltip can be styled through predefined html IDs.

#svg-turkiye-haritasi-container-tooltip is the ID for tooltip DOM. While #svg-turkiye-haritasi-container is the ID for container (parent) DOM.

Example:

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

Licensing

This project is released under a MIT License.

Versioning

Versioning scheme defined as in the pattern of "majorVersion.minorVersion.bugfixVersion"

Level	Description
majorVersion	This indicates that the version introduces breaking changes those possibly not backward compatible features.
minorVersion	This indicates that the version introduces small changes those are backward compatible with fine fitting for existing uses.
bugfixVersion	This indicates that the version solves some problems those popped out in the current major or minor versions.

Contributing

To contribute to this project please just open a pull request with a comprehensive description.

Credits

This project has been derivated from dnomak's svg-turkiye-haritasi project.

erdigokce / turkey-map-react

readme