Iran Map React

The Iran Map React Component is a versatile and customizable map component that displays all cities of Iran. Designed specifically for React.js applications, this package allows developers to easily integrate an interactive map of Iran into their projects.

Features

• Comprehensive Coverage: Displays all cities in Iran with precise locations.
• Customization: Easily customize the appearance, including colors, labels, and styles to match your application's design.
• Interactivity: Supports interactive features such as tooltips, hover effects, and click events to enhance user engagement.
• Responsive Design: Ensures optimal display and performance across various devices and screen sizes.
• Lightweight: Minimal dependencies to keep your application fast and responsive.
• Easy Integration: Simple and straightforward setup to get the map up and running quickly.

Demo

Live Demo

Installation

The package can be installed via npm:

npm install iran-map-react

Usage

React Component:

import { IranMap } from 'iran-map-react';

function App() {
    const mapData = {
        ardabil: 16,
        isfahan: 20,
        alborz: 11,
        ilam: 14,
        eastAzerbaijan: 10,
        westAzerbaijan: 20,
        bushehr: 15,
        tehran: 35,
        chaharmahalandBakhtiari: 6,
        southKhorasan: 19,
        razaviKhorasan: 11,
        northKhorasan: 19,
        khuzestan: 12,
        zanjan: 12,
        semnan: 9,
        sistanAndBaluchestan: 3,
        fars: 7,
        qazvin: 25,
        qom: 22,
        kurdistan: 24,
        kerman: 23,
        kohgiluyehAndBoyerAhmad: 20,
        kermanshah: 7,
        golestan: 18,
        gilan: 14,
        lorestan: 7,
        mazandaran: 18,
        markazi: 25,
        hormozgan: 6,
        hamadan: 19,
        yazd: 14,
    };
    const clickProvinceHandler = (province: IProvinceData) => {
        alert(`${province.name} ${province.count}`);
    };
    return (
        <>
            <IranMap
                data={mapData}
                seaBg="#2196f3"
                width={600}
                colorProvincesRange="122, 155, 85" // rgb(122, 155, 85)
                colorSelectedProvince="#e91e63"
                defaultSelectedProvince="tehran"
                clickProvinceHandler={clickProvinceHandler}
            />
        </>
    );
}

export default App;

Props

Here are the props that can be passed to the <IranMap /> component:

| Name | Type | Required | Description | | :------------------------ | :--------- | :------- | :---------------------------------------------------------------------------------- | | data | object | True | An object that has 'Data schema' items as provinces | | colorProvincesRange | string | True | it define color range of all provinces which not in defaultSelectedProvince props . | | seaBg | string | False | (optional): Customize the color scheme of the Sea. | | width | number | False | (optional): Width of the svg map. (default 100% of screen) | | defaultSelectedProvince | string | False | (optional): set the default province. (default is none of them) | | colorSelectedProvince | string | False | (optional): set the color selected province. | | clickProvinceHandler | function | False | you can write a function to get each province objects. |

Authors

• @mohsensami

Contributing

If you want to contribute to this project and make it better, your help is very welcome. Create an issue or submit a pull request.