algeria-map-ts

A React component that displays an interactive map of Algeria including all 58 wilayas.

Demo

You can see a live demo of the component in action at the following link:

Live Demo

Installation

This component is available via npm. To install, run the following command:

npm

npm install --save algeria-map-ts

yarn

yarn add algeria-map-ts

Usage

The component is straightforward to use. First, import it, and then use it as a regular React component:

Example:

import { Map } from "react-algeria-map-ts";

<Map
  color="#55E6C1"
  HoverColor="#58B19F"
  stroke="#fff"
  hoverStroke="#218c74"
  height="400px"
  width="400px"
  data={data}
  onWilayaClick={(wilaya, data) => console.log(wilaya, data)}
/>;

Props

| Prop | Type | Description | | ------------- | --------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | color | string | Set the default color of the wilayas in the map | | HoverColor | string | Set the color of the hovered wilaya | | stroke | string | Set the color of the borders of the wilayas | | hoverStroke | string | Set the color of the borders of the hovered wilaya | | height | string | Set the occupied height by the map | | width | string | Set the occupied width by the map | | data | object | Sets the data to show in hover or click actions on each wilaya. The keys are fixed, and the values of the keys value and color if u didn't give a color to a wilaya then the default color will be applied. | | onWilayaClick | function(key: string, value: string | number | boolean): void | The callback function to execute when the wilaya is being clicked |

Data Prop

The data prop is an object where each key is the name of the wilaya, and its value is an object with value and color properties. The value represents the data to display, and color is the color of the wilaya.

Exmaple:

const data = {
  Adrar: { value: 120, color: "#fff9eb" },
  Alger: { value: 60, color: "#ebf9ee" },
  // ... other wilayas
};

Feel free to customize the data object to include the specific values and colors you want for each wilaya.

TypeScript Support

The component is now fully compatible with TypeScript. Benefit from type checking and improved developer experience.

Contributing

We warmly welcome contributions from everyone, regardless of their level of expertise.

If you're making a major change, it's a good idea to create an issue first to discuss it.

To start contributing, follow these steps:

1. Fork the repo.
2. Clone your fork: git clone https://github.com/Ad019El/algeria-map-ts.git
3. Create your feature branch: git checkout -b my-new-feature
4. Make your changes and commit them: git commit -am 'Add some feature'
5. Push to the branch: git push origin my-new-feature
6. Submit a pull request.

We'll review your pull request as soon as we can. Thanks for your contribution!

Credits

This project is an enhancement of the original react-algeria-map.