🗺️ iran-map-simple

Iran map in SVG format for React JS applications.

Note: This library works with ⚛️ React versions ^18.0.0 and ^19.0.0

Install

Run the following command to install:

npm i iran-map-simple

Props

| Prop | Type | Default | Description | |------|--------|----------|-------------| | width | number | 500 | Sets the map width. (px) | | defaultProvinces | number[] | [] | Pre-selected provinces IDs. | | fillColor | string | #CCD1D1 | Background color of provinces. | | hoverColor | string | #C1C1C1 | Background color on hover. | | selectedColor | string | #58D68D | Background color for selected provinces. | | tooltipBackground | string | #333333 | Tooltip background color. | | tooltipColor | string | #FFFFFF | Tooltip text color. | | tooltipFontSize | number | 12 | Font size of tooltip text. (px) | | tooltipFontFamily | string | sans-serif | Font family of tooltip text. | | onSelect | (provinces: number[]) => void | console.log | Callback fn when provinces are selected. |

Provinces

The list of provinces is separated by ID. After clicking on each province, the corresponding ID is returned.

| Province name | id | | -------------------- | -- | | آذربایجان شرقی | 1 | | آذربایجان غربی | 2 | | اردبیل | 3 | | اصفهان | 4 | | ایلام | 5 | | بوشهر | 6 | | تهران | 7 | | چهار محال و بختیاری | 8 | | خوزستان | 10 | | زنجان | 11 | | سمنان | 12 | | سیستان و بلوچستان | 13 | | فارس | 14 | | کرمان | 15 | | کردستان | 16 | | کرمانشاه | 17 | | کهگیلویه و بویر احمد | 18 | | گیلان | 19 | | لرستان | 20 | | مازندران | 21 | | مرکزی | 22 | | هرمزگان | 23 | | همدان | 24 | | یزد | 25 | | قم | 26 | | گلستان | 27 | | قزوین | 28 | | خراسان جنوبی | 29 | | خراسان رضوی | 30 | | خراسان شمالی | 31 | | البرز | 32 |

CSS classNames

CSS classes based on the BEM naming convention:

• Wrapper: iran-map-simple
• SVG: iran-map-simple__svg
• Path: iran-map-simple__province
• Path-selected): iran-map-simple__province--selected
• Tooltip: iran-map-simple__tooltip

Example

import IranMapSimple from 'iran-map-simple';

const App = () => {
  return (
    <IranMapSimple defaultProvinces={[7]} onSelect={console.log} />
  )
}

export default App;

Demo

In order to start the demo version, run the following commands:

npm run build
cd ./demo
npm i
npm run dev

The example project uses Vite in background and the output will be here by default: http://localhost:5173/