erdigokce/turkey-map-react

An out-of-the-box city map of Turkey for React JS applications.

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.

turkey-map-react's Issues

Default Tooltip To Display City Names On Hover

New Feature: Default Tooltip On Hover City

As of version 1.0.3, the only built-in behavior is that the hovered city area is colored. There is no default behavior for displaying city names on hover.

Implementation Scope

• - A tooltip component named "Tooltip" is to be implemented.
• - This default tooltip component has to be enabled by "showTooltip (boolean)" prop which is false by default in order to keep existing uses not affected.
• - The tooltip has to be shown on top-right corner of the cursor with offsets (left: 16px, top: -32px) on hover.
• - The tooltip is stylized with black background and white text color by default.
• - The tooltip text can be customized by a prop named as "tooltipText".
• - Update README.
• - Prepare CHANGELOG.

Version

This feature will be released in "1.1.0" as minor feature version.

ReferenceError: document is not defined

using with Next.js

Server Error
ReferenceError: document is not defined

This error happened while generating the page. Any console logs will be displayed in the terminal window.
Call Stack
Object.C.exports [as insertStyleElement]
file:///Users/selcuk/weather-app/node_modules/turkey-map-react/lib/index.js (2:9961)
Object.C.exports [as domAPI]
file:///Users/selcuk/weather-app/node_modules/turkey-map-react/lib/index.js (2:10174)
n
file:///Users/selcuk/weather-app/node_modules/turkey-map-react/lib/index.js (2:9095)
r
file:///Users/selcuk/weather-app/node_modules/turkey-map-react/lib/index.js (2:8981)
C.exports
file:///Users/selcuk/weather-app/node_modules/turkey-map-react/lib/index.js (2:9317)
<unknown>
file:///Users/selcuk/weather-app/node_modules/turkey-map-react/lib/index.js (2:11805)

County Map When A City is Clicked

Introduction

When a city is clicked on the map there is no default behavior as the version of "v1.1.1". For majority of use cases can cover county base actions.

When a city clicked, a county map of the city can be displayed on a popup. This behavior can be enabled by a prop which is not present by default.

County data (built-in or custom) has to be explicitly imported in order to reduce bundle size when not used.

This release will not be backward compatible due to the current data prop has been changed.

Must Haves

• Built-in county list has to be provided.
• Current data prop will be renamed as cities.
• A new prop named counties which accepts county data. This prop is undefined by default.
• On click to a city, opacity of the Turkey Map will be reduced to .75 and City Map will be painted on top of the Turkey Map with centered vertically and horizontally.

Introduced In

v2.0.0

Kıbrıs eksik kalmış

Kıbrıs'ı da ekler misiniz? Bu plugin'in jquery versiyonunda vardı. isterseniz kodunu ekleyebilirim buraya

Changing city color

Hello Erdi,

How can I change city color by plateNumber. I don't want to change color of the all cities.

Error: Minified React error #130 after deploy

Everything working fine at local. After deploy getting this error.
https://weather.selcukguler.com/
https://github.com/selcukguler0/weather_app

index.99339086.js:32 Uncaught Error: Minified React error #130; visit https://reactjs.org/docs/error-decoder.html?invariant=130&args[]=object&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
    at Tn (index.99339086.js:32:49682)
    at y (index.99339086.js:30:17372)
    at We (index.99339086.js:32:1494)
    at to (index.99339086.js:32:44706)
    at Z0 (index.99339086.js:32:40003)
    at Ou (index.99339086.js:32:39931)
    at rr (index.99339086.js:32:39785)
    at _5 (index.99339086.js:32:36120)
    at E9 (index.99339086.js:32:36932)
    at w2 (index.99339086.js:30:3274)
Tn @ index.99339086.js:32
y @ index.99339086.js:30
We @ index.99339086.js:32
to @ index.99339086.js:32
Z0 @ index.99339086.js:32
Ou @ index.99339086.js:32
rr @ index.99339086.js:32
_5 @ index.99339086.js:32
E9 @ index.99339086.js:32
w2 @ index.99339086.js:30
(anonymous) @ index.99339086.js:32