React-iran-provinces-map NPM

Iran Provinces Map

This NPM package provides interactive maps of Iran's provinces with city details and hover functionality. The package includes interactive and responsive SVG maps of all 31 provinces, each containing cities with customizable values displayed on hover. Additionally, the background color of each city changes based on it's count, creating a visually engaging experience for users.

You can use react-iran-map to create Iran map and get each province's name by clicking on it.

Installation

npm i react-iran-provinces-map

Usage

import { IranProvincesMap } from "react-iran-provinces-map";
import mapData from "../data.tsx";

function App() {
  const selectedProvince = "tehran";

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

  return (
    <div style={{ fontFamily: "vazir" }}>
      <IranProvincesMap
        province={selectedProvince}
        provinceData={mapData}
        colorRange="30, 70, 181"
        deactiveProvinceColor="#eee"
        selectedProvinceColor="#3bcc6d"
        tooltipTitle="تعداد:"
        textColor="#000"
        width={600}
        selectProvinceHandler={selectProvinceHandler}
      />
    </div>
  );
}

export default App;

Data schema

You can see each province data in this link:

For example, you can use this data for 'tehran' as selected province:

const mapData = {
    malard: 10,
    shahriar: 23,
    robatkarim: 6,
    baharestan: 0,
    eslamshahr: 27,
    qods: 19,
    tehran: 29,
    rey: 1,
    varamin: 9,
    pishva: 2,
    qarchak: 17,
    pakdasht: 14,
    damavand: 25,
    pardis: 21,
    shemiranat: 11,
    firuzkuh: 3,
};

Available attributes

Name	Type	Required	Description
`province`	`string`	True	Selected province name
`provinceData`	`Object`	True	An object that has 'Data schema' items as cities for each province
`colorRange`	`string`	True	It defines the range of color based on it's value and it should be rgb color like this : `"30, 70, 181"`
`width`	`number`	False	Width of the map
`textColor`	`string`	False	Color of map texts
`deactiveProvinceColor`	`string`	False	It set color of the provinces with `0` value
`selectedProvinceColor`	`string`	False	Color of the clicked city
`tooltipTitle`	`string`	False	You can add a name for the value in tooltip
`selectProvinceHandler`	`function`	False	You can define a function like example above to get selected city name