Skip to content

erdigokce/turkey-map-react

Repository files navigation

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

or

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.