React Istanbul Map

An Istanbul map implemented on React.

Installation

$ npm install react-istanbul-map

or

$ yarn add react-istanbul-map

Usage

Import the package in your component:

import IstanbulMap from 'react-istanbul-map'

Using with default props

<IstanbulMap />

NOTE: Make sure that you imported Bootstrap CSS file as below:

import 'bootstrap/dist/css/bootstrap.min.css'

Styling

Name	Description	Default
mapColor	The color of districts without hover	#708090
hoverColor	The color of districts with hover	#F9D342

<IstanbulMap
  mapColor="#colorCode"
  hoverColor="#colorCode"
/>

Custom Data

You can use your data in the format as below:

const customData = [
  {
    name: "TUZLA",
    content: "Nüfus: 267.400 (2019)"
  },
  {
    name: "PENDİK",
    content: "Nüfus: 711.894 (2019)"
  },
  ...
];

Use your custom data in data prop:

<IstanbulMap
  data={customData}
/>

NOTE: If you don't provide any data, only the name of each district will be shown by default.

API

props

Name	Description	Default
isHoverable	If it's hoverable, the district names with/without additional content will be shown	true
mapWidth	The width of viewport for SVG	1000px
mapHeight	The height of viewport for SVG	700px
viewBox	The viewbox for SVG	70 25 80 60

License

This project is licensed under MIT (https://opensource.org/licenses/MIT)