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 |

Authors

• @simamojtahedi