react-iran-map v0.1.3

Iran Map

This is an interactive and responsive SVG map of Iran which is a powerful tool for visualizing data related to Iran's provinces. It allows users to customize the colors of each province based on data values and additionally, users can click on each province to change it's color and retrieve it's name using a simple function.

This package is perfect for anyone looking to create data visualizations related to Iran or for anyone who needs an interactive map of Iran's provinces.

Demo

Live Demo

Installation

npm i react-iran-map

Usage

import { IranMap } from 'react-iran-map'
import mapData from '../data.tsx'

function App() {
  const selectProvinceHandler = (province) => {
    console.log(province)
  }

  return (
    <div style={{ fontFamily: 'vazir' }}>
      <IranMap
        data={mapData}
        colorRange='30, 70, 181'
        width={600}
        textColor='#000'
        defaultSelectedProvince='tehran'
        deactiveProvinceColor='#eee'
        selectedProvinceColor='#3bcc6d'
        tooltipTitle='تعداد:'
        selectProvinceHandler={selectProvinceHandler}
      />
    </div>
  )
}

export default App

Data schema

const mapData = {
  ardabil: 0,
  isfahan: 20,
  alborz: 11,
  ilam: 18,
  eastAzerbaijan: 10,
  westAzerbaijan: 20,
  bushehr: 15,
  tehran: 3,
  chaharmahalandBakhtiari: 25,
  southKhorasan: 29,
  razaviKhorasan: 11,
  northKhorasan: 19,
  khuzestan: 12,
  zanjan: 18,
  semnan: 9,
  sistanAndBaluchestan: 3,
  fars: 7,
  qazvin: 35,
  qom: 30,
  kurdistan: 24,
  kerman: 23,
  kohgiluyehAndBoyerAhmad: 2,
  kermanshah: 7,
  golestan: 18,
  gilan: 14,
  lorestan: 7,
  mazandaran: 28,
  markazi: 25,
  hormozgan: 14,
  hamadan: 19,
  yazd: 32,
}

Available attributes

Authors

• @simamojtahedi